/* osbard.com — lobby-only shell (no q100–q400 studio desk) */

.oss-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  overflow: hidden;
  height: 100%;
}

body.oss-body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--oss-font-ui);
  background: var(--bg-primary, #160c2b);
  color: var(--text-fg, #f5f5f5);
}

/* L-hub — solid RP shade; no stage-bg.webp (avoids flash before Hub opens) */
body.oss-lobby-only,
body.oss-lobby-only.oss-body {
  --bg-primary: #3a236b;
  background: #3a236b;
}

html:has(body.oss-lobby-only) {
  background: #3a236b;
}

#viewport-container.oss-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

body.oss-lobby-only #viewport-container.oss-viewport {
  background: #3a236b;
}

/* Hub stays open — no dismiss to empty stage */
body.oss-lobby-only .oss-hpp-lobby__close {
  display: none;
}

body.oss-lobby-only .oss-hpp__scrim {
  pointer-events: none;
}

body.oss-lobby-only .oss-hpp-lobby {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Fullscreen shell — content grouped like the 1056×792 hub frame (hpp-lobby.mjs) */
body.oss-lobby-only {
  --l-hub-frame-w: 1056px;
  --l-hub-card-gap: 1rem;
  --l-hub-you-are-here-size: calc(var(--oss-type-hpp-h3-heading-size, 1.15rem) * 1.5);
}

body.oss-lobby-only .oss-hpp-lobby__scroll {
  align-items: center;
}

body.oss-lobby-only .oss-hpp-lobby__head,
body.oss-lobby-only .oss-hpp-lobby__body,
body.oss-lobby-only .oss-hpp-lobby__foot {
  width: min(100%, var(--l-hub-frame-w));
  max-width: var(--l-hub-frame-w);
  margin-inline: auto;
  box-sizing: border-box;
}

/* L-hub experiment — “You are here! 🍿” below marquee; click replays welcome celebration */
body.oss-lobby-only .oss-hpp-lobby__you-are-here {
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: 1.15;
  text-align: center;
}

body.oss-lobby-only .oss-hpp-lobby__you-are-here-btn {
  margin: 0;
  padding: 0.15rem 0.5rem 0.25rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: 'Caveat', cursive;
  font-size: var(--l-hub-you-are-here-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--oss-popup-title-text, rgba(235, 225, 255, 0.92));
  cursor: pointer;
  transform-origin: center center;
  transition:
    transform var(--hpp-hover-fade-ms) ease,
    text-shadow var(--hpp-hover-fade-ms) ease,
    color var(--hpp-hover-fade-ms) ease;
}

body.oss-lobby-only .oss-hpp-lobby__you-are-here-btn:hover,
body.oss-lobby-only .oss-hpp-lobby__you-are-here-btn:focus-visible {
  transform: scale(1.12);
  color: var(--oss-ui-white, #f5f5f5);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 22px rgba(169, 140, 255, 0.42);
}

body.oss-lobby-only .oss-hpp-lobby__you-are-here-btn:focus-visible {
  outline: 2px solid var(--oss-ui-primary, #8c67d9);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.oss-lobby-only .oss-hpp-lobby__you-are-here-btn:hover,
  body.oss-lobby-only .oss-hpp-lobby__you-are-here-btn:focus-visible {
    transform: none;
  }
}

body.oss-lobby-only .oss-hpp-lobby__row--grid .oss-hpp-lobby__row-track {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
  gap: var(--l-hub-card-gap);
}

body.oss-lobby-only .oss-hpp-lobby__row--grid .oss-hpp-hub-slot,
body.oss-lobby-only .oss-hpp-lobby__row--grid .oss-hpp-lobby__row-track > .oss-hpp-card--hub-tile {
  flex: 0 0 auto;
  width: var(--hpp-hub-card-w);
  max-width: var(--hpp-hub-card-w);
}

body.oss-lobby-only .oss-hpp-lobby__category[data-hpp-category='socials'] .oss-hpp-lobby__social {
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 720px) {
  body.oss-lobby-only .oss-hpp-lobby__row--grid .oss-hpp-lobby__row-track {
    width: 100%;
    max-width: 100%;
  }

  body.oss-lobby-only .oss-hpp-lobby__row--grid .oss-hpp-hub-slot,
  body.oss-lobby-only .oss-hpp-lobby__row--grid .oss-hpp-lobby__row-track > .oss-hpp-card--hub-tile {
    flex: 1 1 0;
    min-width: 0;
    width: min(var(--hpp-hub-card-w), calc((100% - 4 * var(--l-hub-card-gap)) / 5));
  }

  /* Mobile — Apps & Socials: colorful card + icon only (names in aria-label) */
  body.oss-lobby-only .oss-hpp-lobby__category[data-hpp-category='apps'] .oss-hpp-card__label,
  body.oss-lobby-only .oss-hpp-lobby__category[data-hpp-category='apps'] .oss-hpp-playbill__status,
  body.oss-lobby-only .oss-hpp-lobby__category[data-hpp-category='apps'] .oss-hpp-playbill__number,
  body.oss-lobby-only .oss-hpp-lobby__category[data-hpp-category='socials'] .oss-hpp-card__label {
    display: none;
  }

  body.oss-lobby-only .oss-hpp-lobby__category[data-hpp-category='apps'] .oss-hpp-hub-slot {
    gap: 0;
  }

  /* Footer — 3 rows: utilities · Privacy · copyright */
  body.oss-lobby-only .oss-hpp-lobby__foot-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
  }

  body.oss-lobby-only .oss-hpp-lobby__foot-center {
    order: 1;
    grid-column: auto;
    justify-self: center;
  }

  body.oss-lobby-only .oss-hpp-lobby__foot-legal {
    order: 2;
    grid-column: auto;
    justify-self: center;
    text-align: center;
  }

  body.oss-lobby-only .oss-hpp-lobby__foot-bar .oss-hpp-lobby__copyright {
    order: 3;
    grid-column: auto;
    justify-self: center;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 1024px) {
  body.oss-lobby-only .oss-hpp-lobby__head {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

body.oss-lobby-only .oss-hpp-card__playbill-icon--studio {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 4rem;
  line-height: 1;
  color: var(--oss-ui-white, #f5f5f5);
  pointer-events: none;
  transform-origin: center center;
  transition:
    transform var(--hpp-card-hover-ms) ease,
    filter var(--hpp-card-hover-ms) ease;
}

body.oss-lobby-only .oss-hpp-card__playbill-icon--soon {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 4rem;
  line-height: 1;
  color: var(--oss-ui-white, #f5f5f5);
  opacity: 0.42;
  pointer-events: none;
  transform-origin: center center;
  transition:
    opacity var(--hpp-card-hover-ms) ease,
    transform var(--hpp-card-hover-ms) ease;
}

body.oss-lobby-only .oss-hpp-hub-slot:hover .oss-hpp-card__playbill-icon--soon {
  opacity: 0.55;
  transform: scale(1.06);
}

body.oss-lobby-only .oss-hpp-hub-slot:hover .oss-hpp-card__playbill-icon--studio {
  transform: scale(1.12);
  filter:
    drop-shadow(0 0 10px rgba(245, 245, 245, 0.85))
    drop-shadow(0 0 20px rgba(169, 140, 255, 0.65));
}

@media (prefers-reduced-motion: reduce) {
  body.oss-lobby-only .oss-hpp-hub-slot:hover .oss-hpp-card__playbill-icon--studio,
  body.oss-lobby-only .oss-hpp-hub-slot:hover .oss-hpp-card__playbill-icon--soon {
    transform: none;
  }
}

/* L-hub only — Studio app card wobble 1s, starts 1s after Lobby HUB opens */
@keyframes oss-l-hub-studio-card-wobble {
  0%,
  100% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(-4deg);
  }
  10% {
    transform: rotate(4deg);
  }
  15% {
    transform: rotate(-3.5deg);
  }
  20% {
    transform: rotate(3.5deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(3deg);
  }
  35% {
    transform: rotate(-2.5deg);
  }
  40% {
    transform: rotate(2.5deg);
  }
  45% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  55% {
    transform: rotate(-1.5deg);
  }
  60% {
    transform: rotate(1.5deg);
  }
  65% {
    transform: rotate(-1deg);
  }
  70% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-0.75deg);
  }
  80% {
    transform: rotate(0.75deg);
  }
  85% {
    transform: rotate(-0.4deg);
  }
  90% {
    transform: rotate(0.4deg);
  }
  95% {
    transform: rotate(-0.2deg);
  }
}

body.oss-lobby-only .oss-hpp-hub-slot.oss-hpp-hub-slot--studio-wobble {
  animation: oss-l-hub-studio-card-wobble 3s ease-in-out;
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  body.oss-lobby-only .oss-hpp-hub-slot.oss-hpp-hub-slot--studio-wobble {
    animation: none;
  }
}