/* Athens Calling — broadcast stage. Local assets; motion uses transform/opacity. */
#title:not(.bingo), #intro { background: #080e17; isolation: isolate; }
#title:not(.bingo)::before, #intro .ibg { content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, #080e17 2%, rgba(8,14,23,.94) 37%, rgba(8,14,23,.42) 76%, rgba(8,14,23,.65)),
    linear-gradient(0deg, #080e17 3%, transparent 58%), url(../assets/ac/acropolis.jpg) center 42% / cover; }
#title:not(.bingo)::after, #intro::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 79% 43%, rgba(38,172,209,.14), transparent 41%),
    repeating-linear-gradient(90deg, transparent 0 159px, rgba(155,193,222,.035) 159px 160px); }
#title:not(.bingo) { display: none; padding: 0; align-items: flex-start; }
#title:not(.bingo).on { display: block; }
#title .home-only, #title:not(.bingo) > .logo, #title:not(.bingo) > .row,
#title:not(.bingo) > #setSummary, #title:not(.bingo) > #rec { position: absolute; }
.broadcast { position: absolute; top: 34px; left: 62px; right: 62px; display: flex; align-items: center; gap: 12px;
  color: #c8d2db; font-size: 13px; font-weight: 700; letter-spacing: 2.8px; white-space: nowrap; }
.broadcast-line { width: 56px; height: 1px; background: #42505e; margin: 0 2px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fdd21c; box-shadow: 0 0 14px #fdd21c70; }
#title:not(.bingo) .logo.aclogo { top: 125px; left: 62px; margin: 0; align-items: flex-start; text-align: left; animation: studio-reveal .7s ease-out both; }
#title:not(.bingo) .aclogo img { position: absolute; left: 0; top: -19px; height: 70px; animation: none; filter: none; }
#title:not(.bingo) .aclogo .l2 { margin: 0 0 35px 61px; font-size: 39px; letter-spacing: -1.2px; text-shadow: none; }
#title:not(.bingo) .aclogo .l3 { background: none; padding: 0; margin: 0; font-size: 112px; line-height: .93; letter-spacing: -3px;
  color: #fdd21c; font-weight: 900; }
#title .home-copy { top: 310px; left: 65px; font-size: 25px; line-height: 1.35; color: #c0ccd7; animation: studio-reveal .7s .12s ease-out both; }
#title .game-route { top: 411px; left: 64px; display: flex; gap: 26px; align-items: center; animation: studio-reveal .7s .2s ease-out both; }
.game-route > div { display: flex; align-items: center; gap: 12px; }
.route-n { color: #6a8194; font-size: 38px; font-weight: 400; line-height: 1; }
.game-route b { font-size: 16px; letter-spacing: 1px; color: #f1f5f7; }
.game-route small { display: block; font-size: 16px; color: #9cabb9; margin-top: 3px; }
.route-arrow { font-size: 26px; color: #fdd21c; }
#title:not(.bingo) .playrow { left: 62px; top: 499px; margin: 0 !important; animation: studio-reveal .7s .28s ease-out both; }
#title #bPlay { width: 560px; padding: 16px 24px; align-items: stretch; gap: 1px; text-align: left;
  border: 1px solid #ffe780; border-radius: 7px; background: #fdd21c; box-shadow: 0 6px 28px #fdd21c18;
  transition: transform .18s, background .18s; }
#bPlay > span { display: flex; align-items: center; justify-content: space-between; font-size: 27px; letter-spacing: 1px; }
#bPlay > span b { font-size: 35px; line-height: 1; }
#title #bPlay small { font-size: 15px; letter-spacing: .2px; }
#title #bPlay:hover { transform: translateY(-3px); background: #ffe365; }
#title #bPlay:active { transform: translateY(0); }
#title:not(.bingo) .subrow { left: 62px; top: 607px; gap: 10px; margin: 0 !important; }
#title:not(.bingo) .subrow .btn { padding: 10px 16px; font-size: 13px; letter-spacing: .4px; background: #111e2a;
  border: 1px solid #2a3a49; border-radius: 5px; color: #c9d5df; box-shadow: none; transition: border-color .2s; }
#title:not(.bingo) .subrow .btn:hover { border-color: #fdd21c; color: #fff; }
#title:not(.bingo) #setSummary { top: 665px; left: 64px; margin: 0; font-size: 12px; color: #8093a3; letter-spacing: .15px; }
#title:not(.bingo) #rec { right: 62px; bottom: 22px; font-size: 12px; color: #9daebb; }
#title.bingo .home-only { display: none; }
#title.bingo .logo.aclogo img { height: 100px; }
#title.bingo .logo.aclogo .l2 { font-size: 58px; }
#title .orbital-set, #intro .orbital-set { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orbit { position: absolute; border: 1px solid rgba(106,189,216,.22); border-radius: 50%; }
.orbit.o1 { width: 414px; height: 414px; top: 133px; right: 49px; }
.orbit.o2 { width: 478px; height: 478px; top: 101px; right: 17px; border-style: dashed; border-color: #70a8be18; animation: orbital-turn 90s linear infinite; }
.orbit.o3 { width: 342px; height: 342px; top: 169px; right: 85px; border-color: #fdd21c25; }
.orbit.o1::before, .orbit.o3::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 18%; left: 11%;
  background: #fdd21c; box-shadow: 0 0 18px #fdd21c80; }
.orbit.o3::after { left: auto; right: 10%; top: 79%; width: 5px; height: 5px; background: #58d3ec; }
.podium { position: absolute; right: 39px; bottom: 104px; width: 433px; height: 76px; border-radius: 50%;
  border: 1px solid #6cd3ec65; background: radial-gradient(ellipse, #38bfda25, #0b1424 62%, #51cfe845 64%, #0b1424 67%);
  box-shadow: 0 18px 0 -8px #050a11, 0 19px 0 -7px #284759, 0 24px 55px #28a9cd18; }
.podium::after { content: ''; position: absolute; inset: 12px 42px; border: 1px solid #7ed9ee25; border-radius: 50%; }
.host-label { position: absolute; width: 430px; right: 42px; bottom: 46px; text-align: center; color: #d8e2eb; font-size: 13px; font-weight: 700; letter-spacing: 3px; }
.host-label span { display: block; margin-top: 5px; font-size: 10px; letter-spacing: 2px; color: #6e8b9f; }
#title:not(.bingo) #tHost, #intro #iHost { left: auto; right: 8px; bottom: 89px; width: 500px; height: 574px; z-index: 1; }
.hostbox canvas.hostcv { filter: none; }
button:focus-visible { outline: 3px solid #72e6ff; outline-offset: 5px; }

/* Intro: staggered typography, orbital landing and a single broadcast wipe. */
#intro .ibg { animation: studio-pan 8.2s ease-out both; }
#intro .broadcast { right: auto; z-index: 2; }
#intro .istripes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#intro .istripes i { width: 110px; animation-duration: .9s; }
#intro .istripes i:nth-child(2) { width: 52px; }
#intro .istripes i:nth-child(3) { width: 18px; }
#intro .ilogo { left: 66px; right: auto; top: 158px; width: 700px; text-align: left; animation: none; }
#intro .imoon { position: absolute; left: 5px; top: -78px; }
#intro .imoon img { height: 67px; animation: studio-reveal .6s .2s ease-out both; filter: none; }
#intro .ititle { margin: 0; line-height: .92; }
#intro .ititle .w1, #intro .ititle .w2 { display: block; font-size: 122px; letter-spacing: -4px; text-shadow: none; }
#intro .ititle .w1 { color: #f3f5f8; }
#intro .ititle .w2 { color: #fdd21c; }
#intro .ititle .w2 span { color: #f3f5f8; }
#intro .ititle i { animation-name: studio-letter; animation-duration: .55s; }
#intro .w3 { font-size: 20px; letter-spacing: 8px; padding: 9px 16px 9px 24px; margin-top: 28px; box-shadow: none;
  background: transparent; border: 1px solid #748797; color: #e0e8ef; animation: studio-reveal .5s 2.61s ease-out both; }
#intro .ibreak { left: 67px; top: 510px; height: 42px; box-shadow: none; animation-name: studio-reveal; }
#intro .ibreak b { background: #fdd21c; color: #09101b; font-size: 16px; }
#intro .ibreak span { background: #172433; color: #c7d4e0; font-size: 15px; padding: 0 15px; }
#intro #iHost { animation: none; }
#intro .orbital-set { animation: studio-reveal 1.3s .4s ease-out both; }
.intro-cue { position: absolute; left: 68px; top: 598px; width: 584px; color: #869eaf; font-size: 11px; letter-spacing: 3px; }
.intro-cue > div { height: 2px; margin-top: 15px; overflow: hidden; background: #293745; }
.intro-cue i { display: block; height: 100%; background: #fdd21c; transform-origin: left; animation: broadcast-progress 7.7s linear both; }
#intro .iticker { height: 47px; border-top: 1px solid #354451; background: #0b131e; animation: studio-reveal .5s 3s both; }
#intro .iticker span { font-size: 16px; letter-spacing: 3px; color: #9aafc0; line-height: 46px; padding-right: 14px; }
#intro .iskip { top: 25px; right: 31px; padding: 10px 15px; font-size: 12px; border: 1px solid #4c5c6a; background: #0d1825; color: #e0e8ee; border-radius: 4px; }
#intro .iskip span { padding-left: 16px; color: #91a5b5; font-size: 10px; }
#intro .iflash { background: #080e17; }
#intro.out .iflash { animation: studio-close .4s ease-in both; }
@keyframes studio-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes studio-letter { from { opacity: 0; transform: translateY(36px) rotate(5deg); } to { opacity: 1; transform: translateY(0); } }
@keyframes studio-pan { from { opacity: .5; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes studio-close { to { opacity: 1; } }
@keyframes broadcast-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes orbital-turn { to { transform: rotate(360deg); } }
/* The question desk shares the entrance palette, with quiet scenery for reading. */
body.quizmode:not(.super) #studio { background: radial-gradient(ellipse at 16% 62%, #2488a62b, transparent 38%),
  linear-gradient(90deg, #080e1766, #080e17df 43%), linear-gradient(0deg, #080e17, #080e1777),
  url(../assets/ac/acropolis.jpg) center 38% / cover; }
body.quizmode #studio::before { content: ''; position: absolute; left: 27px; bottom: 114px; width: 355px; height: 355px;
  border-radius: 50%; border: 1px solid #79c6da24; box-shadow: 0 0 0 26px #69bfdf05; }
body.quizmode #studio .floor { display: block; left: 32px; right: auto; bottom: 57px; width: 354px; height: 65px;
  border-radius: 50%; transform: none; border: 1px solid #78cee84a; opacity: 1;
  background: radial-gradient(ellipse, #4aaccb18, #0a1420 63%, #579eb23b 65%, #0a1420 68%); }
body.quizmode #audience { display: none; }
body.quizmode:not(.super) #top, body.quizmode:not(.super) #host { background: #0a1420f5; border-color: #fdd21c; }
body.quizmode .qcard { border-radius: 12px; }
body.quizmode:not(.super) .qcard { background: #0e1a27f5; border-color: #2b4051; border-top-color: #fdd21c; box-shadow: 0 18px 48px #0006; }
body.quizmode .qcard .kind { border-radius: 4px; }
body.quizmode .qcard .ans { border-radius: 8px; }
body.quizmode:not(.super) .qcard .ans:not(.ok):not(.no):not(.pick) { background: #172635; border-color: #304659; }
body.quizmode:not(.super) .qcard .ans:hover:not(:disabled) { border-color: #fdd21c; }
body.quizmode .timer { height: 6px; border-radius: 4px; }
body.quizmode #qDots i { height: 7px; width: 20px; border-width: 1px; border-radius: 4px; }
body.quizmode:not(.super) #qMoney { text-shadow: none; }
/* Hidden bingo scenery has no animation/paint work while a full screen is open. */
#stage:has(#title.on, #intro.on) > #studio, #stage:has(#title.on, #intro.on) > #boardWrap,
#stage:has(#title.on, #intro.on) > #side, #stage:has(#title.on, #intro.on) > #host,
#stage:has(#title.on, #intro.on) > #top { visibility: hidden; }
#stage:has(#title.on, #intro.on) > #studio *, #stage:has(#title.on, #intro.on) > #boardWrap *,
body.quizmode #boardWrap * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  #stage *, #stage *::before, #stage *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #intro .ibg, #intro .ilogo, #intro .ititle i { transform: none; }
  #intro .istripes { display: none; }
}