/* SnapTrivia design system. Shared by the web and native shell. */
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400 800; font-display:swap; src:url('./fonts/outfit-latin.woff2') format('woff2'); }
.advanced-options { display:grid; gap:10px; margin-top:20px; }
.family-invitation { margin-bottom:20px; }
.family-invitation h2 { font-size:25px; margin-bottom:10px; }
#howItWorks { margin:18px 4px 0; line-height:1.6; max-width:65ch; }
:root {
  color-scheme: dark;
  --bg:#261b28; --surface:#332636; --surface-hi:#3c2d3e; --ink:#fff7ef; --dim:#c5b3c4;
  --hot:#f5a5c4; --pink:#f5a5c4; --pop:#ffda79; --pop-edge:#bd9342; --line:#574459;
  --go:#a7debc; --go-ink:#1a3928; --blue:#f5a5c4; --blue-ink:#45243c; --amber:#eac48d;
  --pill:#fff6e9; --pill-ink:#382534; --spring:cubic-bezier(.2,.8,.2,1);
  --font:'Outfit','Avenir Next','Segoe UI',sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--font); min-height:100dvh; display:flex; flex-direction:column; align-items:center; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button,input,select,a { font:inherit; }
button,a { -webkit-touch-callout:none; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
button, input, select { transition:background .18s, border-color .18s, transform .18s; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible { outline:3px solid var(--pop); outline-offset:4px; }
a { color:var(--pink); }
button:active { transform:translateY(2px); }
.hidden { display:none!important; }
.app-header { width:min(1120px,100%); display:flex; align-items:center; justify-content:space-between; padding:30px 32px 26px; gap:20px; }
.wordmark { text-decoration:none; color:var(--ink); font-weight:800; font-size:26px; letter-spacing:-1.1px; display:flex; align-items:center; gap:0; }
.wordmark>span:nth-child(2) { color:var(--pink); }
.brand-spark { color:var(--pop); font-size:34px; padding-right:9px; }
.brand-dot { color:var(--pop); }
.app-header nav { display:flex; align-items:center; gap:12px; }
.nav-button,.icon-button,.text-button { background:none; border:0; color:var(--ink); font-weight:500; min-height:44px; border-radius:12px; }
.nav-button { color:var(--dim); font-size:14px; padding:8px 12px; }
.nav-button:hover,.icon-button:hover,.text-button:hover { background:rgba(255,255,255,.06); color:var(--ink); }
.icon-button { min-width:44px; font-size:20px; }
.text-button { padding:10px 12px; font-size:14px; }
main { width:min(1120px,100%); flex:1; padding:12px 32px 32px; }
.home-grid { display:grid; grid-template-columns:1fr 1.06fr; gap:64px; align-items:start; }
.start-panel { padding-top:10px; }
.eyebrow { font-size:11px; font-weight:650; letter-spacing:2.1px; color:var(--dim); margin:0 0 16px; }
.home-title { font-size:clamp(38px,4.5vw,60px); font-weight:650; line-height:1.03; letter-spacing:-2.8px; margin:0 0 20px; }
.home-title em { color:var(--pink); font-style:normal; }
.home-description { color:var(--dim); font-size:16px; line-height:1.65; margin-bottom:24px; }
.company-switch { display:flex; gap:8px; padding:5px; background:#1e1521; border:1px solid #49374d; border-radius:15px; margin-bottom:20px; }
.company-switch button { flex:1; display:flex; gap:9px; align-items:center; justify-content:center; min-height:46px; border:0; border-radius:10px; background:transparent; color:var(--dim); font-size:15px; font-weight:600; }
.company-switch button.on { background:var(--surface-hi); color:var(--ink); box-shadow:0 2px 5px #150e1860; }
.company-switch button span { color:var(--pink); font-size:14px; }
.ready-card { background:var(--surface); padding:24px; border:1px solid #594056; border-radius:22px; position:relative; }
.ready-card .eyebrow { margin-bottom:8px; color:var(--pink); font-size:10px; }
.ready-card h2 { font-size:26px; letter-spacing:-.6px; font-weight:600; }
.summary-line { color:var(--dim); margin:8px 0 22px; font-size:13px; line-height:1.5; }
.game-options summary { cursor:pointer; min-height:44px; padding:9px 20px 9px 0; list-style:none; position:relative; }
.game-options summary::-webkit-details-marker { display:none; }
.game-options summary::after { content:'⌄'; position:absolute; right:0; color:var(--pink); font-size:20px; top:4px; }
.game-options[open] summary { margin-bottom:0; }
.game-options[open] summary::after { content:'⌃'; }
.game-options .game-controls { display:grid; grid-template-columns:1fr 1fr; margin:0 0 18px; padding:18px 0; gap:18px 12px; border-bottom:0; }
.game-options .control-group:first-child { grid-column:1/-1; }
.game-options .segmented { flex-wrap:wrap; }
.game-options .control-group select { width:100%; }
#quitBtn { display:none; }
#finalScores { color:var(--pop); font-size:24px; margin:14px 0 20px; }
.question-source { display:inline-block; color:#795166; font-size:11px; margin-top:12px; text-underline-offset:3px; }
.playhero { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:var(--pop); border:0; color:#342622; padding:18px 22px; min-height:64px; border-radius:13px; font-size:22px; font-weight:650; box-shadow:0 4px 0 var(--pop-edge); }
.playhero:hover { background:#ffe293; transform:translateY(-1px); }
.playhero:active { transform:translateY(3px); box-shadow:0 1px 0 var(--pop-edge); }
.playhero>span:last-child { font-size:27px; }
.play-note { text-align:center; color:var(--dim); font-size:11px; margin-top:15px; }
.topics-panel { padding-top:12px; }
.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:18px; }
.section-heading h2 { font-size:20px; font-weight:600; letter-spacing:-.3px; }
.section-heading>span { font-size:12px; color:var(--dim); }
.topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.topic-tile { display:flex; align-items:center; gap:12px; min-height:101px; padding:17px 14px; background:var(--surface); border:1px solid #4a384d; border-radius:16px; text-align:left; color:var(--ink); }
.topic-tile.on { border:2px solid var(--pink); padding:16px 13px; background:#4a3043; }
.topic-tile:hover { background:var(--surface-hi); border-color:var(--pink); }
.topic-tile>span:last-child { font-size:14px; font-weight:600; line-height:1.25; }
.topic-tile small { display:block; margin-top:5px; color:var(--dim); font-size:10px; line-height:1.4; font-weight:400; }
.tile-art { width:47px; height:52px; border-radius:13px; flex-shrink:0; display:grid; place-items:center; font-size:37px; font-weight:500; transform:rotate(-6deg); line-height:1; }
.general-art { background:#ffda79; color:#684824; }.movie-art { background:#f1a6c4; color:#663c54; font-size:26px; transform:rotate(6deg); }.music-art { background:#bcaaf4; color:#463766; }.world-art { background:#c6dcbc; color:#3c5e4b; font-size:47px; transform:rotate(5deg); }.sports-art { background:#f1b286; color:#713e2e; transform:rotate(5deg); }.nature-art { background:#a9ccd2; color:#365258; }
.custom-topic { margin-top:22px; }
.custom-topic label { display:block; font-size:13px; font-weight:500; color:var(--dim); margin-bottom:9px; }
.addform { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.addform input,.text-input { min-width:0; width:100%; flex:1; color:var(--ink); background:#211823; border:1px solid var(--line); border-radius:12px; font-size:15px; padding:13px; min-height:48px; }
input::placeholder { color:#9b889c; font-weight:400; }
.addform .btn { flex:0 0 auto; padding:12px 14px; }
.custom-topic .addform { background:#211823; border:1px solid var(--line); border-radius:12px; padding:4px; gap:0; }
.custom-topic input { border:0; background:none; padding:9px 10px; min-height:40px; font-size:13px; }
.custom-topic input:focus-visible { outline-offset:-2px; }
.photo-button { display:flex; align-items:center; width:100%; text-align:left; gap:14px; color:var(--ink); background:transparent; border:1px dashed #83627e; border-radius:14px; padding:15px 17px; margin-top:12px; }
.photo-button:hover { background:var(--surface); }
.photo-mark { font-size:32px; color:var(--pink); }
.photo-button>span:nth-child(2) { flex:1; font-weight:500; font-size:15px; }
.photo-button small { display:block; margin-top:4px; font-size:11px; font-weight:400; color:var(--dim); }
.photo-button>span:last-child { color:var(--pink); font-size:22px; }
.game-controls { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; margin-top:38px; padding:24px 0; border-top:1px solid #49364b; border-bottom:1px solid #49364b; }
.control-label { color:var(--dim); display:block; text-transform:uppercase; letter-spacing:1.5px; font-size:10px; font-weight:600; margin-bottom:10px; }
.play-mode { margin:18px 0 8px; }
#modeRow { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#modeRow .chip { text-align:left; padding:12px; line-height:1.3; font-size:14px; }
#modeRow small { display:block; margin-top:5px; font-size:11px; font-weight:400; }
.play-mode .hint { font-size:12px; margin:10px 0 0; }
.segmented { display:flex; gap:4px; }
.segmented button,.chip { border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--dim); padding:10px 12px; min-height:42px; font-size:12px; font-weight:500; }
.segmented button.on,.chip.on { background:var(--pill); color:var(--pill-ink); border-color:var(--pill); }
#lenRow button { min-width:39px; padding:10px; }
select { background:var(--surface); border:1px solid var(--line); border-radius:9px; color:var(--ink); min-height:42px; padding:8px 28px 8px 12px; font-size:13px; }
.setupToggle { display:flex; width:100%; align-items:center; justify-content:space-between; margin:8px 0; padding:15px 4px; color:var(--dim); background:none; border:0; font-size:13px; text-align:left; }
.setupToggle .caret { font-size:20px; }.setupToggle:hover { color:var(--ink); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px; margin-bottom:16px; position:relative; }
.hint { color:var(--dim); font-size:13px; line-height:1.6; margin:8px 0; }
.bands,.roster { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pchip { background:#49354a; color:var(--ink); border-radius:30px; padding:8px 10px; display:flex; align-items:center; gap:8px; font-size:14px; }.pchip .x { cursor:pointer; padding:4px; }
#setupZone .card { display:grid; grid-template-columns:1fr; max-width:680px; margin-inline:auto; }
#hostName { margin-bottom:4px; }
.snapsleft { color:var(--pink); text-align:center; font-size:12px; margin:8px 0; }
#howItWorks { max-width:750px; margin:14px auto!important; text-align:center; font-size:12px; color:#a995aa; }
.home-footnote { text-align:center; margin:18px 0 0; }
.home-footnote .hint { font-size:11px; margin:0; }.home-footnote button { font-size:12px; color:var(--pink); }
footer { color:#a18ca2; font-size:11px; padding:20px 24px; text-align:center; line-height:1.8; }
footer a { color:var(--dim); text-underline-offset:3px; }
#continueBox { background:#44363f; border:1px solid #8b777b; border-radius:18px; padding:14px; margin-bottom:24px; }
#continueBox .playhero { background:none; box-shadow:none; font-size:18px; color:var(--ink); min-height:44px; padding:8px 12px; }
#continueHelp { margin-bottom:2px!important; font-size:12px; }
.btn { flex:1; border:0; border-radius:12px; padding:15px 16px; min-height:49px; font-size:14px; font-weight:600; }
.btn.next,.btn.steal { background:var(--pink); color:var(--blue-ink); }
.btn.nailed,.btn.reveal { background:var(--go); color:var(--go-ink); }
.btn.ghost,.btn.nobody { background:transparent; color:var(--dim); border:1px solid var(--line); }
.row { display:flex; gap:10px; margin-top:16px; }
.already { display:block; width:100%; min-height:42px; padding:10px; color:var(--dim); background:none; border:0; margin-top:8px; font-size:12px; }
.already:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
#play,#end,#loading { max-width:720px; margin:0 auto; }
.round-topline { display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; font-size:12px; color:var(--dim); }
.round-topline button { padding-left:0; }
.round-progress { background:#4b374c; height:5px; border-radius:5px; overflow:hidden; margin-bottom:30px; }
.round-progress>span { display:block; height:100%; width:0; background:var(--pink); transition:width .45s; }
.scene { text-align:center; font-size:13px; color:var(--dim); margin-bottom:12px; line-height:1.5; }
.owner { color:var(--pink); text-align:center; font-size:14px; font-weight:500; margin:12px 0 18px; letter-spacing:.2px; }.owner.kidlane { color:var(--go); }
#qcard { background:var(--pill); color:var(--pill-ink); border:0; border-radius:25px; padding:30px; box-shadow:0 8px 0 #aa7996,0 20px 55px #120a1838; margin-bottom:30px; }
#qcard .hint { color:#705b6b; }
#qcard .btn.ghost,#qcard .btn.nobody { border-color:#c8b7c0; color:#674958; }
#qcard .btn.next { background:#e6c8dc; }
#qcard.kidframe { outline:4px solid var(--go); outline-offset:4px; }
#qcard.missed { background:#fff0d9; }
#qcard.suspense { animation:gentlePulse 1.5s ease-in-out infinite; }
.speakbtn { background:none; border:0; float:right; min-height:44px; min-width:44px; border-radius:10px; font-size:19px; position:relative; top:-10px; right:-10px; }
.speakbtn:hover { background:#e7dacf; }
.qnum { display:flex; justify-content:space-between; gap:12px; color:#8d667f; font-size:11px; text-transform:uppercase; letter-spacing:1.3px; font-weight:500; padding-top:5px; clear:left; }
.qtext { font-size:clamp(25px,3.4vw,36px); line-height:1.24; font-weight:600; letter-spacing:-.65px; margin:28px 0 30px; clear:both; }
.answer { color:#33754f; font-size:28px; font-weight:650; margin:12px 0 8px; }.fun { color:#705b6b; line-height:1.6; font-size:15px; }.praise { color:#84566b; font-size:15px; margin-top:10px; }
#hearStatus { background:#ede3db; border-radius:10px; padding:12px 14px; font-size:14px; }
.stealrow { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.stealbtn { background:#f3e5ed; border:1px solid #d9c4cf; border-radius:12px; min-height:52px; padding:14px 18px; font-weight:500; font-size:16px; color:var(--pill-ink); }
#choiceGrid { display:grid; grid-template-columns:1fr; gap:10px; }
#choiceGrid .stealbtn { width:100%; text-align:left; background:#fffdfa; }
#choiceGrid .stealbtn:hover { background:#f7dce8; border-color:#bb7b99; }
#qcard .already { color:#7c5e72; }
.journey { background:none; border:0; padding:12px 0; }
.jrow { display:flex; align-items:center; gap:14px; margin-bottom:12px; }.jname { width:110px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.jtrack { flex:1; height:8px; background:#49354a; border-radius:9px; overflow:hidden; }.jfill { height:100%; border-radius:9px; transition:width .5s; }.jpts { width:40px; text-align:right; font-size:13px; color:var(--dim); }
#quitBtn { font-size:13px; min-height:45px; }
.lastq { color:var(--pop); text-align:center; font-size:13px; margin:8px 0; }
.loader { padding:56px 24px 36px; margin:20px auto; max-width:540px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:28px; }
.loader h2 { font-size:clamp(28px,5vw,38px); line-height:1.12; margin:12px 0 16px; }
.loader #loadMsg { font-size:17px; color:var(--ink); min-height:52px; line-height:1.5; }
.loader .loading-note { font-size:13px; color:var(--dim); margin:24px 0 12px; }
.load-progress { text-align:left; border:1px solid var(--line); background:#302333; border-radius:15px; padding:18px; margin:20px 0; }
#loadStage { color:var(--pink); font-size:16px; font-weight:600; margin:0 0 10px; }
#loadTiming { color:var(--dim); font-size:13px; line-height:1.6; margin:0; }
.loading-connection { color:var(--dim); font-size:12px; margin:12px 0 0; font-variant-numeric:tabular-nums; }
.loader #retryLoad { display:block; width:100%; margin:20px 0 8px; }
.wrong-feedback { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%) scale(.9); width:max-content; max-width:calc(100% - 32px); padding:14px 20px; display:grid; place-items:center; border-radius:24px; font-size:18px; line-height:1.25; font-weight:700; text-align:center; background:#fde5e9; color:#b82449; box-shadow:0 6px 24px #261b2830; opacity:0; pointer-events:none; z-index:4; transition:opacity .12s,transform .12s; }
.wrong-feedback.unclear { background:#f2edf8; color:#564169; }
.wrong-feedback.visible { opacity:1; transform:translate(-50%,-50%) scale(1); }
.results-card .home-result { display:block; width:100%; margin:16px 0 10px; min-height:72px; font-size:21px; color:var(--ink); background:var(--surface-hi); border:1px solid var(--line); }
.home-result span { display:block; font-size:12px; font-weight:400; color:var(--dim); margin-top:5px; }
.loading-mark { display:flex; justify-content:center; gap:8px; height:42px; margin-bottom:24px; }
.loading-mark i { width:14px; height:30px; border-radius:9px; background:var(--pink); transform:rotate(25deg); animation:loading-pulse 1.5s ease-in-out infinite; }
.loading-mark i:nth-child(2) { background:var(--pop); animation-delay:.16s; }.loading-mark i:nth-child(3) { animation-delay:.32s; }
@keyframes loading-pulse { 0%,70%,100% { opacity:.35; transform:rotate(25deg) translateY(0); } 35% { opacity:1; transform:rotate(25deg) translateY(-8px); } }
.results-card { text-align:center; margin-top:12px; padding:34px; }.results-card .eyebrow { margin:0 0 14px; color:var(--pink); }.trophy { font-size:56px; margin:10px 0 20px; }.results-card h2 { font-size:32px; font-weight:600; letter-spacing:-.7px; }.endscore { padding:12px; background:#402e40; border-radius:12px; margin:8px 0; font-size:17px; }.endscore.winner { color:var(--pop); border:1px solid #94754c; }.result-recap { color:var(--dim); font-size:14px; line-height:1.6; margin:18px 0; }.earned-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:22px; }.earned-badges span { color:var(--pop); border:1px solid #775b3e; border-radius:30px; padding:8px 12px; font-size:12px; }
#shareBtnEnd,#challengeBtn { background:transparent; color:var(--pink); border:1px solid var(--line); }
.unlock-label { width:100%; margin:0 0 2px; color:var(--pink); font-size:10px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; }
.earned-badges:empty { margin:0; }
.next-milestone { text-align:left; padding:16px; margin:18px 0 0; border:1px solid #665064; background:#352637; border-radius:14px; }
.milestone-eyebrow { color:var(--pink); font-size:9px; font-weight:600; letter-spacing:1.2px; }
.milestone-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:7px; }.milestone-title strong { font-size:16px; font-weight:500; }.milestone-title small { color:var(--pop); font-size:12px; }
.next-milestone p { color:var(--dim); font-size:12px; line-height:1.5; margin:6px 0 12px; }
.achievement-progress { background:#513b52; height:5px; border-radius:5px; overflow:hidden; }.achievement-progress i { display:block; height:100%; border-radius:5px; background:var(--pop); }
.collection-heading { margin:26px 0 10px; }.collection-heading h3,.recent-games-heading { font-size:18px; font-weight:500; }.collection-heading>span { font-size:11px; color:var(--pink); }.collection-note { font-size:12px; line-height:1.5; margin-bottom:14px; }
.achievement-collection { display:grid; gap:9px; }.achievement-card { display:flex; align-items:flex-start; gap:13px; padding:14px; border:1px solid var(--line); border-radius:13px; background:#302333; }.achievement-card.earned { border-color:#79623e; background:#3b3032; }.achievement-icon { font-size:25px; width:32px; flex-shrink:0; padding-top:2px; }.achievement-card:not(.earned) .achievement-icon { filter:grayscale(1); opacity:.65; }.achievement-copy { flex:1; min-width:0; }.achievement-copy strong { font-size:14px; font-weight:500; }.achievement-copy p { font-size:11px; color:var(--dim); line-height:1.5; margin:4px 0 7px; }.achievement-copy small { display:block; font-size:10px; color:var(--dim); }.achievement-card.earned small { color:var(--pop); }.achievement-copy .achievement-progress { margin-top:9px; }.recent-games-heading { margin:28px 0 0; }
#endHome { padding-left:0; }.results-card .text-button { color:var(--dim); margin-top:10px; }
.modal { position:fixed; inset:0; z-index:50; background:#140d1ee0; backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal>.card { width:100%; max-width:460px; max-height:90dvh; overflow-y:auto; margin:0; box-shadow:0 25px 70px #08040d66; }
.modal h2 { font-size:29px; font-weight:600; letter-spacing:-.5px; }
.setup-card { text-align:center; }.setup-illustration { color:#513246; background:var(--pink); width:88px; height:100px; display:grid; place-items:center; font-size:65px; border-radius:23px; margin:4px auto 30px; transform:rotate(-7deg); }.setup-copy { color:var(--dim); line-height:1.7; font-size:15px; margin:14px 0; }.setup-status { background:#251c2a; border-radius:12px; color:var(--pop); line-height:1.5; padding:16px; margin:20px 0; font-size:14px; }.setup-card .playhero { font-size:18px; min-height:56px; }.setup-card .text-button { margin-top:16px; }.setup-card .btn.next { width:100%; }
.paybtn { display:block; padding:18px; background:var(--pink); color:var(--blue-ink); text-decoration:none; text-align:center; font-size:17px; font-weight:650; border-radius:13px; margin:20px 0 12px; }
.history-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0; }.history-stats>div { border:1px solid var(--line); border-radius:13px; padding:16px 8px; text-align:center; }.history-stats b { display:block; font-size:27px; font-weight:600; color:var(--pink); }.history-stats small { color:var(--dim); font-size:11px; }.history-item { display:flex; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; }.history-item small { display:block; margin-top:5px; color:var(--dim); font-size:11px; }.history-item strong { color:var(--pop); font-size:19px; }.history-note { font-size:11px; margin-top:22px; }.empty-history { text-align:center; padding:30px 15px; color:var(--dim); line-height:1.7; }
.hifive { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#a7debc; color:#254734; z-index:60; }.hifive .hand { font-size:100px; animation:wob 2s ease-in-out infinite; }.hifive .txt { font-size:38px; font-weight:650; text-align:center; padding:20px; }.impactFlash { position:fixed; inset:0; background:#ffe69b22; pointer-events:none; z-index:60; animation:fadeOut 1s forwards; }.popWord { position:fixed; left:50%; top:35%; transform:translate(-50%,-50%); color:var(--pop); font-size:54px; font-weight:800; z-index:61; pointer-events:none; text-shadow:0 3px 8px #0007; animation:fadeOut 1.4s forwards; }
@keyframes wob { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }@keyframes fadeOut { 0%,60%{opacity:1} 100%{opacity:0} }@keyframes gentlePulse { 50%{box-shadow:0 8px 0 #c590a8,0 20px 55px #bc7d9955} }@keyframes frowIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }.frowIn { animation:frowIn .35s ease-out; }
@media(min-width:900px) { #home { padding-top:8px; } }
@media(max-width:850px) { .home-grid { gap:30px; }.home-title { font-size:46px; }.topic-tile { flex-direction:column; align-items:flex-start; gap:8px; min-height:122px; }.tile-art { height:43px; width:43px; font-size:30px; }.topics-panel { padding-top:0; }.game-controls { gap:18px; } }
@media(max-width:650px) {
  .app-header { padding:16px 20px; gap:8px; }.wordmark { font-size:22px; }.brand-spark { font-size:28px; padding-right:6px; }.app-header nav { gap:0; }.nav-button { padding:8px; font-size:12px; }#micSetupOpen { display:none; }.icon-button { min-width:40px; }
  main { padding:10px 20px 24px; }.home-grid { display:flex; flex-direction:column; gap:30px; }.start-panel,.topics-panel { width:100%; padding-top:0; }.eyebrow { font-size:10px; margin-bottom:12px; }.home-title { font-size:43px; letter-spacing:-1.8px; line-height:1.08; margin-bottom:12px; }.home-title br { display:none; }.home-description { font-size:14px; margin-bottom:20px; }.home-description br { display:none; }.company-switch { margin-bottom:16px; }.company-switch button { min-height:43px; font-size:14px; }.ready-card { padding:19px; }.ready-card h2 { font-size:25px; }.summary-line { margin-bottom:18px; }.playhero { min-height:59px; font-size:21px; padding:15px 18px; }.play-note { font-size:11px; }.topic-grid { gap:10px; }.topic-tile { flex-direction:row; align-items:center; min-height:85px; padding:13px 11px; gap:9px; }.topic-tile.on { padding:12px 10px; }.topic-tile>span:last-child { font-size:13px; }.topic-tile small { font-size:10px; }.tile-art { width:35px; height:43px; font-size:29px; border-radius:10px; }.movie-art { font-size:21px; }.world-art { font-size:37px; }.section-heading h2 { font-size:19px; }.section-heading { margin-bottom:14px; }.section-heading>span { font-size:11px; }.custom-topic { margin-top:18px; }.game-controls { margin-top:26px; display:grid; grid-template-columns:1.2fr 1fr; column-gap:16px; row-gap:21px; padding:21px 0; }.segmented { gap:3px; }.segmented button { font-size:11px; padding:10px 8px; }#lenRow button { min-width:35px; }.control-group select { width:100%; }.round-progress { margin-bottom:20px; }.round-topline { margin-bottom:10px; }.round-topline span { font-size:11px; }
  #qcard { padding:23px 20px; border-radius:20px; }.qtext { font-size:27px; margin-top:25px; }.qnum { font-size:10px; letter-spacing:.9px; }.owner { font-size:13px; }.btn { padding:13px 9px; font-size:13px; }.row { gap:7px; }.scene { font-size:12px; }.answer { font-size:26px; }.fun { font-size:14px; }.card { padding:20px; border-radius:18px; }.results-card { padding:25px 20px; }.results-card h2 { font-size:28px; }.modal { padding:16px; }.modal>.card { max-height:92dvh; }.jname { width:88px; }.home-footnote { margin-top:12px; }
}
@media(max-width:360px) { main { padding-inline:14px; }.app-header { padding-inline:14px; }.home-title { font-size:38px; }.topic-tile small { display:none; }.game-controls { gap:18px 10px; }.segmented button { padding-inline:6px; } }
@media(max-width:650px) { .home-title br { display:initial; }.home-title { font-size:42px; }.game-options .game-controls { margin-top:0; }.summary-line { font-size:12px; }.play-note { padding:8px 0; min-height:36px; margin-top:11px; }.home-description { max-width:310px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Family Pass keeps the purchase and exit equally reachable on a small phone. */
#paywall .pass-card{max-width:420px;text-align:left;padding:28px;max-height:calc(100dvh - 32px);overflow:auto}
#paywall h2{font-size:2rem;line-height:1.15;margin:0 0 18px}
#paywall .pass-price{font-size:1.15rem;font-weight:650;line-height:1.5;margin:0 0 20px;color:var(--ink)}
#paywall .pass-benefits{padding:0;margin:0 0 24px;list-style:none;display:grid;gap:12px;font-size:1rem}
#paywall .pass-benefits li::before{content:'✓';color:var(--pop);font-weight:800;margin-right:12px}
#paywall .paybtn,#paywall #playBuy{display:block;width:100%;margin:0;border-radius:16px;text-align:center;font-size:1.15rem;padding:17px;min-height:56px}
#paywall .pass-dismiss{display:block;width:100%;min-height:48px;margin:10px 0 16px;background:transparent;border:1px solid var(--line);border-radius:14px;color:inherit;font:inherit;font-weight:650;cursor:pointer}
#paywall .pass-support{border-top:1px solid var(--line);padding-top:14px;margin-top:10px;font-size:.85rem}
#paywall .pass-support summary{cursor:pointer;min-height:32px}
#paywall #playStatus:empty{display:none}
#paywall #playStatus{font-size:.9rem;line-height:1.45;margin:0 0 16px}