* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: #ffffff; background: #100629; font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif; }
.show-shell { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #24105e; }
.ambient-backdrop { position: absolute; z-index: 0; left: -2%; right: -2%; top: -4%; bottom: -4%; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: .68; transform: scale(1.04); animation: ambientDrift 18s ease-in-out infinite alternate; }
.show-shell:before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(115deg, rgba(23,8,62,.8) 0%, rgba(54,16,115,.62) 40%, rgba(18,10,61,.76) 100%); }
.show-shell:after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 48%; opacity: .52; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(109,45,216,.08) 45%, transparent); }
.spark { position: absolute; z-index: 3; width: .45em; height: .45em; border-radius: 50%; background: #ffffff; box-shadow: 0 0 1.4em .28em rgba(112,245,255,.8); animation: sparkle 3s ease-in-out infinite; }
.spark-one { left: 2.5%; top: 29%; }.spark-two { right: 28%; top: 5%; animation-delay: .9s; }.spark-three { right: 2.2%; bottom: 6%; animation-delay: 1.8s; }
.show-header { position: absolute; z-index: 5; left: 1.6%; right: 1.6%; top: 1.6%; height: 24.5%; overflow: hidden; border: 0; border-radius: 1.35em; background: linear-gradient(110deg, rgba(29,15,75,.5), rgba(90,35,175,.2)); box-shadow: 0 .9em 2.8em rgba(5,0,28,.35); }
.show-header:after { content: ""; position: absolute; left: 17%; right: 11em; top: 0; bottom: 0; pointer-events: none; background: linear-gradient(90deg, rgba(25,10,66,.88), rgba(50,19,114,.55) 62%, transparent); }
.topic-art { position: absolute; left: 0; top: 0; width: 27%; height: 100%; overflow: hidden; }
.topic-art:after { content: ""; position: absolute; right: 0; top: 0; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(29,13,77,.92)); }
.topic-art img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.03); animation: artReveal 9s ease-in-out infinite alternate; }
.show-title-wrap { position: absolute; z-index: 2; left: 18.5%; right: 10.5em; top: 18%; bottom: 13%; min-width: 0; overflow: hidden; }
.eyebrow { margin: 0 0 .28em; color: #6ff7ff; font-size: .64em; line-height: 1; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
h1 { margin: 0; max-width: 100%; overflow: hidden; color: #fff; font-size: 2.45em; line-height: .95; font-weight: 850; letter-spacing: -.045em; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 .1em .55em rgba(8,0,35,.6); }
.hero-copy { margin: .38em 0 0; max-width: 100%; overflow: hidden; color: rgba(255,255,255,.76); font-size: .72em; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.join-panel { position: absolute; z-index: 6; right: calc(1.6% + 10px); top: calc(1.6% + 10px); width: 166px; height: 232px; overflow: visible; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: right top; transform-origin: right top; }
.game-layout { position: absolute; z-index: 4; left: 1.6%; right: 1.6%; top: 27.8%; bottom: 1.6%; }
.stage-card { position: absolute; top: 0; bottom: 0; overflow: hidden; border: 0; border-radius: 1.35em; background: linear-gradient(145deg, rgba(20,12,58,.68), rgba(20,13,62,.45)); box-shadow: 0 1em 3em rgba(4,0,24,.33); }
.question-panel { left: 0; width: 72.9%; padding: 1.05em 1.2em; }
.scoreboard { right: 0; width: 25.7%; padding: 1em .92em; background: linear-gradient(160deg, rgba(15,26,76,.68), rgba(25,15,68,.48)); }
.round-bar { position: relative; height: 3.25em; padding-right: 5.5em; }
.phase-badge { display: inline-block; padding: .48em .86em; border: 0; border-radius: 99em; color: #1f0c54; background: linear-gradient(120deg, #fff582, #ffd65a); box-shadow: 0 .28em .9em rgba(255,212,78,.2); font-size: .68em; line-height: 1; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.question-progress { display: block; margin-top: .5em; color: #6ff7ff; font-size: .69em; line-height: 1; font-weight: 750; letter-spacing: .04em; }
.answer-summary { position: absolute; left: 12em; right: 0; bottom: .15em; overflow: hidden; color: rgba(255,255,255,.58); font-size: .64em; line-height: 1.1; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
.timer-value { position: absolute; right: 0; top: -.23em; width: 2em; color: #fff; font-size: 2.8em; line-height: 1; font-weight: 850; text-align: right; text-shadow: 0 0 .7em rgba(255,77,159,.7); }
.timer-track { position: relative; height: .48em; overflow: hidden; border-radius: 99em; background: rgba(255,255,255,.1); box-shadow: inset 0 .12em .3em rgba(0,0,0,.28); }
.timer-fill { width: 100%; height: 100%; border-radius: 99em; background: linear-gradient(90deg, #3ec5ff, #6ff7ff); box-shadow: 0 0 1em rgba(80,230,255,.72); transition: width 240ms linear, background-color 180ms linear; }
.timer-warning { background: linear-gradient(90deg, #ffb33f, #fff582); box-shadow: 0 0 1em rgba(255,213,80,.65); }.timer-danger { background: linear-gradient(90deg, #ff3f7f, #ff765d); box-shadow: 0 0 1.2em rgba(255,63,127,.8); animation: timerPulse .45s ease-in-out infinite alternate; }
.question-title { height: 3em; margin: .42em 0 .26em; overflow: hidden; color: #fff; font-size: 2.35em; line-height: 1.02; font-weight: 800; letter-spacing: -.035em; display: flex; align-items: center; text-shadow: 0 .11em .6em rgba(4,0,25,.55); }
.option-list { position: absolute; left: 1.2em; right: 1.2em; bottom: 1.1em; height: 44%; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-content: stretch; justify-content: space-between; }
.option-item { position: relative; width: 49.25%; height: 46.5%; margin-bottom: 1.35%; padding: .72em 4.6em .72em 4.1em; overflow: hidden; border: 0; border-radius: 1.15em; color: #fff; background: linear-gradient(135deg, rgba(45,106,225,.96), rgba(65,83,211,.92)); box-shadow: 0 .55em 1.3em rgba(6,0,38,.24); cursor: pointer; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, box-shadow 220ms ease, background-color 220ms ease; }
.option-item:before { content: ""; position: absolute; left: -55%; top: -20%; width: 35%; height: 140%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); }
.option-item:nth-child(2) { background: linear-gradient(135deg, rgba(226,54,142,.97), rgba(173,45,177,.94)); }.option-item:nth-child(3) { background: linear-gradient(135deg, rgba(255,153,35,.97), rgba(234,92,66,.94)); }.option-item:nth-child(4) { background: linear-gradient(135deg, rgba(27,187,145,.97), rgba(20,128,155,.94)); }
.option-item.playable:hover { transform: translateY(-.15em); box-shadow: 0 .75em 1.5em rgba(6,0,38,.3); }.option-item.playable:hover:before { opacity: 1; animation: sheen .8s ease; }.option-item.playable:active { transform: translateY(.14em) scale(.99); }
.option-index { position: absolute; left: .72em; top: 50%; width: 2.35em; height: 2.35em; margin-top: -1.17em; border: 0; border-radius: 50%; color: #251056; background: rgba(255,255,255,.94); font-size: .9em; line-height: 2.2em; font-weight: 850; text-align: center; box-shadow: 0 .2em .55em rgba(16,0,50,.22); }
.option-label { height: 100%; overflow: hidden; font-size: 1.45em; line-height: 1.04; font-weight: 750; display: flex; align-items: center; }
.option-state { position: absolute; right: .8em; top: 50%; width: 4.4em; margin-top: -.55em; overflow: hidden; color: rgba(255,255,255,.78); font-size: .62em; line-height: 1.1; font-weight: 850; text-align: right; text-transform: uppercase; }
.option-state.correct-text { width: 1.5em; color: #10392c; font-size: 1.1em; line-height: 1; text-align: center; text-shadow: 0 .08em .2em rgba(255,255,255,.45); }
.option-item.selected { transform: scale(1.02); box-shadow: 0 0 0 .14em rgba(255,245,130,.2), 0 .8em 1.7em rgba(5,0,30,.32); }.option-item.correct { z-index: 2; color: #10392c; background: linear-gradient(135deg, #86ffc0, #40dbae); box-shadow: 0 0 0 .18em rgba(255,255,255,.3), 0 0 2.2em rgba(91,255,183,.55); animation: correctPop .7s cubic-bezier(.2,.9,.25,1) both; }.option-item.incorrect { background: linear-gradient(135deg, #f04a70, #c83570); }.option-item.dimmed { animation: none; opacity: .16; transform: scale(.965); }
.scoreboard-header { position: relative; height: 4.1em; }
.scoreboard-header h3 { margin: 0; overflow: hidden; font-size: 1.4em; line-height: 1; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; text-overflow: ellipsis; }.score-kicker { margin: 0 0 .32em; color: #ff71b5; font-size: .58em; line-height: 1; font-weight: 850; letter-spacing: .2em; }
#participantCount { position: absolute; right: 0; top: .65em; padding: .48em .66em; border: 0; border-radius: 99em; color: #201052; background: linear-gradient(120deg, #6ff7ff, #62d7ff); font-size: .55em; line-height: 1; font-weight: 850; }
.participant-list { position: absolute; left: 1em; right: 1em; top: 5.55em; bottom: 1em; margin: 0; padding: 0; list-style: none; }
.participant-item { position: relative; height: 11.6%; min-height: 2.05em; margin-bottom: .72%; padding: .4em 5.4em .34em .42em; overflow: hidden; border: 0; border-radius: .9em; background: linear-gradient(100deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); box-shadow: 0 .24em .8em rgba(5,0,28,.16); animation: scoreSlide .55s cubic-bezier(.2,.9,.3,1) both; }
.participant-item:nth-child(1) { background: linear-gradient(100deg, rgba(255,220,88,.22), rgba(175,83,230,.13)); }.participant-main { min-width: 0; height: 100%; display: flex; align-items: center; }.participant-main .leaderboard-rank { margin-right: .5em; }.participant-main > div { min-width: 0; overflow: hidden; }
.participant-main strong { display: block; overflow: hidden; font-size: 1.02em; line-height: 1.08; font-weight: 760; white-space: nowrap; text-overflow: ellipsis; }
.leaderboard-rank { display: inline-block; flex: 0 0 auto; width: 1.72em; height: 1.72em; border: 0; border-radius: 50%; color: #29115d; background: linear-gradient(145deg, #fff582, #ffca50); font-size: .76em; line-height: 1.72em; font-weight: 850; text-align: center; box-shadow: 0 .18em .5em rgba(5,0,28,.24); }
.participant-status { overflow: hidden; color: rgba(255,255,255,.62); font-size: .62em; line-height: 1.18; white-space: nowrap; text-overflow: ellipsis; }.participant-status.answered, .participant-status.correct { color: #72ffc4; }.participant-status.incorrect { color: #ff9fc1; }.participant-status.inactive { color: #9b96b2; }
.participant-score { position: absolute; right: .58em; top: 50%; width: 5.2em; margin-top: -.55em; color: #fff; font-size: .76em; line-height: 1.1; font-weight: 760; text-align: right; white-space: nowrap; }
.empty-text { margin: .35em; color: rgba(255,255,255,.55); font-size: .68em; line-height: 1.28; }
.participant-list.count-1 .participant-item { height: 27%; }.participant-list.count-2 .participant-item { height: 23%; }.participant-list.count-3 .participant-item { height: 19%; }.participant-list.count-4 .participant-item { height: 16.5%; }.participant-list.count-1 .participant-main strong, .participant-list.count-2 .participant-main strong { font-size: 1.18em; }.participant-list.count-1 .participant-status, .participant-list.count-2 .participant-status { font-size: .72em; }.participant-list.count-1 .participant-score, .participant-list.count-2 .participant-score { font-size: .86em; }
.leaderboard-panel { position: absolute; left: 1.2em; right: 1.2em; top: 7.8em; bottom: 1.15em; overflow: hidden; }
.final-burst { height: 1.6em; color: #fff582; font-size: 1.1em; line-height: 1.2; font-weight: 850; text-align: center; letter-spacing: .14em; text-shadow: 0 0 .8em rgba(255,218,78,.5); animation: finalBurst .8s ease both; }
.leaderboard-list { height: calc(100% - 1.8em); margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; }
.leaderboard-item { position: relative; width: 49.2%; height: 22%; margin-bottom: 1.25%; padding: .62em 5em .52em .68em; overflow: hidden; border: 0; border-radius: .9em; background: linear-gradient(110deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); animation: podiumRise .65s cubic-bezier(.2,.9,.2,1) both; }
.leaderboard-item.winner { background: linear-gradient(110deg, rgba(255,223,88,.28), rgba(187,73,224,.22)); }.leaderboard-main { min-width: 0; height: 100%; display: flex; align-items: center; }.leaderboard-main .leaderboard-rank { margin-right: .5em; }.leaderboard-main .winner-badge { margin-left: .5em; }.leaderboard-main strong { flex: 1 1 auto; min-width: 0; max-width: none; overflow: hidden; font-size: 1.02em; white-space: nowrap; text-overflow: ellipsis; }.leaderboard-score { position: absolute; right: .7em; top: 50%; margin-top: -.55em; color: #6ff7ff; font-size: .8em; font-weight: 800; }.winner-badge { flex: 0 0 auto; color: #fff582; font-size: .48em; font-weight: 850; text-transform: uppercase; }
.question-panel.summary-mode { width: 100%; }.question-panel.summary-mode + .scoreboard { display: none; }.question-panel.summary-mode .question-title { display: none; }.question-panel.summary-mode .leaderboard-panel { top: 5.65em; }.question-panel.summary-mode .leaderboard-item { width: 49.35%; }.question-panel.summary-mode .leaderboard-item:only-child { width: 100%; }
.stopped-panel { padding: 1em; border: 0; border-radius: 1em; background: rgba(48,25,92,.72); }
.question-transition { animation: questionSwap .72s cubic-bezier(.2,.9,.25,1); }.reveal-transition { animation: revealFlash .75s ease; }.option-enter { animation: optionIn .58s cubic-bezier(.2,.9,.2,1) both; }
.rcRoomQrCodeLink,
.rcRoomQrCodeLink * { box-sizing: content-box; }
.rcRoomQrCodeLink { display: block; width: 150px; overflow: hidden; margin-left: auto; margin-right: auto; border: solid 8px #fff; border-radius: 14px; color: #fff; background-color: #fff; box-shadow: 0 0 32px #000; text-align: center; transition: opacity 1s ease; text-decoration: none; transform-origin: center; transform: scale(1); animation: pop-in 500ms ease-in-out forwards; }
.rcTechLabel { background-color: #000; color: #fff; font-family: monospace; font-size: 13px; font-weight: bold; margin: 0 0 8px 0; padding: 4px; letter-spacing: .2em; border-radius: 6px 6px 0 0; }
.rcRoomQrCode { width: 150px; height: 150px; overflow: hidden; }
.rcRoomQrCode img,
.rcRoomQrCode canvas { display: block; width: 150px !important; height: 150px !important; }
.rcRoomId { overflow: hidden; margin: 8px 0 0 0; padding: 4px; border-radius: 0 0 6px 6px; color: #fff; background-color: #000; font-family: monospace; font-size: 16px; letter-spacing: .25em; text-overflow: clip; white-space: nowrap; }
@keyframes ambientDrift { from { transform: scale(1.04) translate3d(-.5%,0,0); } to { transform: scale(1.1) translate3d(.7%,-.7%,0); } }
@keyframes artReveal { from { transform: scale(1.03); } to { transform: scale(1.1); } }
@keyframes sparkle { 0%,100% { opacity:.18; transform:scale(.55); } 50% { opacity:.9; transform:scale(1.25); } }
@keyframes timerPulse { from { opacity:.65; } to { opacity:1; } }
@keyframes sheen { from { left:-55%; } to { left:125%; } }
@keyframes optionIn { from { opacity:0; transform:translateY(1.4em) scale(.96); } to { opacity:1; transform:none; } }
@keyframes questionSwap { 0% { opacity:0; transform:translateX(2.8em) scale(.975); } 100% { opacity:1; transform:none; } }
@keyframes revealFlash { 0% { transform:scale(.985); } 42% { box-shadow:0 0 3.2em rgba(255,236,114,.55); } 100% { transform:none; } }
@keyframes correctPop { 0% { transform:scale(.96); } 55% { transform:scale(1.035); } 100% { transform:none; } }
@keyframes scoreSlide { from { opacity:0; transform:translateX(1.7em); } to { opacity:1; transform:none; } }
@keyframes podiumRise { from { opacity:0; transform:translateY(3em) scale(.92); } to { opacity:1; transform:none; } }
@keyframes finalBurst { from { opacity:0; letter-spacing:.48em; transform:scale(1.25); } to { opacity:1; letter-spacing:.14em; transform:none; } }
@keyframes pop-in { 0% { transform:scale(.5); } 66% { transform:scale(1.1); } 100% { transform:scale(1); } }
.lean-paint .ambient-backdrop { opacity:.34; animation:none; }.lean-paint .show-shell:before { background:#24105e; opacity:.74; }.lean-paint .show-shell:after, .lean-paint .spark, .lean-paint .option-item:before { display:none; }.lean-paint .show-header, .lean-paint .stage-card, .lean-paint .option-item, .lean-paint .rcRoomQrCodeLink { box-shadow:none !important; }.lean-paint .show-header, .lean-paint .stage-card, .lean-paint .scoreboard, .lean-paint .option-item, .lean-paint .timer-fill { background-image:none; }.lean-paint .show-header { background-color:rgba(40,18,91,.82); }.lean-paint .stage-card { background-color:rgba(22,14,62,.86); }.lean-paint .scoreboard { background-color:rgba(18,31,82,.88); }.lean-paint .question-transition, .lean-paint .reveal-transition { animation-duration:.25s; }
.portrait-layout .show-header { height: 14%; }.portrait-layout .topic-art { width: 31%; }.portrait-layout .show-title-wrap { left: 22%; right: 8.7em; top: 21%; }.portrait-layout .game-layout { top: 16.8%; }.portrait-layout .question-panel { width: 100%; bottom: 30.5%; }.portrait-layout .scoreboard { left: 0; top: 71.8%; width: 100%; }.portrait-layout .participant-list { display: flex; flex-wrap: wrap; justify-content: space-between; }.portrait-layout .participant-item { width: 49%; height: 23%; margin: 0 0 1%; }.portrait-layout .participant-list.count-1 .participant-item, .portrait-layout .participant-list.count-2 .participant-item { height: 46%; }.portrait-layout .question-title { font-size: 2.05em; }.portrait-layout .option-list { height: 47%; }.portrait-layout .join-panel { right:4px; top:4px; width:166px; height:220px; -webkit-transform:scale(.52); transform:scale(.52); }
@media (max-width: 700px) and (orientation: landscape) { .show-title-wrap { left: 18%; }.topic-art { width: 29%; }.hero-copy { font-size:.66em; }.question-title { font-size:2.18em; }.option-label { font-size:1.35em; }.scoreboard-header h3 { font-size:1.25em; }.participant-main strong { font-size:1.08em; }.participant-status { font-size:.66em; }.participant-score { font-size:.8em; }.empty-text { font-size:.74em; }#participantCount { font-size:.62em; } }
@media (max-width: 1500px), (max-height: 850px) { .join-panel { -webkit-transform:scale(.7); transform:scale(.7); } }
@media (max-width: 1000px), (max-height: 600px) { .join-panel { right:4px; top:4px; -webkit-transform:scale(.54); transform:scale(.54); } }
@media (max-width: 700px), (max-height: 420px) { .join-panel { right:4px; top:4px; width:166px; -webkit-transform:scale(.34); transform:scale(.34); } }
/* Quiz selection stage */
.question-panel.selection-mode { width: 100%; }
.question-panel.selection-mode + .scoreboard { display: none; }
.question-panel.selection-mode .timer-value { display: none; }
.quiz-selection-panel { position: absolute; left: 1.2em; right: 1.2em; top: 4.9em; bottom: 1.05em; overflow: hidden; }
.selection-heading { position: relative; height: 3.4em; padding-right: 25em; overflow: hidden; }
.selection-kicker { margin: 0 0 .22em; color: #6ff7ff; font-size: .58em; line-height: 1; font-weight: 850; letter-spacing: .16em; }
.selection-heading h2 { margin: 0; overflow: hidden; font-size: 1.55em; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; }
.selection-heading > p { position: absolute; right: 0; top: .5em; width: 24em; margin: 0; color: rgba(255,255,255,.72); font-size: .68em; line-height: 1.25; text-align: right; }
.quiz-selection-grid { height: calc(100% - 3.4em); display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between; }
.quiz-selection-tile { position: relative; width: 19.1%; height: 31.4%; padding: 0; overflow: hidden; border: 0; border-radius: .82em; color: #fff; background: #321172; font: inherit; text-align: left; box-shadow: 0 .42em 1em rgba(5,0,28,.28); cursor: pointer; transition: transform 180ms ease, opacity 220ms ease, box-shadow 220ms ease; }
.quiz-selection-tile img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.03); }
.quiz-tile-shade { position: absolute; left: 0; right: 0; top: 25%; bottom: 0; background: linear-gradient(180deg, transparent, rgba(13,3,42,.94)); }
.quiz-selection-tile strong { position: absolute; z-index: 2; left: .62em; right: .62em; bottom: .48em; max-height: 2.25em; overflow: hidden; font-size: .74em; line-height: 1.06; font-weight: 850; text-shadow: 0 .1em .35em rgba(0,0,0,.8); }
.quiz-tile-badge { position: absolute; z-index: 3; left: .52em; top: .5em; padding: .34em .55em; border-radius: 99em; color: #29115d; background: #fff582; font-size: .42em; line-height: 1; font-weight: 900; letter-spacing: .08em; }
.quiz-selection-tile:hover:not(:disabled), .quiz-selection-tile:focus:not(:disabled) { z-index: 4; transform: translateY(-.16em) scale(1.025); box-shadow: 0 .7em 1.4em rgba(5,0,28,.38), 0 0 1.2em rgba(111,247,255,.34); outline: 0; }
.quiz-selection-tile:active:not(:disabled) { transform: translateY(.08em) scale(.985); }
.quiz-selection-tile:disabled { cursor: default; }
.quiz-selection-tile:disabled:not(.selected) { opacity: .3; }
.quiz-selection-tile.suggested { box-shadow: 0 0 1.35em rgba(111,247,255,.6); }
.quiz-selection-tile.selected { background: #1f9d79; box-shadow: 0 0 2.2em rgba(99,255,192,.85); animation: selectionWinner .8s cubic-bezier(.2,.9,.25,1) both; }
.quiz-selection-tile.selected img { transform: scale(1.1); }
.quiz-tile-enter { animation: quizTileIn .55s cubic-bezier(.2,.9,.25,1) both; }
@keyframes quizTileIn { from { opacity: 0; transform: translateY(1.5em) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes selectionWinner { 0% { transform: scale(.9); } 55% { transform: scale(1.08) rotate(-1deg); } 100% { transform: none; } }
.lean-paint .quiz-selection-tile { box-shadow: none; }
.lean-paint .quiz-tile-shade { background: rgba(18,7,53,.76); top: 58%; }
.lean-paint .quiz-selection-tile.suggested, .lean-paint .quiz-selection-tile.selected { box-shadow: none; }
.portrait-layout .quiz-selection-panel { top: 4.7em; }
.portrait-layout .selection-heading { padding-right: 0; }
.portrait-layout .selection-heading > p { display: none; }
.portrait-layout .quiz-selection-tile { width: 32.45%; height: 18.6%; }
@media (max-width: 700px) and (orientation: landscape) { .selection-heading { height: 3em; padding-right: 19em; }.selection-heading > p { width: 18em; font-size: .62em; }.quiz-selection-grid { height: calc(100% - 3em); }.quiz-selection-tile strong { font-size: .82em; }.quiz-selection-tile { border-radius: .68em; } }
/* Narrow portrait viewer */
.show-qr-button { display: none; }
.qr-modal { position: fixed; z-index: 60; left: 0; right: 0; top: 0; bottom: 0; }
.qr-modal-backdrop { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(10,3,35,.86); }
.qr-modal-card { position: absolute; left: 50%; top: 50%; width: 292px; min-height: 372px; margin-left: -146px; padding: 22px 18px 18px; overflow: hidden; border-radius: 26px; color: #fff; background: linear-gradient(145deg, #5125a7, #211052); box-shadow: 0 22px 70px rgba(0,0,0,.58); text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); animation: qrModalIn 260ms ease-out both; }
.qr-modal-close { position: absolute; z-index: 2; right: 10px; top: 10px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: #261052; background: #fff582; font: bold 28px/42px Arial, sans-serif; cursor: pointer; }
.qr-modal-kicker { margin: 2px 44px 4px; color: #6ff7ff; font-size: 10px; line-height: 1; font-weight: bold; letter-spacing: .2em; }
.qr-modal-card h2 { margin: 0; font-size: 26px; line-height: 1.05; }
.qr-modal-copy { margin: 7px auto 0; max-width: 220px; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.25; }
.modal-qr-stage { width: 186px; height: 260px; margin: 13px auto 0; }
.modal-qr-stage > .rcRoomQrCodeLink { animation: none; -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-transform-origin: top center; transform-origin: top center; }
@keyframes qrModalIn { from { opacity: 0; -webkit-transform: translateY(-46%) scale(.94); transform: translateY(-46%) scale(.94); } to { opacity: 1; -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); } }

@media (max-width: 700px) and (orientation: portrait) {
    .portrait-layout .show-header { height: 16%; }
    .portrait-layout .topic-art { width: 34%; }
    .portrait-layout .show-title-wrap { left: 24%; right: 82px; top: 18%; bottom: 9%; }
    .portrait-layout .show-title-wrap h1 { max-height: 2.5em; padding-bottom: 3px; font-size: 22px; line-height: 1.04; white-space: normal; text-overflow: clip; }
    .portrait-layout .eyebrow { font-size: 8px; }
    .portrait-layout .hero-copy { display: none; }
    .portrait-layout .game-layout { top: 18%; }
    .portrait-layout .join-panel { display: none; }
    .portrait-layout .show-qr-button { display: block; position: absolute; z-index: 7; right: 6px; top: 12px; padding: 9px 11px; border: 0; border-radius: 99px; color: #271052; background: linear-gradient(120deg, #fff582, #ffcf5c); box-shadow: 0 7px 20px rgba(8,0,38,.3); font: bold 12px/1 Arial, sans-serif; cursor: pointer; }
    .portrait-layout .show-qr-button:disabled { opacity: .5; cursor: default; }
    .portrait-layout .question-panel.selection-mode { bottom: 0; }
    .portrait-layout .question-panel.selection-mode .answer-summary { display: none; }
    .portrait-layout .question-panel.selection-mode .phase-badge { padding: 7px 10px; font-size: 10px; }
    .portrait-layout .question-panel.selection-mode .question-progress { margin-top: 5px; font-size: 9px; }
    .portrait-layout .quiz-selection-panel { left: 10px; right: 10px; top: 62px; bottom: 10px; }
    .portrait-layout .selection-heading { height: 58px; padding-right: 0; }
    .portrait-layout .selection-kicker { margin-bottom: 5px; font-size: 9px; }
    .portrait-layout .selection-heading h2 { font-size: 20px; line-height: 1.05; }
    .portrait-layout .selection-heading > p { display: none; }
    .portrait-layout .quiz-selection-grid { height: calc(100% - 58px); padding: 2px 4px 10px 0; overflow-x: hidden; overflow-y: auto; align-content: flex-start; -webkit-overflow-scrolling: touch; }
    .portrait-layout .quiz-selection-grid::-webkit-scrollbar { width: 7px; }
    .portrait-layout .quiz-selection-grid::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(111,247,255,.55); }
    .portrait-layout .quiz-selection-tile { width: 48.6%; height: 104px; margin-bottom: 10px; border-radius: 14px; }
    .portrait-layout .quiz-selection-tile strong { left: 9px; right: 9px; bottom: 8px; max-height: 32px; font-size: 13px; line-height: 1.15; }
    .portrait-layout .quiz-tile-badge { left: 7px; top: 7px; padding: 5px 7px; font-size: 9px; }
}

@media (max-width: 360px) and (orientation: portrait) {
    .qr-modal-card { width: 280px; margin-left: -140px; }
    .portrait-layout .show-title-wrap { left: 23%; right: 78px; top: 17%; }
    .portrait-layout .show-title-wrap h1 { font-size: 20px; }
    .portrait-layout .quiz-selection-tile { height: 96px; }
}