html body.watch-together-discover-page {
  --wtd-crimson: #c4163e;
  --wtd-crimson-bright: #ec365c;
  --wtd-crimson-soft: rgba(196, 22, 62, 0.15);
  --wtd-green: #68e2a3;
  --wtd-text: #f5f3f6;
  --wtd-muted: #9e99a5;
  --wtd-line: rgba(255, 255, 255, 0.085);
  padding-top: 112px !important;
  color: var(--wtd-text);
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(103, 19, 46, 0.16), transparent 70%),
    linear-gradient(145deg, #111113, #09090b 58%, #0d0b0e);
}

.watch-together-discover-page .topbar:not(.scrolled) {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.94), rgba(10, 10, 12, 0.2), transparent);
}

html body.watch-together-discover-page .topbar,
html body.watch-together-discover-page .topbar.scrolled {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.wtd-shell {
  width: min(calc(100% - clamp(24px, 4vw, 64px)), 1440px);
  margin: 0 auto 58px;
}

.wtd-shell *,
.wtd-picker *,
.wtd-toast {
  box-sizing: border-box;
}

.wtd-shell button,
.wtd-picker button,
.wtd-shell input,
.wtd-picker input {
  font: inherit;
}

.wtd-hero {
  position: relative;
  min-height: 430px;
  padding: clamp(38px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background:
    linear-gradient(105deg, rgba(17, 15, 19, 0.98) 0%, rgba(19, 14, 18, 0.94) 48%, rgba(28, 13, 20, 0.9) 100%),
    #111114;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  isolation: isolate;
}

.wtd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.13;
  background-image: radial-gradient(rgba(255, 255, 255, 0.45) 0.55px, transparent 0.55px);
  background-size: 15px 15px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.wtd-hero-glow {
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -80px;
  width: 660px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 24, 64, 0.25), rgba(115, 14, 43, 0.08) 44%, transparent 70%);
  filter: blur(5px);
}

.wtd-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 690px;
}

.wtd-eyebrow,
.wtd-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ff8ba3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.wtd-eyebrow i,
.wtd-section-kicker i,
.wtd-live-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wtd-crimson-bright);
  box-shadow: 0 0 0 5px rgba(236, 54, 92, 0.09), 0 0 15px rgba(236, 54, 92, 0.55);
  animation: wtdLivePulse 1.8s ease-in-out infinite;
}

.wtd-hero h1 {
  margin: 17px 0 16px;
  color: #fff;
  font-size: clamp(42px, 5.2vw, 74px);
  font-weight: 900;
  line-height: 0.99;
  letter-spacing: -0.057em;
}

.wtd-hero h1 em {
  color: transparent;
  background: linear-gradient(95deg, #ff5577, #c91a45 56%, #8d1431);
  background-clip: text;
  -webkit-background-clip: text;
  font-style: normal;
}

.wtd-hero-copy > p {
  max-width: 570px;
  margin: 0;
  color: #aaa5af;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.55;
}

.wtd-hero-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}

.wtd-primary-action {
  min-width: 218px;
  min-height: 58px;
  padding: 8px 18px 8px 9px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 112, 139, 0.28);
  border-radius: 15px;
  background: linear-gradient(105deg, #8f1231, #c5163f 56%, #df2b50);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 13px 30px rgba(167, 14, 51, 0.24);
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.wtd-primary-action:hover,
.wtd-primary-action:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 17px 38px rgba(184, 17, 56, 0.32);
  outline: none;
}

.wtd-primary-action:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 4px 12px rgba(69, 1, 18, 0.3), 0 5px 14px rgba(121, 8, 35, 0.18);
}

.wtd-action-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.wtd-action-icon svg,
.wtd-code-icon svg,
.wtd-code-form svg,
.wtd-room-search svg,
.wtd-how svg,
.wtd-picker svg,
.wtd-empty svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wtd-primary-action > span:last-child {
  display: grid;
  gap: 3px;
}

.wtd-primary-action b {
  font-size: 13px;
  font-weight: 850;
}

.wtd-primary-action small {
  color: rgba(255, 233, 238, 0.68);
  font-size: 9.5px;
}

.wtd-secondary-action {
  min-height: 48px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  color: #bbb7c0;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.wtd-secondary-action:hover,
.wtd-secondary-action:focus-visible {
  border-color: rgba(255, 118, 143, 0.2);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  outline: none;
}

.wtd-code-panel {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(14, 13, 17, 0.78);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.wtd-code-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.wtd-code-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 94, 126, 0.17);
  border-radius: 12px;
  background: rgba(196, 22, 62, 0.1);
  color: #ff7894;
}

.wtd-code-head > span:last-child {
  display: grid;
  gap: 3px;
}

.wtd-code-head b {
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}

.wtd-code-head small {
  color: #85818b;
  font-size: 9.5px;
}

