* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body { color: #fff; background: #351174; font-family: "Trebuchet MS", Arial, sans-serif; background-image: radial-gradient(circle at 90% 5%, #ff4fa3 0, transparent 30%), radial-gradient(circle at 5% 88%, #13c9c0 0, transparent 32%), linear-gradient(155deg, #6b28cc, #24105f); }
.mobile-shell { max-width: 720px; min-height: 100vh; margin: 0 auto; padding: 14px; }
.topbar, .card { border: 2px solid rgba(255,255,255,.72); border-radius: 24px; background: #4c20a3; box-shadow: 0 12px 30px rgba(20,4,53,.38); }
.topbar { position: relative; min-height: 88px; padding: 14px 116px 12px 76px; }
.brand-bubble { position: absolute; left: 14px; top: 15px; width: 50px; height: 50px; border: 3px solid #fff; border-radius: 50%; color: #351174; background: #fff177; font-size: 24px; line-height: 44px; font-weight: bold; text-align: center; transform: rotate(-7deg); }
.eyebrow { margin: 0 0 4px; color: #73f5ff; font-size: 11px; font-weight: bold; letter-spacing: .2em; }.topbar h1 { margin: 0; overflow: hidden; font-size: 24px; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; }
.topbar-actions { position: absolute; right: 12px; top: 12px; width: 95px; text-align: right; }.status-pill, .back-to-apps-button { display: inline-block; padding: 7px 9px; border-radius: 99px; color: #24105f; background: #fff; font-size: 11px; font-weight: bold; text-decoration: none; }.back-to-apps-button { margin-top: 7px; color: #fff; background: #7351c9; }
.main-stack { margin-top: 12px; }.card { position: relative; padding: 18px; overflow: hidden; }.card-star { position: absolute; right: 18px; top: 10px; color: #fff177; font-size: 36px; transform: rotate(12deg); }.card h2, .card h3 { margin-top: 0; }.supporting-text { color: #dfd5ff; font-size: 14px; line-height: 1.35; }
.input-label { display: block; margin: 16px 0 7px; color: #73f5ff; font-size: 13px; font-weight: bold; }.name-card input { width: 100%; padding: 15px 16px; border: 2px solid #a98aff; border-radius: 16px; outline: 0; color: #24105f; background: #fff; font: inherit; }.name-card input:focus { border-color: #fff177; box-shadow: 0 0 0 3px rgba(255,241,119,.25); }
.form-actions { margin-top: 12px; display: flex; gap: 8px; }.primary-button, .ghost-button { border: 0; border-radius: 99px; padding: 12px 16px; font: inherit; font-size: 13px; font-weight: bold; cursor: pointer; }.primary-button { color: #24105f; background: #fff177; box-shadow: 0 5px 0 #c47a16; }.ghost-button { color: #fff; background: #7351c9; }.topbar .ghost-button { margin-top: 7px; padding: 6px 8px; font-size: 10px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.meta-row.subtle { margin-top: 10px; color: #ded3ff; font-size: 12px; }.phase-badge { padding: 8px 11px; border-radius: 99px; color: #351174; background: #73f5ff; font-size: 11px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }.timer-pill { min-width: 65px; color: #fff; font-size: 13px; font-weight: bold; text-align: right; }.timer-pill span { font-size: 31px; line-height: 1; }
.timer-track { height: 9px; margin-top: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; background: #21104c; }.timer-fill { width: 100%; height: 100%; background: #73f5ff; transition: width 230ms linear, background-color 180ms linear; }.timer-fill.warning { background: #fff177; }.timer-fill.danger { background: #ff4f73; animation: timerPulse .45s ease-in-out infinite alternate; }
.question-title { min-height: 2.5em; margin: 15px 0 12px; overflow: hidden; font-size: 22px; line-height: 1.15; }.answers-grid { display: block; }.answer-button { position: relative; width: 100%; min-height: 58px; margin-bottom: 9px; padding: 12px 68px 12px 54px; overflow: hidden; border: 2px solid rgba(255,255,255,.75); border-radius: 16px; color: #fff; background: #2f67db; font: inherit; font-size: 16px; font-weight: bold; text-align: left; box-shadow: 0 5px 0 #173883; transition: transform 140ms ease, opacity 180ms ease, background-color 180ms ease; }.answer-button:nth-child(2) { background:#df3f87; box-shadow-color:#821948; }.answer-button:nth-child(3) { background:#e99024; box-shadow-color:#92500e; }.answer-button:nth-child(4) { background:#1cae87; box-shadow-color:#09644f; }.answer-button:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }.answer-index { position: absolute; left: 12px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; color: #321267; background: #fff; line-height: 32px; text-align: center; }.answer-trailing { position: absolute; right: 11px; top: 50%; width: 52px; margin-top: -7px; overflow: hidden; font-size: 10px; line-height: 14px; text-align: right; text-transform: uppercase; }.answer-button.selected { border-color:#fff177; transform:scale(1.012); }.answer-button.correct { color:#143f2d; background:#62eca8; box-shadow-color:#21845a; animation:correctPop .55s ease; }.answer-button.incorrect { background:#e34865; opacity:.9; }
.submission-hint { margin-bottom: 0; }.result-panel, .leaderboard-panel { margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.25); }.result-panel { animation:panelIn .45s ease; }.leaderboard-list { margin: 8px 0 0; padding: 0; list-style: none; }.leaderboard-item { position: relative; min-height: 46px; margin-bottom: 7px; padding: 9px 92px 9px 10px; overflow: hidden; border-radius: 13px; background:#6440ad; animation:panelIn .45s ease both; }.leaderboard-item.you { border:2px solid #73f5ff; }.leaderboard-item.winner { border:2px solid #fff177; }.leaderboard-main { min-width:0; display:flex; align-items:center; gap:8px; }.leaderboard-main strong { max-width:62%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.leaderboard-rank { flex:0 0 auto; width:26px; height:26px; border-radius:50%; color:#321267; background:#fff177; line-height:26px; font-weight:bold; text-align:center; }.leaderboard-score { position:absolute; right:10px; top:15px; color:#73f5ff; font-size:12px; font-weight:bold; }.winner-badge { color:#fff177; font-size:9px; font-weight:bold; text-transform:uppercase; }.status-good { background:#73f5ff; }.status-warn { background:#fff177; }.status-bad { color:#fff; background:#ff4f73; }
.phase-question { animation:panelIn .55s ease; }.phase-reveal { animation:revealFlash .6s ease; }.answer-enter { animation:answerIn .45s cubic-bezier(.2,.9,.3,1) both; }
@keyframes answerIn { from { opacity:0; transform:translateX(25px); } to { opacity:1; transform:none; } } @keyframes panelIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes revealFlash { 40% { box-shadow:0 0 32px #fff177; } } @keyframes correctPop { 50% { transform:scale(1.025); } } @keyframes timerPulse { from { opacity:.6; } to { opacity:1; } }
@media (max-width:430px) { .mobile-shell { padding:9px; }.topbar { padding-left:66px; padding-right:100px; border-radius:20px; }.brand-bubble { left:10px; }.topbar h1 { font-size:20px; }.card { padding:14px; border-radius:20px; }.question-title { font-size:19px; }.answer-button { min-height:54px; font-size:15px; } }

/* Quiz Pro glass-show skin */
body { position: relative; background: #1c0a4b; }
body:before { content: ""; position: fixed; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(155deg, rgba(35,9,83,.9), rgba(84,24,158,.72) 48%, rgba(10,37,83,.88)); }
.control-backdrop { position: fixed; z-index: -2; left: -4%; right: -4%; top: -4%; bottom: -4%; opacity: .36; background-position: center; background-repeat: no-repeat; background-size: cover; transform: scale(1.08); animation: controlDrift 16s ease-in-out infinite alternate; }
.mobile-shell { position: relative; z-index: 1; }
.topbar, .card { border-color: rgba(255,255,255,.48); background: linear-gradient(145deg, rgba(53,21,121,.78), rgba(31,15,82,.68)); box-shadow: 0 18px 42px rgba(9,1,33,.38), inset 0 1px 0 rgba(255,255,255,.22); }
.topbar { overflow: hidden; }.topbar:after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #7af5ff, transparent); }
.brand-bubble { border-color: rgba(255,255,255,.85); background: linear-gradient(145deg, #fff889, #ffc94c); box-shadow: 0 8px 20px rgba(7,0,30,.3); }
.status-pill { background: linear-gradient(120deg, #72f5ff, #55d5ff); }.back-to-apps-button, .ghost-button { background: rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }.primary-button { background: linear-gradient(120deg, #fff889, #ffca4e); }
.phase-badge { background: linear-gradient(120deg, #72f5ff, #5bd7ff); box-shadow: 0 7px 18px rgba(65,222,255,.18); }.timer-track { background: rgba(6,0,28,.35); box-shadow: inset 0 2px 5px rgba(0,0,0,.24); }.timer-fill { background: linear-gradient(90deg, #42c9ff, #73f5ff); box-shadow: 0 0 14px rgba(80,226,255,.55); }
.answer-button { border-color: rgba(255,255,255,.55); box-shadow: 0 9px 22px rgba(7,0,33,.26), inset 0 1px 0 rgba(255,255,255,.28); }.answer-button:nth-child(1) { background: linear-gradient(135deg, #356ce0, #4b52cf); }.answer-button:nth-child(2) { background: linear-gradient(135deg, #e43c8d, #af35b0); }.answer-button:nth-child(3) { background: linear-gradient(135deg, #ff9d28, #e95d46); }.answer-button:nth-child(4) { background: linear-gradient(135deg, #1dbb91, #14849e); }.answer-button:active:not(:disabled) { transform: translateY(3px) scale(.992); box-shadow: 0 3px 10px rgba(7,0,33,.3); }
.leaderboard-item { border: 1px solid rgba(255,255,255,.16); background: linear-gradient(110deg, rgba(255,255,255,.15), rgba(255,255,255,.07)); }
@keyframes controlDrift { from { transform: scale(1.08) translate3d(-.5%,0,0); } to { transform: scale(1.14) translate3d(.8%,-.7%,0); } } }
/* Quiz selection controls */
.selection-card { overflow: visible; }
.selection-intro h2 { margin: 12px 0 5px; font-size: 25px; }
.selection-intro .supporting-text { margin: 0 0 15px; }
.quiz-pack-grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.quiz-pack-button { position: relative; width: 49%; min-height: 164px; margin: 0 0 10px; padding: 0 0 11px; overflow: hidden; border: 0; border-radius: 18px; color: #fff; background: rgba(28,11,74,.88); font: inherit; text-align: left; box-shadow: 0 9px 22px rgba(8,0,34,.32); cursor: pointer; transition: transform 160ms ease, opacity 220ms ease, box-shadow 220ms ease; }
.quiz-pack-button:active:not(:disabled) { transform: translateY(3px) scale(.985); }
.quiz-pack-image { display: block; width: 100%; height: 88px; overflow: hidden; background: #24105f; }
.quiz-pack-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.quiz-pack-button:active:not(:disabled) img { transform: scale(1.06); }
.quiz-pack-copy { display: block; padding: 9px 10px 0; }
.quiz-pack-copy strong { display: block; max-height: 2.25em; overflow: hidden; color: #fff; font-size: 15px; line-height: 1.08; }
.quiz-pack-copy > span { display: block; max-height: 2.5em; margin-top: 5px; overflow: hidden; color: #dcd3ff; font-size: 11px; line-height: 1.22; }
.quiz-pack-badge { position: absolute; left: 8px; top: 8px; padding: 6px 8px; border-radius: 99px; color: #2b115f; background: #fff177; font-size: 9px; font-weight: bold; text-transform: uppercase; box-shadow: 0 4px 12px rgba(8,0,34,.28); }
.quiz-pack-button.suggested { box-shadow: 0 0 24px rgba(115,245,255,.65), 0 9px 22px rgba(8,0,34,.32); }
.quiz-pack-button:disabled { cursor: default; }
.quiz-pack-button:disabled:not(.selected) { opacity: .32; }
.quiz-pack-button.selected { opacity: 1; background: #157a67; box-shadow: 0 0 30px rgba(99,255,190,.78); animation: chosenPack .7s cubic-bezier(.2,.9,.25,1) both; }
.quiz-pack-enter { animation: quizPackIn .48s cubic-bezier(.2,.9,.3,1) both; }
.phase-selection { animation: selectionPanelIn .62s cubic-bezier(.2,.9,.25,1); }
@keyframes quizPackIn { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes chosenPack { 0% { transform: scale(.94); } 55% { transform: scale(1.035); } 100% { transform: none; } }
@keyframes selectionPanelIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 430px) { .selection-intro h2 { font-size: 22px; }.quiz-pack-button { min-height: 150px; border-radius: 15px; }.quiz-pack-image { height: 78px; }.quiz-pack-copy strong { font-size: 14px; } }