@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap";:root{--color-primary:#3b82f6;--color-primary-dark:#2563eb;--color-primary-light:#60a5fa;--color-secondary:#ec4899;--color-secondary-dark:#db2777;--color-secondary-light:#f472b6;--color-accent-yellow:#facc15;--color-accent-green:#22c55e;--color-accent-orange:#f97316;--color-accent-purple:#a855f7;--color-correct:#22c55e;--color-incorrect:#ef4444;--color-needs-review:#eab308;--color-bonus:#a855f7;--color-bg:#0f172a;--color-bg-card:#1e293b;--color-bg-elevated:#334155;--color-text:#f1f5f9;--color-text-secondary:#94a3b8;--color-text-on-primary:#fff;--color-text-on-dark:#e2e8f0;--color-border:#475569;--color-border-light:#64748b;--font-display:"Fredoka", system-ui, -apple-system, sans-serif;--font-body:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--duration-fast:.15s;--duration-normal:.3s;--duration-slow:.5s;--duration-score:1.5s;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px #0000004d;--shadow-lg:0 10px 15px #0006;--shadow-glow:0 0 20px #3b82f64d;--shadow-glow-pink:0 0 20px #ec48994d;--shadow-glow-green:0 0 20px #22c55e4d;--focus-ring:0 0 0 3px #3b82f680;--touch-target-min:44px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 80%,#3b82f614 0%,#0000 50%),radial-gradient(circle at 80% 20%,#ec48990f 0%,#0000 50%),radial-gradient(circle,#a855f70a 0%,#0000 50%);position:fixed;inset:0}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--color-text);font-weight:700;line-height:1.2}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}p{margin-bottom:var(--space-4)}a{color:var(--color-primary-light);text-decoration:underline}a:hover{color:var(--color-primary)}:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}button{font-family:var(--font-display);font-size:var(--text-lg);cursor:pointer;border-radius:var(--radius-lg);padding:var(--space-3) var(--space-6);min-height:var(--touch-target-min);min-width:var(--touch-target-min);background-color:var(--color-primary);color:var(--color-text-on-primary);transition:background-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);border:none;font-weight:600}button:hover:not(:disabled){background-color:var(--color-primary-dark);box-shadow:var(--shadow-glow);transform:translateY(-2px)}button:active:not(:disabled){box-shadow:none;transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background-color:var(--color-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-dark);box-shadow:var(--shadow-glow-pink)}.btn-success{background-color:var(--color-correct)}.btn-success:hover:not(:disabled){box-shadow:var(--shadow-glow-green);background-color:#16a34a}.btn-danger{background-color:var(--color-incorrect)}.btn-danger:hover:not(:disabled){background-color:#dc2626}.btn-ghost{color:var(--color-text);border:2px solid var(--color-border);background-color:#0000}.btn-ghost:hover:not(:disabled){background-color:var(--color-bg-elevated);border-color:var(--color-primary);transform:translateY(-1px)}.btn-sm{font-size:var(--text-sm);padding:var(--space-2) var(--space-4);min-height:36px}.btn-lg{font-size:var(--text-xl);padding:var(--space-4) var(--space-8);min-height:56px}input,textarea,select{font-family:var(--font-body);font-size:var(--text-base);padding:var(--space-3) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg-card);color:var(--color-text);min-height:var(--touch-target-min);width:100%;transition:border-color var(--duration-fast), box-shadow var(--duration-fast)}input:focus,textarea:focus,select:focus{border-color:var(--color-primary);box-shadow:var(--focus-ring)}input::placeholder,textarea::placeholder{color:var(--color-text-secondary)}label{margin-bottom:var(--space-2);color:var(--color-text);font-weight:500;display:block}.card{background-color:var(--color-bg-card);border-radius:var(--radius-xl);padding:var(--space-6);border:1px solid var(--color-border);box-shadow:var(--shadow-md)}.card--elevated{background-color:var(--color-bg-elevated);box-shadow:var(--shadow-lg)}.card--glow{box-shadow:var(--shadow-glow);border-color:var(--color-primary)}.panel{background-color:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--space-4);border:1px solid var(--color-border)}.view{padding:var(--space-8);flex-direction:column;align-items:center;width:100%;max-width:1200px;min-height:100vh;margin:0 auto;display:flex}.view--presentation{text-align:center;max-width:100%;padding:var(--space-12);justify-content:center;height:100vh;position:relative;overflow:hidden}.view--player{max-width:480px;padding:var(--space-4)}.view--host{max-width:960px}.question-card{background-color:var(--color-bg-card);border-radius:var(--radius-xl);padding:var(--space-8);border:2px solid var(--color-primary);box-shadow:var(--shadow-glow);text-align:center;width:100%;max-width:700px}.question-card__meta{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:.05em}.question-card__round{color:var(--color-accent-purple);font-weight:600}.question-card__points{color:var(--color-accent-yellow);font-weight:600}.question-card__text{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-text);margin-bottom:var(--space-4);font-weight:700;line-height:1.3}.question-card__media{margin-top:var(--space-4);border-radius:var(--radius-lg);overflow:hidden}.question-card__image{object-fit:contain;border-radius:var(--radius-lg);width:100%;max-height:300px}.error{color:var(--color-incorrect);font-size:var(--text-sm);margin-top:var(--space-2)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-center{text-align:center}.text-start{text-align:start}.flex-center{justify-content:center;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.w-full{width:100%}.game-code-display{text-align:center;padding:var(--space-8)}.game-code-value{font-family:var(--font-display);font-size:var(--text-6xl);letter-spacing:.3em;color:var(--color-accent-yellow);text-shadow:0 0 30px #facc1566;font-weight:700}.game-code-label{font-size:var(--text-xl);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.status-badge{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.05em;font-weight:600;display:inline-block}.status-badge--lobby{background-color:var(--color-primary)}.status-badge--answering{background-color:var(--color-accent-green);color:#000}.status-badge--reviewing{background-color:var(--color-needs-review);color:#000}.status-badge--score_reveal{background-color:var(--color-accent-purple)}.status-badge--game_over{background-color:var(--color-secondary)}.timer{font-family:var(--font-display);font-size:var(--text-4xl);text-align:center;font-weight:700}.timer--low{color:var(--color-incorrect);animation:1s ease-in-out infinite timer-pulse}@keyframes timer-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.player-avatar{border-radius:var(--radius-full);width:40px;height:40px;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:#000;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.player-avatar--disconnected{opacity:.4}.player-avatar--bob{animation:3s ease-in-out infinite avatar-bob}@keyframes avatar-bob{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-6px)rotate(-2deg)}}@media (prefers-reduced-motion:reduce){.player-avatar--bob{animation:none}}.leaderboard{width:100%;max-width:600px;list-style:none}.leaderboard__entry{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background-color:var(--color-bg-card);margin-bottom:var(--space-2);transition:background-color var(--duration-fast), border-color var(--duration-fast);border:1px solid #0000;display:flex}.leaderboard__entry:hover{background-color:var(--color-bg-elevated)}.leaderboard__rank{font-family:var(--font-display);font-size:var(--text-xl);text-align:center;min-width:2.5em;color:var(--color-accent-yellow);font-weight:700}.leaderboard__name{font-size:var(--text-lg);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.leaderboard__score{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary-light);white-space:nowrap;font-weight:700}.leaderboard--dense .leaderboard__entry{padding:var(--space-2) var(--space-3);margin-bottom:var(--space-1);gap:var(--space-2)}.game-code-block{flex-flow:column wrap;justify-content:center;align-items:center;display:flex}.game-code-qr{flex-flow:wrap;justify-content:center;align-items:center;display:flex}.game-code-block--dense,.game-code-block--short{flex-direction:row}.game-code-block--dense .game-code-qr{flex-direction:column}@media (height<=900px){.game-code-block{flex-direction:row}.game-code-block .game-code-qr{flex-direction:column}}.connection-status{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary);display:flex}.connection-dot{border-radius:var(--radius-full);width:8px;height:8px}.connection-dot--connected{background-color:var(--color-correct)}.connection-dot--connecting{background-color:var(--color-accent-yellow)}.connection-dot--disconnected{background-color:var(--color-text-secondary)}.connection-dot--error{background-color:var(--color-incorrect)}.error-boundary{min-height:100vh;padding:var(--space-8);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.error-boundary h1{color:var(--color-incorrect);margin-bottom:var(--space-4)}.error-boundary p{color:var(--color-text-secondary);max-width:400px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.timer--low{animation:none}html{scroll-behavior:auto}}@media (forced-colors:active){button{border:2px solid buttontext}.status-badge,.leaderboard__entry{border:1px solid buttontext}.question-card{border:2px solid buttontext}}@keyframes orb-drift-1{0%,to{transform:translate(0)scale(1)}25%{transform:translate(8%,-12%)scale(1.12)}50%{transform:translate(3%,7%)scale(.94)}75%{transform:translate(-7%,-4%)scale(1.06)}}@keyframes orb-drift-2{0%,to{transform:translate(0)scale(1)}33%{transform:translate(-11%,9%)scale(1.18)}66%{transform:translate(7%,-11%)scale(.88)}}@keyframes orb-drift-3{0%,to{transform:translate(0)scale(1)}50%{transform:translate(-4%,-14%)scale(1.22)}}.presentation-bg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.presentation-bg__grid{background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:80px 80px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(80% 80%,#000 30%,#0000 75%);mask-image:radial-gradient(80% 80%,#000 30%,#0000 75%)}.presentation-bg__orb{filter:blur(120px);opacity:.28;border-radius:50%;position:absolute}.presentation-bg__orb--1{width:75vw;height:75vw;animation:22s ease-in-out infinite orb-drift-1;top:-28%;left:-22%}.presentation-bg__orb--2{width:60vw;height:60vw;animation:28s ease-in-out infinite orb-drift-2;bottom:-24%;right:-20%}.presentation-bg__orb--3{width:45vw;height:45vw;animation:19s ease-in-out infinite orb-drift-3;top:28%;left:36%}@media (width>=1920px){.view--presentation{padding:var(--space-16);--avatar-scale:1.3}.game-code-value{letter-spacing:.35em;font-size:9rem}.view--presentation .leaderboard{max-width:1000px}.view--presentation .leaderboard__entry{padding:var(--space-4) var(--space-8);margin-bottom:var(--space-3)}.view--presentation .leaderboard--dense .leaderboard__entry{padding:var(--space-2) var(--space-4);margin-bottom:var(--space-2)}.view--presentation .leaderboard--dense .leaderboard__rank{font-size:var(--text-xl);min-width:2em}.view--presentation .leaderboard--dense .leaderboard__name,.view--presentation .leaderboard--dense .leaderboard__score{font-size:var(--text-lg)}.view--presentation .leaderboard__rank{font-size:var(--text-3xl);min-width:3em}.view--presentation .leaderboard__name,.view--presentation .leaderboard__score{font-size:var(--text-2xl)}}@media print{body{display:none}body:after{content:"JaneDeck is a live game — please use the screen to play!";text-align:center;padding:2rem;font-size:1.25rem;display:block}}@media (width<=640px){:root{--text-5xl:2.25rem;--text-6xl:3rem}.view{padding:var(--space-4)}.game-code-value{font-size:var(--text-5xl);letter-spacing:.2em}.question-card{padding:var(--space-4)}.question-card__text{font-size:var(--text-2xl)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}}@media (width>=641px) and (width<=1023px){.view--presentation{padding:var(--space-8)}}@media (width>=1024px){.view--presentation{padding:var(--space-16)}.game-code-value{font-size:6rem}}.qm{--qm-ratio:1.3333;--qm-filter:none;--qm-px:1;--qm-vhs-shift:3px;--qm-max-w:100vw;--qm-max-h:40vh;--qm-radius:var(--radius-lg);width:min(var(--qm-max-w), calc(var(--qm-max-h) * var(--qm-ratio)));flex-direction:column;flex:0 auto;align-items:center;max-width:100%;margin:0;display:flex}.qm__frame{width:100%;position:relative}.qm__viewport{aspect-ratio:var(--qm-ratio);border-radius:var(--qm-radius);isolation:isolate;background-color:#000;width:100%;position:relative;overflow:hidden}.qm__img{object-fit:cover;width:100%;height:100%;filter:var(--qm-filter);display:block;position:absolute;top:0;left:0}.qm--sm{--qm-max-w:100vw;--qm-max-h:30vh;--qm-radius:var(--radius-md)}.qm--md{--qm-max-w:340px;--qm-max-h:260px}.qm--lg{--qm-max-w:min(760px, 52vw);--qm-max-h:42vh;--qm-radius:var(--radius-xl)}.qm__fx{pointer-events:none;display:block;position:absolute;inset:0}.qm__fx--grain{mix-blend-mode:overlay;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");background-size:160px 160px}.qm__fx--vignette{background:radial-gradient(#0000 42%,#00000059 72%,#000000c7 100%)}.qm__fx--scanlines{opacity:.85;background-image:repeating-linear-gradient(#00000052 0 1px,#ffffff0a 1px 2px,#0000 2px 4px)}.qm__fx--halftone{mix-blend-mode:color-burn;opacity:.8;background-image:radial-gradient(circle,#000000eb .9px,#0000 1.3px);background-size:4px 4px}.qm--lg .qm__fx--halftone{background-size:6px 6px}.qm--pixelate .qm__img:not(.qm__img--chan){opacity:0}.qm--pixelate .qm__img--chan{display:none}.qm__pixel{width:100%;height:100%;image-rendering:pixelated;filter:var(--qm-filter);display:block;position:absolute;top:0;left:0}.qm__img--chan{mix-blend-mode:screen}.qm--vhs .qm__img--chan-r{left:calc(var(--qm-vhs-shift) * -1)}.qm--vhs .qm__img--chan-b{left:var(--qm-vhs-shift)}.qm--none .qm__viewport{border:1px solid var(--color-border);box-shadow:var(--shadow-md)}.qm--polaroid .qm__frame{background:linear-gradient(160deg,#fff 0%,#f4f1ea 100%);border-radius:3px;padding:4% 4% 0;transform:rotate(-1.4deg);box-shadow:0 12px 28px #00000073,0 2px 4px #0000004d}.qm--polaroid .qm__viewport{--qm-radius:1px;box-shadow:inset 0 0 0 1px #0000001f}.qm--polaroid .qm__caption{font-family:var(--font-display);color:#23201c;text-align:center;word-break:break-word;min-height:2.6em;padding:.85em .5em 1.1em;font-size:.95em;line-height:1.25}.qm--polaroid:not(.qm--captioned) .qm__frame{padding-bottom:16%}.qm--tv .qm__frame{background:linear-gradient(165deg,#4a4a52 0%,#23232a 45%,#131317 100%);border-radius:18px;padding:5% 5% 9%;box-shadow:0 18px 40px #0000008c,inset 0 1px #ffffff2e,inset 0 -2px 6px #0009}.qm--tv .qm__viewport{--qm-radius:14px;box-shadow:inset 0 0 22px #000000d9,inset 0 0 3px #96c8ff80,0 0 0 3px #0a0a0c}.qm--tv .qm__viewport:after{content:"";pointer-events:none;background:linear-gradient(118deg,#ffffff29 0%,#ffffff0a 26%,#fff0 48%);position:absolute;inset:0}.qm--tv .qm__frame:after{content:"";background:var(--color-accent-green);width:8px;height:8px;box-shadow:0 0 8px var(--color-accent-green);border-radius:50%;position:absolute;bottom:3.2%;right:6%}.qm--slide .qm__frame{background:linear-gradient(170deg,#2b2b2e 0%,#171719 100%);border-radius:4px;padding:9% 9% 4%;box-shadow:0 12px 26px #00000080,inset 0 1px #ffffff1a}.qm--slide .qm__viewport{--qm-radius:1px;box-shadow:inset 0 0 0 2px #000c}.qm--slide .qm__caption{color:#1b1a17;font-family:var(--font-mono);letter-spacing:.02em;text-align:center;word-break:break-word;background:#f2f0e9;border-radius:1px;margin-top:6%;padding:.5em .4em;font-size:.7em}.qm--slide:not(.qm--captioned) .qm__frame{padding-bottom:9%}.qm--gallery .qm__frame{background:linear-gradient(135deg,#8a6a2f 0%,#d9b45e 18%,#f2dd9c 32%,#c99b3c 50%,#6f5322 72%,#d1a94c 100%);border-radius:3px;padding:3.5%;box-shadow:0 20px 44px #0009,inset 0 0 0 1px #fff0c866}.qm--gallery .qm__mat{background:#efe9dc;padding:7%;box-shadow:inset 0 2px 10px #00000047}.qm--gallery .qm__viewport{--qm-radius:0px;box-shadow:0 2px 10px #0006}.qm--gallery .qm__caption{color:#2c2213;font-family:var(--font-body);text-align:center;word-break:break-word;background:#efe9dc;padding:.9em .6em .2em;font-size:.78em;font-style:italic}.qm--phone .qm__frame{background:linear-gradient(160deg,#3a3a42 0%,#17171b 40%,#0c0c0f 100%);border-radius:30px;padding:3.2%;box-shadow:0 18px 40px #0000008c,inset 0 1px #fff3}.qm--phone .qm__viewport{--qm-radius:22px}.qm--phone .qm__frame:before{content:"";z-index:2;background:#0a0a0c;border-radius:999px;width:26%;max-width:92px;height:14px;position:absolute;top:5.5%;left:50%;transform:translate(-50%)}.qm--phone .qm__frame:after{content:"";background:#45454e;border-radius:2px;width:3px;height:12%;position:absolute;top:26%;right:-2px}@media (prefers-reduced-motion:reduce){.qm--polaroid .qm__frame{transform:none}}@media (width<=640px){.qm--md,.qm--lg{--qm-max-w:100vw;--qm-max-h:34vh}.qm--phone .qm__frame{border-radius:24px}.qm--phone .qm__viewport{--qm-radius:18px}}.qm-picker{gap:var(--space-2);flex-wrap:wrap;display:flex}.qm-chip{align-items:center;gap:var(--space-2);min-height:36px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);background-color:var(--color-bg-elevated);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;font-weight:600;transition:border-color .15s,color .15s,background-color .15s;display:inline-flex}.qm-chip:hover:not(:disabled){border-color:var(--color-border-light);color:var(--color-text)}.qm-chip--on{border-color:var(--color-primary);color:var(--color-text);background-color:#3b82f62e}.qm-chip:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}.qm-chip:has(input:disabled){opacity:.5;cursor:not-allowed}.qm-dropzone{justify-content:center;align-items:center;gap:var(--space-2);width:100%;min-height:96px;padding:var(--space-4);border:2px dashed var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-bg-elevated);color:var(--color-text-secondary);font-size:var(--text-sm);text-align:center;cursor:pointer;flex-direction:column;transition:border-color .15s,background-color .15s;display:flex}.qm-dropzone:hover:not(:disabled),.qm-dropzone:focus-visible{border-color:var(--color-primary);color:var(--color-text)}.qm-dropzone--active{border-color:var(--color-primary);color:var(--color-text);background-color:#3b82f61f}.qm-dropzone:disabled{opacity:.6;cursor:not-allowed}