.wtd-code-form {
  height: 58px;
  margin-top: 17px;
  padding: 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wtd-code-form:focus-within {
  border-color: rgba(232, 49, 88, 0.42);
  box-shadow: 0 0 0 4px rgba(196, 22, 62, 0.08);
}

.wtd-code-form label {
  min-width: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wtd-code-form label > span {
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #6f6b74;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.wtd-code-form input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wtd-code-form input::placeholder {
  color: #49464d;
}

.wtd-host-avatar.has-image > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.wtd-code-form button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 113, 139, 0.24);
  border-radius: 11px;
  background: linear-gradient(135deg, #a51235, #d9254c);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(164, 13, 48, 0.24);
  transition: transform 0.1s ease, filter 0.2s ease;
}

.wtd-code-form button:hover,
.wtd-code-form button:focus-visible {
  filter: brightness(1.1);
  outline: none;
}

.wtd-code-form button:active {
  transform: translateY(1px) scale(0.94);
}

.wtd-code-status {
  min-height: 15px;
  margin: 7px 2px 0;
  color: #ff91a8;
  font-size: 9px;
  font-weight: 700;
}

.wtd-online-strip {
  padding-top: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  color: #85818b;
  font-size: 9px;
}

.wtd-online-strip[hidden] { display: none !important; }

.wtd-online-strip b {
  color: #d6d2d9;
  font-weight: 850;
}

.wtd-avatar-stack {
  display: flex;
  padding-left: 5px;
}

.wtd-avatar-stack i {
  width: 27px;
  height: 27px;
  margin-left: -5px;
  display: grid;
  place-items: center;
  border: 2px solid #141217;
  border-radius: 50%;
  background: linear-gradient(145deg, #7f394e, #491f2b);
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
  box-shadow: 0 3px 9px rgba(0,0,0,.28);
}

.wtd-avatar-stack i img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.wtd-avatar-stack i:nth-child(2) { background: linear-gradient(145deg, #55507e, #302d4a); }
.wtd-avatar-stack i:nth-child(3) { background: linear-gradient(145deg, #3f7168, #25433e); }
.wtd-avatar-stack i.is-more { background: #242128; color: #aaa5ae; }
.wtd-avatar-stack i.is-speaking {
  z-index: 2;
  border-color: #68e2a2;
  box-shadow: 0 0 0 2px rgba(104,226,162,.12), 0 0 11px rgba(104,226,162,.34);
}

.wtd-hero-orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(280px, 31vw, 450px);
  width: 300px;
  height: 300px;
  transform: translateY(-50%);
  opacity: 0.42;
  pointer-events: none;
}

.wtd-orbit-ring,
.wtd-orbit-center,
.wtd-orbit-node {
  position: absolute;
  border-radius: 50%;
}

.wtd-orbit-ring {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wtd-orbit-ring-one { inset: 18px; }
.wtd-orbit-ring-two { inset: 69px; border-style: dashed; }

.wtd-orbit-center {
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 103, 132, 0.35);
  background: rgba(126, 20, 48, 0.3);
  color: #ff7895;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 12px rgba(197, 22, 63, 0.045), 0 0 60px rgba(197, 22, 63, 0.2);
}

.wtd-orbit-center svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.wtd-orbit-node {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid #21161c;
  background: #87364e;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.35);
}

.wtd-orbit-node-one { top: 16px; right: 46px; }
.wtd-orbit-node-two { right: 0; bottom: 74px; background: #554676; }
.wtd-orbit-node-three { bottom: 23px; left: 31px; background: #356359; }

.wtd-room-section {
  padding-top: 70px;
  scroll-margin-top: 100px;
}

.wtd-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.wtd-section-head h2,
.wtd-how h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.wtd-section-head p {
  margin: 8px 0 0;
  color: #8f8a94;
  font-size: 13px;
}

.wtd-live-summary {
  min-width: 110px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 8px auto;
  column-gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.wtd-live-summary b {
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.wtd-live-summary small {
  grid-column: 2;
  color: #78747d;
  font-size: 8.5px;
}

.wtd-live-pulse {
  grid-row: 1 / span 2;
  background: var(--wtd-green);
  box-shadow: 0 0 0 5px rgba(104, 226, 163, 0.08), 0 0 13px rgba(104, 226, 163, 0.45);
}

.wtd-toolbar {
  margin-top: 27px;
  padding: 9px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.022);
}

.wtd-room-search,
.wtd-picker-search {
  height: 44px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: #77727c;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wtd-room-search:focus-within,
.wtd-picker-search:focus-within {
  border-color: rgba(217, 35, 76, 0.35);
  box-shadow: 0 0 0 3px rgba(196, 22, 62, 0.06);
}

.wtd-room-search svg,
.wtd-picker-search svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.wtd-room-search input,
.wtd-picker-search input {
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: 0;
  font-size: 11px;
}

.wtd-room-search input::placeholder,
.wtd-picker-search input::placeholder { color: #6e6973; }

.wtd-filter-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wtd-filter-tabs button {
  height: 38px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #817d86;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 800;
  transition: transform 0.1s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.wtd-filter-tabs button:hover,
.wtd-filter-tabs button:focus-visible {
  color: #d9d5dc;
  outline: none;
}

.wtd-filter-tabs button.is-active {
  border: 0;
  background: rgba(255, 255, 255, 0.075);
  color: #bbb8c0;
}

.wtd-filter-tabs button:active {
  transform: translateY(1px) scale(0.96);
}

.wtd-filter-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: #817d86;
}

.wtd-filter-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.wtd-feature-room {
  margin-top: 22px;
}

.wtd-feature-room:empty,
.wtd-room-grid:empty {
  display: none;
}

.wtd-feature-card {
  position: relative;
  min-height: 314px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.58fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: #121216;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.3);
}

.wtd-feature-media,
.wtd-room-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #17171b;
}

.wtd-feature-media > img,
.wtd-room-media > img,
.wtd-picker-anime-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.wtd-feature-media::after,
.wtd-room-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 11, 0.1), rgba(8, 8, 11, 0.15) 55%, #121216 100%), linear-gradient(0deg, rgba(8, 8, 11, 0.54), transparent 55%);
}

.wtd-feature-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wtd-live-badge,
.wtd-room-live {
  width: fit-content;
  height: 25px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 106, 135, 0.22);
  border-radius: 999px;
  background: rgba(99, 9, 31, 0.68);
  color: #ff9aae;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.1em;
  backdrop-filter: blur(8px);
}

.wtd-live-badge i,
.wtd-room-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4f72;
  box-shadow: 0 0 9px rgba(255, 79, 114, 0.8);
  animation: wtdLivePulse 1.6s ease-in-out infinite;
}

.wtd-feature-anime {
  max-width: 540px;
}

.wtd-feature-anime span {
  color: #ff8ca4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.wtd-feature-anime h3 {
  margin: 7px 0 5px;
  color: #fff;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

.wtd-feature-anime p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.wtd-feature-info {
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wtd-feature-room-name {
  color: #77727c;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wtd-feature-info h3 {
  margin: 8px 0 6px;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.wtd-feature-info > p {
  margin: 0;
  color: #85808a;
  font-size: 11px;
  line-height: 1.5;
}

.wtd-host-row {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.wtd-host-avatar {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--host-a, #8f3852), var(--host-b, #49202d));
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.wtd-host-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wtd-host-copy b {
  overflow: hidden;
  color: #dedbe1;
  font-size: 10.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wtd-host-copy small {
  color: #716d76;
  font-size: 8.5px;
}

.wtd-friend-chip {
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(104, 226, 163, 0.12);
  border-radius: 999px;
  background: rgba(104, 226, 163, 0.06);
  color: #77dca6;
  font-size: 7.5px;
  font-weight: 850;
}

.wtd-room-facts {
  margin-top: 18px;
  padding: 11px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.wtd-room-facts span {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: center;
}

.wtd-room-facts span + span { border-left: 1px solid rgba(255, 255, 255, 0.065); }
.wtd-room-facts b { color: #ddd9e0; font-size: 10px; font-weight: 850; }
.wtd-room-facts small { color: #6f6a74; font-size: 7.5px; }

.wtd-join-button {
  position: relative;
  width: 100%;
  height: 45px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 106, 133, 0.25);
  border-radius: 12px;
  background: linear-gradient(105deg, #8f1231, #c4163e 58%, #db294e);
  color: #fff;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 850;
  box-shadow: 0 9px 23px rgba(160, 12, 46, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.1s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.wtd-join-button::after {
  content: "→";
  position: absolute;
  right: 15px;
  font-size: 14px;
}

.wtd-join-button:hover,
.wtd-join-button:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 12px 28px rgba(179, 15, 53, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.17);
  outline: none;
}

.wtd-join-button:active { transform: translateY(2px) scale(0.98); box-shadow: inset 0 4px 10px rgba(65, 2, 17, 0.32); }

.wtd-room-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wtd-room-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background: rgba(18, 18, 22, 0.92);
  box-shadow: 0 13px 34px rgba(0, 0, 0, 0.24);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.wtd-room-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 92, 123, 0.18);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.34);
}

.wtd-room-media {
  height: 158px;
}

.wtd-room-media::after {
  background: linear-gradient(0deg, rgba(12, 12, 15, 0.72), transparent 65%);
}

.wtd-room-live {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  height: 23px;
}

.wtd-room-members {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 11px;
  height: 25px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(6, 6, 8, 0.68);
  color: #ddd9e0;
  font-size: 8px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.wtd-room-members svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.wtd-room-body {
  padding: 15px;
}

.wtd-room-anime-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #ff839c;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.wtd-room-anime-label span:last-child { color: #716c76; }

.wtd-room-body h3 {
  margin: 7px 0 4px;
  overflow: hidden;
  color: #f1eef3;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wtd-room-body > p {
  margin: 0;
  overflow: hidden;
  color: #827d87;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wtd-room-card .wtd-host-row { margin-top: 13px; }
.wtd-room-card .wtd-host-avatar { width: 31px; height: 31px; font-size: 7.5px; }
.wtd-room-card .wtd-host-copy b { font-size: 9.5px; }
.wtd-room-card .wtd-join-button { height: 40px; margin-top: 13px; }

.wtd-empty {
  margin-top: 22px;
  padding: 55px 24px;
  display: grid;
  justify-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.018);
  text-align: center;
}

.wtd-empty[hidden] { display: none; }
.wtd-empty > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: rgba(196,22,62,0.1); color: #ff7893; }
.wtd-empty h3 { margin: 15px 0 5px; font-size: 17px; }
.wtd-empty p { margin: 0; color: #7e7983; font-size: 11px; }
.wtd-empty button { height: 39px; margin-top: 16px; padding: 0 16px; border: 1px solid rgba(255,101,130,.22); border-radius: 11px; background: rgba(196,22,62,.12); color: #ff91a7; cursor: pointer; font-size: 10px; font-weight: 850; }

.wtd-how {
  margin-top: 74px;
  padding: clamp(27px, 4vw, 45px);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.027), rgba(255,255,255,0.012));
}

.wtd-how > header { text-align: center; }
.wtd-how > header > span { color: #ff8099; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wtd-how h2 { font-size: clamp(25px, 3vw, 36px); }

.wtd-how-grid {
  margin-top: 31px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.wtd-how article {
  position: relative;
  min-height: 180px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 17px;
  background: rgba(255,255,255,.022);
}

.wtd-how article > span { position: absolute; top: 9px; right: 14px; color: rgba(255,255,255,.035); font-size: 54px; font-weight: 950; }
.wtd-how article > i { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,94,123,.14); border-radius: 12px; background: rgba(196,22,62,.085); color: #ff7893; }
.wtd-how h3 { margin: 17px 0 6px; color: #eeeaf0; font-size: 14px; font-weight: 900; }
.wtd-how p { max-width: 270px; margin: 0; color: #7f7a83; font-size: 10.5px; line-height: 1.55; }

/* Anime picker */
html.wtd-modal-open,
body.wtd-modal-open { overflow: hidden; }

.wtd-picker {
  position: fixed;
  inset: 0;
  z-index: 1300;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(4, 4, 7, 0.77);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity .22s ease, visibility .22s ease;
}

.wtd-picker[hidden] { display: none; }
.wtd-picker.is-open { opacity: 1; visibility: visible; }

.wtd-picker-dialog {
  width: min(780px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(24,22,27,.99), rgba(11,11,14,.99));
  box-shadow: 0 35px 100px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.04);
  opacity: 0;
  transform: translateY(18px) scale(.975);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2,.9,.2,1);
}

.wtd-picker.is-open .wtd-picker-dialog { opacity: 1; transform: none; }

.wtd-picker-dialog > header {
  display: grid;
  grid-template-columns: minmax(0,1fr) 40px;
  align-items: start;
  gap: 20px;
}

.wtd-picker-dialog header span { color: #ff7f98; font-size: 8.5px; font-weight: 900; letter-spacing: .14em; }
.wtd-picker-dialog header h2 { margin: 7px 0 5px; color: #fff; font-size: 25px; font-weight: 900; letter-spacing: -.035em; }
.wtd-picker-dialog header p { margin: 0; color: #817c85; font-size: 10px; }
.wtd-picker-dialog header button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); color: #9a959f; cursor: pointer; }
.wtd-picker-dialog header button:hover,.wtd-picker-dialog header button:focus-visible { color:#fff; background:rgba(255,255,255,.07); outline:none; }
.wtd-picker-search { margin-top: 20px; }

.wtd-picker-grid {
  max-height: min(500px, calc(100dvh - 245px));
  margin-top: 14px;
  padding-right: 3px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}

.wtd-picker-anime {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.wtd-picker-anime:hover,.wtd-picker-anime:focus-visible { transform:translateY(-2px); border-color:rgba(255,93,123,.22); background:rgba(196,22,62,.055); outline:none; }
.wtd-picker-anime:active { transform:translateY(1px) scale(.98); }
.wtd-picker-anime-media { position:relative; height:105px; overflow:hidden; background:#19191d; }
.wtd-picker-anime-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,10,13,.6),transparent 60%); }
.wtd-picker-anime-copy { padding:11px; display:grid; gap:4px; }
.wtd-picker-anime-copy b { overflow:hidden; color:#e9e6eb; font-size:10.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.wtd-picker-anime-copy span { color:#77727b; font-size:8.5px; }
.wtd-picker-empty { grid-column:1/-1; padding:38px 16px; color:#827d87; font-size:11px; text-align:center; }

html.wtd-picker-open,
body.wtd-picker-open { overflow:hidden; }

.wtd-toast {
  position: fixed;
  z-index: 1400;
  left: 50%;
  bottom: 25px;
  max-width: calc(100vw - 30px);
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(24,23,28,.97);
  color: #f2eff3;
  box-shadow: 0 15px 40px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,12px);
  font: 750 10.5px/1.3 "Segoe UI",sans-serif;
  transition: opacity .2s ease, transform .24s ease;
}

.wtd-toast.is-visible { opacity:1; transform:translate(-50%,0); }

@keyframes wtdLivePulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.55; transform:scale(.78); }
}

@media (max-width: 1100px) {
  html body.watch-together-discover-page { padding-top: 102px !important; }
  html body.watch-together-discover-page .topbar,
  html body.watch-together-discover-page .topbar:not(.scrolled),
  html body.watch-together-discover-page .topbar.scrolled { background: transparent !important; }
  .wtd-hero { grid-template-columns:minmax(0,1fr) minmax(280px,340px); padding:42px; }
  .wtd-hero-orbit { display:none; }
  .wtd-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .wtd-hero { grid-template-columns:minmax(0,1fr); }
  .wtd-hero-copy { max-width:620px; }
  .wtd-code-panel { width:100%; max-width:520px; }
  .wtd-toolbar { grid-template-columns:minmax(0,1fr); }
  .wtd-filter-tabs { overflow-x:auto; scrollbar-width:none; }
  .wtd-filter-tabs::-webkit-scrollbar { display:none; }
  .wtd-filter-tabs button { flex:0 0 auto; }
  .wtd-feature-card { grid-template-columns:minmax(0,1fr); }
  .wtd-feature-media { min-height:250px; }
  .wtd-feature-info { padding:22px; }
  .wtd-how-grid { grid-template-columns:minmax(0,1fr); }
  .wtd-how article { min-height:145px; }
}

@media (max-width: 640px) {
  html body.watch-together-discover-page { padding-top:102px !important; padding-bottom:70px; }
  html body.watch-together-discover-page .topbar .logo img,
  html body.watch-together-discover-page .topbar:not(.scrolled) .logo img,
  html body.watch-together-discover-page .topbar.scrolled .logo img { transform:translateY(30px) !important; }
  .wtd-shell { width:calc(100% - 16px); margin-bottom:30px; }
  .wtd-hero { min-height:0; padding:27px 18px 20px; gap:27px; border-radius:21px; }
  .wtd-hero h1 { margin-top:13px; font-size:clamp(37px,12vw,52px); }
  .wtd-hero-copy > p { font-size:13px; }
  .wtd-hero-actions { align-items:stretch; margin-top:22px; }
  .wtd-primary-action { width:100%; }
  .wtd-secondary-action { width:100%; justify-content:center; }
  .wtd-code-panel { padding:16px; border-radius:17px; }
  .wtd-room-section { padding-top:48px; }
  .wtd-section-head { align-items:flex-start; }
  .wtd-section-head p { max-width:240px; font-size:11px; }
  .wtd-live-summary { min-width:88px; padding:10px; }
  .wtd-toolbar { margin-top:21px; padding:7px; gap:8px; }
  .wtd-filter-tabs { padding-bottom:1px; }
  .wtd-feature-card { min-height:0; border-radius:18px; }
  .wtd-feature-media { min-height:210px; }
  .wtd-feature-overlay { padding:17px; }
  .wtd-feature-anime h3 { font-size:25px; }
  .wtd-feature-info { padding:18px; }
  .wtd-room-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .wtd-room-media { height:178px; }
  .wtd-how { margin-top:48px; padding:25px 15px; border-radius:20px; }
  .wtd-how-grid { margin-top:22px; }
  .wtd-picker { padding:0; place-items:end center; overflow:hidden; }
  .wtd-picker-dialog { width:100%; max-height:calc(100dvh - 18px); padding:20px 15px calc(18px + env(safe-area-inset-bottom)); border-right:0; border-bottom:0; border-left:0; border-radius:22px 22px 0 0; transform:translateY(30px); }
  .wtd-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:calc(100dvh - 245px); }
  .wtd-picker-anime-media { height:96px; }
  .wtd-toast { bottom:calc(82px + env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .wtd-section-head { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .wtd-section-head h2 { font-size:27px; }
  .wtd-live-summary small { display:none; }
  .wtd-live-summary { min-width:64px; grid-template-columns:8px auto; }
  .wtd-room-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .wtd-eyebrow i,.wtd-section-kicker i,.wtd-live-pulse,.wtd-live-badge i,.wtd-room-live i { animation:none; }
  .wtd-room-card,.wtd-primary-action,.wtd-picker,.wtd-picker-dialog,.wtd-picker-anime,.wtd-toast { transition:none; }
}

/* Voice-first room discovery refresh. */
.wtd-hero-orbit {
  width: 310px;
  height: 310px;
  opacity: .9;
}

.wtd-orbit-ring { border-color:rgba(255,255,255,.075); }
.wtd-orbit-ring-one { inset:10px; }
.wtd-orbit-ring-two { inset:60px; border-color:rgba(255,111,140,.12); }

.wtd-orbit-center {
  width:116px;
  height:116px;
  padding:20px 10px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-color:rgba(255,97,129,.28);
  background:radial-gradient(circle at 50% 32%,rgba(181,28,67,.42),rgba(75,17,36,.48));
  box-shadow:0 0 0 13px rgba(197,22,63,.035),0 0 58px rgba(197,22,63,.19);
}

.wtd-orbit-center > b { color:#fff; font-size:27px; font-weight:950; line-height:1; }
.wtd-orbit-center > small { color:#c6c1c9; font-size:8.5px; font-weight:800; }
.wtd-orbit-center > em { margin-top:7px; display:flex; align-items:center; gap:5px; color:#70d9a1; font-size:6.5px; font-style:normal; font-weight:950; letter-spacing:.08em; }
.wtd-orbit-center > em i { width:6px; height:6px; border-radius:50%; background:#60df99; box-shadow:0 0 9px rgba(96,223,153,.72); animation:wtdVoicePulse 1.45s ease-in-out infinite; }

.wtd-orbit-node {
  width:42px;
  height:42px;
  border-color:#25171d;
  font-size:10px;
}

.wtd-orbit-node b { font:900 10px/1 "Segoe UI",sans-serif; }
.wtd-orbit-node > i { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border:3px solid #20151a; border-radius:50%; background:#62df9c; box-shadow:0 0 9px rgba(98,223,156,.75); }
.wtd-orbit-node[hidden] { display:none !important; }
.wtd-orbit-node:not(.is-voice-ready) > i { display:none; }
.wtd-orbit-node.is-speaking { box-shadow:0 0 0 4px rgba(98,223,156,.18),0 9px 22px rgba(0,0,0,.35); }
.wtd-orbit-node b,
.wtd-orbit-node b img { width:100%; height:100%; border-radius:inherit; }
.wtd-orbit-node b { display:grid; place-items:center; overflow:hidden; }
.wtd-orbit-node b img { object-fit:cover; }
.wtd-orbit-node-one { top:12px; right:49px; }
.wtd-orbit-node-two { right:-1px; bottom:75px; }
.wtd-orbit-node-three { bottom:17px; left:38px; }
.wtd-orbit-node-four { top:82px; left:-2px; background:#8b6436; }

.wtd-feature-room {
  width:100%;
  margin:22px auto 0;
}

.wtd-feature-card {
  min-height:430px;
  display:block;
  border-color:rgba(255,255,255,.105);
  background:#101014;
}

.wtd-feature-card .wtd-feature-media { min-height:430px; height:100%; }
.wtd-feature-card .wtd-feature-media::after {
  background:
    linear-gradient(90deg,rgba(7,7,10,.88) 0%,rgba(7,7,10,.5) 38%,rgba(7,7,10,.08) 72%),
    linear-gradient(0deg,rgba(8,8,11,.97) 0%,rgba(8,8,11,.62) 35%,transparent 72%);
}

.wtd-feature-overlay { padding:25px 28px 26px; }
.wtd-feature-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wtd-feature-voice { min-height:28px; padding:0 10px; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(98,223,156,.15); border-radius:999px; background:rgba(8,24,17,.62); color:#75dfa6; font-size:8px; font-weight:900; backdrop-filter:blur(10px); }
.wtd-feature-voice svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

.wtd-feature-content { width:min(100%,780px); margin-top:auto; }
.wtd-feature-anime { display:flex; align-items:center; gap:9px; }
.wtd-feature-anime span { max-width:470px; overflow:hidden; color:#ff8ca4; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.wtd-feature-anime p { padding-left:9px; border-left:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.65); font-size:9px; }
.wtd-feature-content > h3 { margin:8px 0 6px; color:#fff; font-size:clamp(29px,3.2vw,44px); font-weight:950; line-height:1; letter-spacing:-.045em; text-shadow:0 4px 22px rgba(0,0,0,.6); }
.wtd-feature-description { width:min(100%,560px); margin:0; color:#aaa5ae; font-size:10.5px; line-height:1.5; }

.wtd-feature-social { margin-top:17px; display:flex; align-items:center; gap:20px; }
.wtd-feature-social .wtd-host-row { min-width:190px; margin:0; }
.wtd-feature-voice-room { display:flex; align-items:center; gap:9px; }
.wtd-feature-voice-room > span:last-child { display:grid; gap:2px; }
.wtd-feature-voice-room b { color:#dcd9df; font-size:9.5px; }
.wtd-feature-voice-room small { display:flex; align-items:center; gap:5px; color:#6ed79e; font-size:7.5px; }
.wtd-feature-voice-room small i { width:5px; height:5px; border-radius:50%; background:#62df9c; box-shadow:0 0 7px rgba(98,223,156,.7); }

.wtd-voice-stack { display:flex; padding-left:7px; }
.wtd-voice-stack > i { position:relative; width:28px; height:28px; margin-left:-7px; display:grid; place-items:center; border:2px solid #121116; border-radius:50%; background:linear-gradient(145deg,hsl(calc(345deg - var(--voice-index) * 65deg) 38% 42%),hsl(calc(345deg - var(--voice-index) * 65deg) 32% 23%)); color:#fff; font-size:7px; font-style:normal; font-weight:900; }
.wtd-voice-stack > i em { position:absolute; right:-1px; bottom:-1px; width:8px; height:8px; border:2px solid #121116; border-radius:50%; background:#62df9c; }

.wtd-feature-footer { margin-top:17px; padding-top:15px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:1px solid rgba(255,255,255,.09); }
.wtd-room-quick-stats { min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wtd-room-quick-stats > span,
.wtd-card-stats > span { min-height:29px; padding:0 9px; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.085); border-radius:9px; background:rgba(255,255,255,.04); color:#908b95; }
.wtd-room-quick-stats svg,
.wtd-card-stats svg,
.wtd-room-playback svg,
.wtd-card-preview svg,
.wtd-room-voice-live svg { width:13px; height:13px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wtd-room-quick-stats b,.wtd-card-stats b { color:#d6d2d9; font-size:8px; font-weight:900; }
.wtd-room-quick-stats small { color:#77727d; font-size:7px; }
.wtd-room-quick-stats .is-playback { color:#72dca3; }
.wtd-room-quick-stats .is-playback b { color:#8ce8b4; }

.wtd-feature-card .wtd-join-button,
.wtd-room-card .wtd-join-button {
  width:auto;
  min-width:96px;
  height:40px;
  margin:0;
  padding:0 13px;
  gap:10px;
  flex:0 0 auto;
  border-radius:11px;
}
.wtd-feature-card .wtd-join-button { min-width:138px; height:43px; padding:0 15px; }
.wtd-feature-card .wtd-join-button::after,
.wtd-room-card .wtd-join-button::after { content:none; }
.wtd-join-button > i { font-size:13px; font-style:normal; transition:transform .18s ease; }
.wtd-join-button:hover > i { transform:translateX(3px); }

.wtd-host-avatar { position:relative; overflow:visible; }
.wtd-host-voice { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border:3px solid #151419; border-radius:50%; background:#61de9b; box-shadow:0 0 8px rgba(97,222,155,.65); }

.wtd-room-card { position:relative; overflow:hidden; }
.wtd-room-media { height:205px; }
.wtd-room-media::after { background:linear-gradient(0deg,rgba(10,10,13,.9),rgba(10,10,13,.08) 70%); }
.wtd-room-voice-live { position:absolute; z-index:3; top:12px; right:12px; min-height:24px; padding:0 8px; display:flex; align-items:center; gap:5px; border:1px solid rgba(98,223,156,.15); border-radius:999px; background:rgba(7,20,14,.74); color:#76e0a7; font-size:8px; font-weight:900; backdrop-filter:blur(8px); }
.wtd-room-voice-live i { width:5px; height:5px; border-radius:50%; background:#62df9c; box-shadow:0 0 7px rgba(98,223,156,.7); animation:wtdVoicePulse 1.45s ease-in-out infinite; }
.wtd-room-members { right:12px; bottom:12px; }

.wtd-room-body { padding:17px 17px 16px; }
.wtd-room-anime-label { align-items:flex-start; }
.wtd-room-anime-label span:first-child { max-width:75%; overflow:hidden; font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; }
.wtd-room-anime-label span:last-child { padding-top:1px; font-size:9px; }
.wtd-room-body h3 { margin:8px 0 0; font-size:21px; line-height:1.15; }
.wtd-room-card .wtd-host-row { margin-top:14px; }
.wtd-room-card .wtd-host-copy b { font-size:10.5px; }
.wtd-room-card .wtd-host-copy small { font-size:8.5px; }
.wtd-room-card .wtd-friend-chip { height:22px; font-size:7px; }
.wtd-room-playback { margin-top:12px; display:flex; align-items:center; gap:7px; color:#64d798; font-size:8.5px; }
.wtd-room-playback b { color:#83e4ad; font-weight:900; }
.wtd-room-card-footer { margin-top:14px; padding-top:13px; display:flex; align-items:center; justify-content:space-between; gap:9px; border-top:1px solid rgba(255,255,255,.07); }
.wtd-card-stats { min-width:0; display:flex; align-items:center; gap:5px; }
.wtd-card-stats > span { min-height:27px; padding:0 7px; gap:4px; }
.wtd-card-stats > span:nth-child(2) { color:#69d99d; }

.wtd-card-preview {
  position:absolute;
  z-index:5;
  right:12px;
  bottom:64px;
  left:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(12,12,16,.96);
  box-shadow:0 18px 38px rgba(0,0,0,.48);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px) scale(.985);
  transition:opacity .2s ease,transform .24s ease;
  backdrop-filter:blur(15px);
}
.wtd-preview-kicker { color:#ff7893; font-size:7px; font-weight:950; letter-spacing:.11em; }
.wtd-card-preview > b { display:block; margin-top:6px; overflow:hidden; color:#fff; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.wtd-card-preview > p { margin:5px 0 10px; color:#8f8a94; font-size:8.5px; line-height:1.4; }
.wtd-card-preview > div { display:flex; align-items:center; gap:12px; }
.wtd-card-preview > div + div { margin-top:7px; }
.wtd-card-preview > div span { display:flex; align-items:center; gap:5px; color:#b8b3bd; font-size:8px; font-weight:800; }

@media (hover:hover) and (pointer:fine) {
  .wtd-room-card:hover .wtd-card-preview,
  .wtd-room-card:focus-within .wtd-card-preview { opacity:1; transform:none; }
}

@keyframes wtdVoicePulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.55; transform:scale(.78); }
}

@media (max-width:1100px) {
  .wtd-feature-room { width:100%; }
  .wtd-feature-card,.wtd-feature-card .wtd-feature-media { min-height:440px; }
}

@media (max-width:820px) {
  .wtd-feature-card,.wtd-feature-card .wtd-feature-media { min-height:510px; }
  .wtd-feature-overlay { padding:22px; }
  .wtd-feature-content { width:100%; }
}

@media (max-width:640px) {
  .wtd-feature-card,.wtd-feature-card .wtd-feature-media { min-height:590px; }
  .wtd-feature-overlay { padding:17px; }
  .wtd-feature-social { align-items:flex-start; flex-direction:column; gap:12px; }
  .wtd-feature-footer { align-items:flex-end; }
  .wtd-room-quick-stats { gap:5px; }
  .wtd-room-quick-stats > span { padding:0 7px; }
  .wtd-room-quick-stats .is-playback { width:100%; }
  .wtd-feature-card .wtd-join-button { min-width:112px; }
  .wtd-room-media { height:190px; }
  .wtd-room-card-footer { align-items:flex-end; }
  .wtd-card-stats { flex-wrap:wrap; }
  .wtd-card-preview { display:none; }
}

/* Compact room layout inspired by the denser discovery reference. */
.wtd-room-section .wtd-section-head h2 {
  font-size:clamp(27px,2.6vw,35px);
}

.wtd-room-section .wtd-section-head p {
  font-size:11px;
}

.wtd-room-section .wtd-toolbar {
  margin-top:21px;
  padding:7px;
}

.wtd-feature-card.wtd-feature-compact {
  min-height:350px;
  height:350px;
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(300px,.72fr);
  border-radius:16px;
  background:#101014;
}

.wtd-feature-visual {
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#17171b;
}

.wtd-feature-visual > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.wtd-feature-visual::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(8,8,11,.9),rgba(8,8,11,.12) 66%),linear-gradient(90deg,transparent 70%,#101014 100%);
}

.wtd-feature-visual-top {
  position:absolute;
  z-index:2;
  top:16px;
  right:16px;
  left:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.wtd-feature-visual-copy {
  position:absolute;
  z-index:2;
  right:20px;
  bottom:20px;
  left:20px;
}

.wtd-feature-visual-copy > span { color:#ff819a; font-size:7.5px; font-weight:950; letter-spacing:.11em; }
.wtd-feature-visual-copy h3 { margin:5px 0 7px; overflow:hidden; color:#fff; font-size:clamp(25px,2.6vw,38px); font-weight:950; letter-spacing:-.045em; text-overflow:ellipsis; text-shadow:0 4px 20px rgba(0,0,0,.6); white-space:nowrap; }
.wtd-feature-visual-copy p { margin:0; display:flex; align-items:center; gap:6px; color:#bbb6bf; font-size:8px; font-weight:800; }
.wtd-feature-visual-copy p svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.wtd-feature-visual-copy p i { width:3px; height:3px; margin:0 2px; border-radius:50%; background:#79747e; }

.wtd-feature-side {
  min-width:0;
  padding:20px;
  display:flex;
  flex-direction:column;
}

.wtd-feature-side > h3 { margin:6px 0 5px; color:#fff; font-size:22px; font-weight:950; letter-spacing:-.035em; }
.wtd-feature-side-anime { display:flex; align-items:center; gap:7px; min-width:0; }
.wtd-feature-side-anime b { overflow:hidden; color:#d8d4db; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.wtd-feature-side-anime span { flex:0 0 auto; padding-left:7px; border-left:1px solid rgba(255,255,255,.1); color:#77727c; font-size:8px; }
.wtd-feature-side > p { margin:8px 0 0; display:-webkit-box; overflow:hidden; color:#88838d; font-size:9px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.wtd-feature-side .wtd-host-row { margin-top:11px; }
.wtd-feature-side .wtd-host-avatar { width:30px; height:30px; font-size:7px; }
.wtd-feature-side .wtd-host-copy b { font-size:9px; }
.wtd-feature-side .wtd-host-copy small { font-size:7.5px; }
.wtd-feature-side .wtd-friend-chip { height:21px; font-size:6.5px; }

.wtd-feature-voice-line { margin-top:10px; display:flex; align-items:center; gap:8px; }
.wtd-feature-voice-line > span:last-child { display:grid; gap:1px; }
.wtd-feature-voice-line b { color:#c9c5cc; font-size:8px; }
.wtd-feature-voice-line small { display:flex; align-items:center; gap:4px; color:#63d898; font-size:6.5px; }
.wtd-feature-voice-line small i { width:5px; height:5px; border-radius:50%; background:#62df9c; box-shadow:0 0 6px rgba(98,223,156,.65); }
.wtd-feature-voice-line .wtd-voice-stack > i { width:24px; height:24px; font-size:6px; }

.wtd-feature-facts { margin-top:auto; padding:10px 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.07); }
.wtd-feature-facts > span { display:grid; gap:2px; }
.wtd-feature-facts > span + span { padding-left:10px; border-left:1px solid rgba(255,255,255,.07); }
.wtd-feature-facts small { color:#6f6a74; font-size:6.5px; }
.wtd-feature-facts b { color:#d9d5dc; font-size:8.5px; font-weight:900; }
.wtd-feature-side .wtd-join-button { width:100%; height:36px; min-height:36px; margin:0; border-radius:8px; font-size:9px; }

.wtd-room-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.wtd-room-card.wtd-room-card-compact { border-radius:13px; }
.wtd-room-card.wtd-room-card-compact:hover { transform:translateY(-2px); }
.wtd-room-card-compact .wtd-room-media { height:138px; }
.wtd-room-card-compact .wtd-room-live { top:9px; left:9px; height:19px; padding:0 7px; font-size:6.5px; }
.wtd-room-card-compact .wtd-room-voice-live { top:9px; right:9px; min-height:20px; padding:0 6px; font-size:6.5px; }
.wtd-room-card-compact .wtd-room-members { right:9px; bottom:8px; height:21px; padding:0 7px; font-size:7px; }
.wtd-room-card-compact .wtd-room-body { padding:11px 11px 10px; }
.wtd-room-card-compact .wtd-room-anime-label span:first-child { max-width:72%; font-size:8px; }
.wtd-room-card-compact .wtd-room-anime-label span:last-child { font-size:6.8px; }
.wtd-room-card-compact .wtd-room-body h3 { margin-top:5px; font-size:15px; }
.wtd-room-card-compact .wtd-host-row { margin-top:8px; grid-template-columns:25px minmax(0,1fr) auto; gap:7px; }
.wtd-room-card-compact .wtd-host-avatar { width:25px; height:25px; font-size:6px; }
.wtd-room-card-compact .wtd-host-copy b { font-size:8px; }
.wtd-room-card-compact .wtd-host-copy small { font-size:6.5px; }
.wtd-room-card-compact .wtd-friend-chip { height:19px; padding:0 6px; font-size:6px; }

.wtd-room-compact-status { margin-top:9px; padding-top:8px; display:flex; align-items:center; gap:9px; overflow:hidden; border-top:1px solid rgba(255,255,255,.06); }
.wtd-room-compact-status > span { min-width:0; display:flex; align-items:center; gap:4px; color:#716c76; }
.wtd-room-compact-status svg { width:10px; height:10px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wtd-room-compact-status b { overflow:hidden; color:#a7a2ab; font-size:6.8px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.wtd-room-compact-status > span:nth-child(2) { color:#63d898; }
.wtd-room-card-compact > .wtd-room-body > .wtd-join-button { width:100%; height:32px; min-height:32px; margin-top:9px; border-radius:7px; font-size:8px; }
.wtd-room-card-compact .wtd-card-preview { bottom:49px; padding:11px; border-radius:10px; }

@media (max-width:1250px) {
  .wtd-room-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:900px) {
  .wtd-feature-card.wtd-feature-compact { grid-template-columns:minmax(0,1.3fr) minmax(275px,.8fr); }
  .wtd-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:700px) {
  .wtd-feature-card.wtd-feature-compact { height:auto; min-height:0; grid-template-columns:minmax(0,1fr); }
  .wtd-feature-visual { min-height:245px; }
  .wtd-feature-side { padding:16px; }
  .wtd-feature-side .wtd-join-button { margin-top:0; }
}

@media (max-width:640px) {
  .wtd-room-grid { grid-template-columns:minmax(0,1fr); }
  .wtd-room-card-compact .wtd-room-media { height:180px; }
  .wtd-room-card-compact .wtd-room-body { padding:13px; }
  .wtd-room-card-compact .wtd-room-body h3 { font-size:17px; }
  .wtd-room-card-compact .wtd-room-anime-label span:first-child { font-size:9px; }
  .wtd-room-card-compact .wtd-room-compact-status { gap:11px; }
  .wtd-room-card-compact .wtd-room-compact-status b { font-size:7.5px; }
}

/* Active Discord/KaiyoShop frame on public room hosts. */
.wtd-host-avatar,
.wtd-avatar-stack > i:not(.is-more) {
  position: relative;
  overflow: visible;
}

.wtd-host-avatar > img:not(.sakura-avatar-decoration),
.wtd-avatar-stack > i > img:not(.sakura-avatar-decoration) {
  position: relative;
  z-index: 2;
  border-radius: inherit;
}

.wtd-host-avatar > .watch-together-avatar-decoration,
.wtd-avatar-stack > i > .watch-together-avatar-decoration {
  width: 150% !important;
  height: 150% !important;
}