/* SPACEQUIZ.fun — orbital quiz studio. Static star fields and compositor-only motion. */
:root { --space-ink: #050c19; --space-cyan: #6ee7fb; --space-gold: #fdd21c; }
#title:not(.bingo), #intro { background: var(--space-ink); }
#title:not(.bingo)::before, #intro .ibg {
  background: radial-gradient(ellipse at 83% 38%, #183c5859, transparent 42%),
    radial-gradient(ellipse at 32% 93%, #0c263766, transparent 54%), linear-gradient(125deg, #050914, #081424 68%, #06101c);
}
#title:not(.bingo)::after, #intro::after { background: linear-gradient(90deg, #050c1900 56%, #70e7fb08 56.1%, transparent 56.2%); }
#title .space-stars, #intro .space-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .78;
  background: radial-gradient(circle at 9% 13%, #b2e3ee 0 1px, transparent 1.7px),
    radial-gradient(circle at 31% 8%, #fff 0 .8px, transparent 1.6px),
    radial-gradient(circle at 55% 29%, #a3e5ef 0 1px, transparent 1.8px),
    radial-gradient(circle at 73% 9%, #f8f5dc 0 1px, transparent 1.6px),
    radial-gradient(circle at 94% 18%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 42% 59%, #bdd5dd 0 .8px, transparent 1.6px),
    radial-gradient(circle at 6% 76%, #a5d0de 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 77%, #fff 0 .8px, transparent 1.7px),
    radial-gradient(circle at 62% 56%, #c3dce4 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 49%, #c3dce4 0 .8px, transparent 1.6px);
  background-size: 593px 421px, 683px 547px, 773px 593px, 1280px 720px, 1280px 720px,
    877px 713px, 1280px 720px, 1280px 720px, 991px 613px, 1280px 720px;
}
#title .planet-limb, #intro .planet-limb { position: absolute; z-index: -1; pointer-events: none;
  width: 1100px; height: 400px; top: 632px; left: 375px; border-radius: 50%; transform: rotate(-13deg);
  background: linear-gradient(#12354c, #07111e 16%, #050c19 42%); border-top: 2px solid #79d2eb6b;
  box-shadow: 0 -14px 75px #35b7d71c, 0 -2px 16px #71daf938;
}
.broadcast { color: #a7bfcb; letter-spacing: 2.1px; font-size: 12px; }
.broadcast-line { background: #4b788b; }
.live-dot { background: var(--space-cyan); box-shadow: 0 0 13px #6ee7fb70; }
.mission-kicker { display: block; color: #87cedd; font-size: 13px; font-weight: 700; letter-spacing: 4px; line-height: 1.2; }
#title:not(.bingo) .logo.aclogo.spacequiz-logo { top: 107px; left: 58px; width: 650px; }
#title .spacequiz-logo .mission-kicker { margin-left: 6px; }
.brand-art { position: relative; width: 620px; height: 194px; margin-top: 8px; }
#title .logo.aclogo .brand-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  object-position: left center; margin: 0; animation: none; filter: none; }
.wordmark-fallback { display: flex; align-items: baseline; height: 100%; padding-top: 54px; gap: 0; font-size: 77px;
  font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -3px; color: #f3f8fb; transform: skewX(-3deg); }
.wordmark-fallback strong { font-weight: 900; color: var(--space-gold); }
.wordmark-fallback small { font-size: 33px; color: var(--space-cyan); letter-spacing: -1px; margin-left: 4px; }
.brand-art.asset-ready .wordmark-fallback { visibility: hidden; }
#title .home-copy { top: 334px; font-size: 25px; line-height: 1.38; color: #e5eef2; }
#title .home-copy > span { font-size: 18px; color: #90aaba; }
#title .home-copy b { font-weight: 700; color: #b6cbd6; }
#title .game-route { top: 426px; gap: 26px; }
.route-n { color: #4c788e; }
#title:not(.bingo) .playrow { top: 506px; }
#title #bPlay { border-radius: 6px; background: var(--space-gold); border-color: #fff0a4; box-shadow: 0 7px 30px #fdd21c12; }
#title:not(.bingo) .subrow { top: 613px; }
#title:not(.bingo) #setSummary { top: 669px; }
#title:not(.bingo) #rec { color: #86a2b4; }
#title:not(.bingo) #tHost, #intro #iHost { right: 0; bottom: 88px; }
.orbit.o1 { border-color: #71d3ef39; }
.orbit.o2 { border-color: #71d3ef23; }
.orbit.o3 { border-color: #fdd21c35; }
.orbit.o1::after { content: '+'; position: absolute; top: 47%; right: -7px; color: #81c6d8; font-size: 20px; font-weight: 400; line-height: 1; }
.podium { background: radial-gradient(ellipse, #38bfda1c, #0b1725 62%, #51cfe845 64%, #081320 67%); }
.host-label { color: #bdced8; font-size: 12px; }
.host-label span { color: #688a9f; }

/* Bingo setup retains its compact centered layout and the same game identity. */
#title.bingo { background: radial-gradient(ellipse at 70% 20%, #153b5059, transparent 60%), #070e1b; padding-top: 24px; }
#title.bingo .logo.aclogo.spacequiz-logo { margin: 0 auto 14px; }
#title.bingo .spacequiz-logo .mission-kicker { font-size: 11px; }
#title.bingo .brand-art { width: 470px; height: 123px; margin-top: 0; }
#title.bingo .wordmark-fallback { font-size: 61px; padding-top: 29px; }
#title.bingo .wordmark-fallback small { font-size: 27px; }

/* A readable live wordmark keeps the in-game bar crisp at small sizes. */
.spacequiz-small { gap: 11px; font-size: 25px; letter-spacing: -.75px; white-space: nowrap; }
.spacequiz-small > div > span { color: var(--space-gold); -webkit-text-fill-color: var(--space-gold); }
.spacequiz-small em { color: var(--space-cyan); -webkit-text-fill-color: var(--space-cyan); font-size: 17px; font-style: normal; letter-spacing: -.2px; }
.spacequiz-small b { color: #9bb6c3; -webkit-text-fill-color: #9bb6c3; letter-spacing: 1.8px; font-size: 8px; }
.sq-orbit { position: relative; display: grid; place-items: center; width: 36px; height: 36px; font-size: 30px;
  color: var(--space-gold); -webkit-text-fill-color: var(--space-gold); font-style: italic; }
.sq-orbit::before { content: ''; position: absolute; width: 43px; height: 18px; border: 1px solid var(--space-cyan);
  border-radius: 50%; transform: rotate(-36deg); }
.sq-orbit::after { content: ''; position: absolute; top: 4px; right: -1px; width: 4px; height: 4px; border-radius: 50%; background: white; }

/* 7.7 second ident: title letters → complete logo → first question. */
#intro .ibg { animation: space-scene-in 1.5s ease-out both; }
#intro .space-stars { animation: space-stars-in 5.5s ease-out both; }
#intro .planet-limb { animation: space-planet-in 4s cubic-bezier(.2,.7,.2,1) both; }
#intro .ilogo { top: 138px; left: 62px; width: 700px; height: 334px; }
#intro .imoon { left: 5px; top: -48px; }
#intro .imoon .mission-kicker { animation: studio-reveal .55s .3s both; }
#intro .ititle { position: absolute; top: 0; left: 0; line-height: .89; }
#intro .ititle .w1, #intro .ititle .w2 { font-size: 147px; letter-spacing: -5px; font-style: italic; }
#intro .ititle .w1 { color: #f0f6fa; }
#intro .ititle .w2 { color: var(--space-gold); }
#intro .ititle .w2 > span { display: inline-block; margin-left: 10px; font-size: 70px; letter-spacing: -2px; color: var(--space-cyan); }
#intro .ititle i { animation: space-letter .55s cubic-bezier(.2,.8,.2,1) both; }
#intro .intro-brand-art { position: absolute; top: 0; left: 0; width: 680px; height: 282px; object-fit: contain;
  object-position: left center; opacity: 0; pointer-events: none; }
#intro .ilogo.asset-ready .intro-brand-art { animation: space-brand-in .7s 3.22s cubic-bezier(.15,.7,.2,1) both; }
#intro .ilogo.asset-ready .ititle { animation: space-type-out .3s 3.12s both; }
#intro .w3 { position: absolute; top: 288px; left: 5px; margin: 0; border: 0; border-left: 3px solid var(--space-gold);
  padding: 6px 0 6px 16px; font-size: 18px; letter-spacing: 4px; color: #b8d4df; animation-delay: 2.65s; }
#intro .ibreak { top: 513px; left: 67px; }
#intro .ibreak b { font-size: 14px; letter-spacing: 1px; }
#intro .ibreak span { font-size: 14px; padding: 0 13px; background: #153041; }
#intro .intro-cue { top: 599px; width: 584px; font-size: 10px; color: #8eb5c7; }
.launch-signal { float: right; color: var(--space-cyan); font-size: 8px; letter-spacing: 7px; animation: space-signal 1.2s 4s 3; }
#intro .intro-cue i { background: linear-gradient(90deg, #2d889e, var(--space-cyan), var(--space-gold)); }
#intro .istripes i:nth-child(2) { background: var(--space-cyan); }
#intro .iticker { border-color: #2c4d60; background: #07101b; }
#intro .iticker span { color: #7fabbc; }
#intro .iskip { background: #0a1b29; border-color: #304f60; }
#intro .iflash { background: var(--space-ink); }
@keyframes space-scene-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes space-stars-in { from { opacity: 0; transform: scale(1.18); } to { opacity: .78; transform: scale(1); } }
@keyframes space-planet-in { from { opacity: 0; transform: translate3d(0,65px,0) rotate(-13deg); } to { opacity: 1; transform: translate3d(0,0,0) rotate(-13deg); } }
@keyframes space-letter { from { opacity: 0; transform: translate3d(-14px,32px,0) rotate(-7deg); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes space-brand-in { from { opacity: 0; transform: translate3d(0,9px,0) scale(.93); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes space-type-out { to { opacity: 0; transform: translate3d(0,-12px,0) scale(1.02); } }
@keyframes space-signal { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  #intro .space-stars, #intro .planet-limb, #intro .intro-brand-art, #intro .ititle { animation: none; }
  #intro .ilogo.asset-ready .intro-brand-art { opacity: 1; }
  #intro .ilogo.asset-ready .ititle { opacity: 0; }
  .launch-signal { animation: none; }
}