:root{--ink:#173b3a;--muted:#687b78;--cream:#fbf8ef;--paper:#fff;--pink:#087f78;--pink-dark:#066861;--violet:#577b76;--mint:#a9ddd2;--yellow:#d9ad55;--line:#e6e1d6;--shadow:0 18px 50px rgba(26,66,61,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif;background-image:radial-gradient(circle at 11% 9%,rgba(255,209,102,.18),transparent 20%),radial-gradient(circle at 91% 24%,rgba(125,92,255,.08),transparent 19%);min-height:100vh}.shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}button,input,select{font:inherit}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(31,27,45,.08)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:18px;letter-spacing:.08em;text-decoration:none}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:var(--ink);color:#fff;transform:rotate(-4deg);letter-spacing:-.08em}.top-actions{display:flex;gap:12px;align-items:center}.room-pill{border:1px solid var(--line);background:white;border-radius:99px;height:42px;padding:0 15px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer}.room-pill strong{color:var(--ink);font-size:13px}.room-pill svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.8}.live-dot{width:8px;height:8px;border-radius:50%;background:#27c587;box-shadow:0 0 0 4px rgba(39,197,135,.13)}.avatar-button{border:0;background:var(--pink);color:#fff;width:43px;height:43px;border-radius:50%;font-weight:800;position:relative;cursor:pointer}.avatar-button span{position:absolute;top:31px;right:-5px;background:var(--ink);color:white;font-size:7px;padding:3px 5px;border-radius:5px;letter-spacing:.08em}.hero{min-height:410px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;padding-block:46px 55px}.eyebrow,.category{display:inline-flex;color:var(--pink-dark);background:#ffe8ed;padding:8px 12px;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.08em}.hero h1{font-family:"Fraunces",serif;font-size:clamp(48px,6vw,75px);line-height:.91;letter-spacing:-.045em;margin:20px 0 18px}.hero h1 em{color:var(--pink);font-style:italic}.hero p{max-width:570px;color:var(--muted);font-size:17px;line-height:1.65;margin:0}.hero-actions{display:flex;gap:12px;margin-top:28px}.primary-button,.secondary-button,.outline-button{height:49px;border-radius:13px;padding:0 21px;border:0;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:15px}.primary-button{background:var(--ink);color:#fff;box-shadow:0 8px 18px rgba(31,27,45,.17)}.primary-button:hover{transform:translateY(-2px)}.primary-button span{font-size:20px}.secondary-button{border:1px solid var(--line);background:#fff;color:var(--ink)}.secondary-button svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.8}.portrait-wrap{height:300px;position:relative;width:360px;justify-self:end}.portrait-frame{position:absolute;right:35px;top:0;width:248px;height:282px;padding:11px;background:white;border-radius:45% 45% 42% 42% / 37% 37% 48% 48%;transform:rotate(4deg);box-shadow:var(--shadow)}.portrait-art{height:100%;overflow:hidden;position:relative;border-radius:inherit;background:linear-gradient(145deg,#8b6fe8,#c6b8ff 65%,#f0e9ff)}.portrait-art:after{content:"";position:absolute;width:120%;height:75px;bottom:-28px;left:-10%;background:#ffbdc9;border-radius:50%}.face{position:absolute;width:87px;height:116px;border-radius:44% 44% 48% 48%;background:#d98f65;top:79px;left:70px;z-index:3;box-shadow:inset 10px 0 rgba(141,67,38,.12)}.hair{position:absolute;width:137px;height:180px;border-radius:49% 51% 25% 26%;background:#331c1c;top:52px;left:45px;z-index:2}.face:after,.face:before{content:"";position:absolute;top:51px;width:7px;height:8px;border-radius:50%;background:#3f251f}.face:before{left:22px}.face:after{right:22px}.smile{position:absolute;z-index:5;top:136px;left:102px;color:#7e3b35;font-weight:bold;font-size:22px}.body-shape{position:absolute;z-index:1;width:180px;height:100px;background:var(--pink);bottom:-4px;left:22px;border-radius:50% 50% 0 0}.party-hat{position:absolute;top:15px;left:93px;width:0;height:0;border-left:32px solid transparent;border-right:32px solid transparent;border-bottom:78px solid var(--yellow);z-index:4;color:var(--pink);font-size:17px;text-indent:-5px}.party-hat i{position:absolute;width:72px;height:8px;background:var(--pink);top:72px;left:-36px;border-radius:99px}.age-badge{position:absolute;right:0;bottom:5px;width:91px;height:91px;border-radius:50%;background:var(--yellow);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(8deg);box-shadow:0 5px 0 #e7ad35;border:3px solid white}.age-badge span{font-size:9px;font-weight:800}.age-badge strong{font-family:"Fraunces";font-size:40px;line-height:.9}.tape{position:absolute;width:65px;height:20px;background:rgba(255,238,180,.8);top:6px;right:126px;transform:rotate(-12deg);z-index:6}.sparkle{position:absolute;color:var(--pink);font-size:28px}.s1{left:25px;top:30px}.s2{right:12px;top:58px;color:var(--violet);font-size:18px}.game-shell{margin-bottom:40px}.game-tabs{height:70px;background:white;border:1px solid var(--line);border-radius:18px 18px 0 0;display:flex;align-items:stretch;padding:0 21px;gap:8px}.game-tab{border:0;background:transparent;color:#948e9d;padding:0 18px;font-weight:700;position:relative;cursor:pointer}.game-tab span{font-size:17px;margin-right:6px}.game-tab b{font-size:8px;background:var(--pink);color:white;border-radius:5px;padding:4px 6px;margin-left:5px;letter-spacing:.06em}.game-tab.active{color:var(--ink)}.game-tab.active:after{content:"";height:3px;border-radius:3px 3px 0 0;background:var(--pink);position:absolute;left:12px;right:12px;bottom:0}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:1px;background:var(--line);border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;overflow:hidden;box-shadow:var(--shadow)}.play-card{background:white;padding:35px 42px;min-height:530px}.question-meta{display:flex;align-items:center;gap:15px;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.07em}.progress-track{width:130px;height:5px;background:#eee9e5;border-radius:9px}.progress-track i{display:block;width:40%;height:100%;background:var(--pink);border-radius:9px}.timer{margin-left:auto;width:57px;height:57px;border:3px solid #f2b55a;border-radius:50%;display:grid;place-content:center;text-align:center;position:relative}.timer svg{position:absolute;width:16px;left:-24px;top:18px;fill:none;stroke:var(--muted);stroke-width:1.7}.timer strong{font-size:18px;line-height:16px}.timer span{font-size:7px}.game-view{display:none}.game-view.active{display:block}.category{margin-top:26px;padding:6px 10px}.category.blue{color:#5243b5;background:#eeeafe}.category.yellow{color:#8a5c00;background:#fff2c3}.play-card h2{font-family:"Fraunces";font-size:clamp(27px,3vw,38px);line-height:1.16;margin:16px 0 27px;max-width:640px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answers button,.photo-answers button{background:#fff;border:1px solid var(--line);border-radius:13px;min-height:60px;padding:10px 14px;text-align:left;font-weight:700;color:var(--ink);cursor:pointer;transition:.18s}.answers button:hover,.answers button.selected{border-color:var(--pink);background:#fff3f6;transform:translateY(-1px)}.answers button.selected{box-shadow:0 0 0 2px rgba(255,93,125,.15)}.answers button.correct{border-color:#23b37c;background:#e8fbf4}.answers button span{display:inline-grid;place-items:center;width:32px;height:32px;background:#f5f1ee;border-radius:9px;margin-right:12px}.answer-footer{display:flex;justify-content:space-between;margin-top:22px;color:var(--muted);font-size:12px}.answer-footer span{color:var(--ink);font-weight:600}.score-card{background:#f8f5f1;padding:31px 25px}.score-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:19px}.score-heading span{font-size:9px;font-weight:800;color:var(--pink);letter-spacing:.1em}.score-heading h3{font-family:"Fraunces";font-size:25px;margin:4px 0}.score-heading .updated{color:#817b86;background:#fff;padding:7px 8px;border-radius:7px;letter-spacing:0}.updated i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#29be83;margin-right:5px}.podium{display:flex;flex-direction:column;gap:7px}.podium-row{height:66px;background:white;border-radius:12px;display:grid;grid-template-columns:20px 42px 1fr auto;gap:9px;align-items:center;padding:9px 11px;border:1px solid transparent}.podium-row.first{border-color:#ffc3d0;background:#fff9fa}.podium-row>b{font-family:"Fraunces";color:#9b94a3;text-align:center}.podium-row.first>b{color:var(--pink);font-size:20px}.player{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;font-size:20px}.player.pink{background:#ffd1db}.player.mint{background:#c8f1e5}.player.yellow{background:#ffe6a8}.podium-row span{min-width:0}.podium-row strong,.podium-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.podium-row strong{font-size:12px}.podium-row small{font-size:9px;color:#9c96a1;margin-top:3px}.podium-row em{font-style:normal;font-size:12px;font-weight:800}.your-score{background:var(--ink);color:#fff;border-radius:15px;margin-top:14px;padding:17px 19px;display:grid;grid-template-columns:1fr auto;align-items:end}.your-score>span{grid-column:1/-1;color:#bbb5c4;font-size:9px;letter-spacing:.1em;font-weight:700}.your-score strong{font-family:"Fraunces";font-size:27px;margin-top:4px}.your-score strong small{font-family:"DM Sans";font-size:9px}.your-score em{font-size:9px;color:#83e0c1;font-style:normal;font-weight:700}.reaction-panel{margin-top:24px}.reaction-panel>span{display:block;font-size:9px;color:#928c98;font-weight:800;letter-spacing:.1em;margin-bottom:10px}.reaction-panel div{display:flex;gap:8px}.reaction-panel button{border:1px solid var(--line);background:#fff;border-radius:10px;width:42px;height:38px;font-size:18px;cursor:pointer}.reaction-panel button:hover{transform:scale(1.1)}.mystery-photo{height:220px;max-width:450px;margin:auto;padding:10px;background:#fff;box-shadow:0 12px 30px rgba(38,30,50,.16);transform:rotate(-1deg);position:relative}.photo-scene{height:100%;background:linear-gradient(#91d9e9 0 55%,#77bd72 55%);display:grid;place-items:center;position:relative;overflow:hidden}.photo-scene b{font-family:"Fraunces";font-size:100px;color:white;text-shadow:0 8px 20px #356c70}.photo-scene span{position:absolute;right:20px;top:14px;color:#ffe272;font-size:38px}.photo-scene i{position:absolute;bottom:12px;left:25px;font-size:50px}.photo-tape{position:absolute;width:80px;height:23px;background:rgba(255,235,173,.82);top:-12px;left:40%;transform:rotate(2deg)}.photo-answers{display:flex;gap:9px;margin-top:28px}.photo-answers button{flex:1;text-align:center}.bingo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bingo-grid button{aspect-ratio:1.35;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px;font-size:11px;font-weight:700;color:var(--ink);cursor:pointer}.bingo-grid button.active{background:var(--pink);color:white;border-color:var(--pink);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}footer{display:flex;justify-content:space-between;padding-block:0 35px;color:#938d9b;font-size:11px}footer b{color:var(--pink)}.drawer-backdrop{position:fixed;inset:0;background:rgba(21,15,30,.3);backdrop-filter:blur(3px);z-index:20;opacity:0;pointer-events:none;transition:.25s}.drawer-backdrop.open{opacity:1;pointer-events:auto}.host-drawer{position:fixed;z-index:21;right:0;top:0;height:100%;width:min(420px,100%);background:#fff;padding:30px;transform:translateX(100%);transition:.3s ease;box-shadow:-20px 0 60px rgba(24,15,36,.16);overflow-y:auto}.host-drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:start}.drawer-head span,.host-section>span{font-size:9px;color:var(--pink);font-weight:800;letter-spacing:.12em}.drawer-head h2{font-family:"Fraunces";font-size:31px;margin:3px 0}.drawer-head button{border:0;background:#f5f1ee;width:35px;height:35px;border-radius:50%;font-size:24px;cursor:pointer}.host-status{display:flex;align-items:center;gap:14px;background:#eafaf4;border-radius:13px;padding:14px;margin:23px 0}.host-status div{flex:1}.host-status strong,.host-status small{display:block}.host-status strong{font-size:13px}.host-status small{font-size:10px;color:#6d8b81;margin-top:2px}.host-status button{background:white;border:0;border-radius:8px;padding:8px 12px;font-size:11px;font-weight:700}.host-drawer label,.theme-control>span{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-top:18px}.host-drawer input,.host-drawer select{display:block;width:100%;height:46px;border:1px solid var(--line);border-radius:10px;margin-top:7px;padding:0 12px;background:white;color:var(--ink);font-weight:600}.theme-control>div{display:flex;gap:9px;margin-top:9px}.swatch{width:34px;height:34px;border-radius:50%;background:var(--swatch);border:3px solid white;box-shadow:0 0 0 1px #ddd;cursor:pointer}.swatch.active{box-shadow:0 0 0 2px var(--swatch)}.host-section{margin:28px 0 16px}.next-question{display:flex;gap:12px;align-items:center;background:#f8f5f1;padding:14px;border-radius:13px;margin-top:8px}.next-question>b{font-family:"Fraunces";font-size:23px;color:var(--pink)}.next-question strong,.next-question small{display:block}.next-question strong{font-size:12px}.next-question small{font-size:9px;color:var(--muted);margin-top:4px}.full{width:100%}.outline-button{width:100%;background:white;border:1px solid var(--line);margin-top:9px}.toast{position:fixed;left:50%;bottom:25px;z-index:30;transform:translate(-50%,100px);opacity:0;background:var(--ink);color:white;padding:12px 18px;border-radius:12px;display:flex;gap:9px;align-items:center;box-shadow:var(--shadow);transition:.3s;font-size:12px}.toast.show{transform:translate(-50%,0);opacity:1}.toast span{color:#70dbb6}.reaction-fly{position:fixed;z-index:50;font-size:30px;pointer-events:none;animation:fly 1.4s ease-out forwards}@keyframes fly{to{transform:translateY(-180px) rotate(20deg) scale(1.6);opacity:0}}
@media(max-width:850px){.hero{grid-template-columns:1fr .6fr}.portrait-wrap{transform:scale(.78);transform-origin:right center}.game-layout{grid-template-columns:1fr}.score-card{border-top:1px solid var(--line)}.podium{display:grid;grid-template-columns:repeat(3,1fr)}.podium-row{height:auto;grid-template-columns:1fr;text-align:center;justify-items:center;padding:13px 8px}.podium-row.first{order:-1}.podium-row span{max-width:100%}.your-score{max-width:350px}.reaction-panel{position:absolute;margin-top:-90px;margin-left:380px}}
@media(max-width:640px){.shell{width:min(100% - 24px,1180px)}.topbar{height:68px}.room-pill{padding:0 11px}.room-pill>span:first-child,.room-pill{font-size:0}.room-pill strong{font-size:11px}.hero{display:block;padding:34px 0 38px;min-height:auto}.hero h1{font-size:48px}.hero p{font-size:14px;max-width:90%}.portrait-wrap{display:none}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.primary-button,.secondary-button{padding:0 13px}.game-shell{width:100%}.game-tabs{overflow-x:auto;border-radius:0;padding:0 9px;height:61px}.game-tab{white-space:nowrap;padding:0 12px;font-size:12px}.game-layout{border-radius:0;border-left:0;border-right:0}.play-card{padding:25px 18px;min-height:520px}.question-meta{gap:9px}.progress-track{width:75px}.timer{width:50px;height:50px}.timer svg{display:none}.play-card h2{font-size:29px;margin-block:14px 22px}.answers{grid-template-columns:1fr}.answers button{min-height:55px}.answer-footer small{display:none}.score-card{padding:25px 18px}.score-heading{margin-bottom:15px}.podium{display:flex}.podium-row{height:62px;display:grid;grid-template-columns:20px 42px 1fr auto;text-align:left;justify-items:stretch;padding:8px 10px}.podium-row.first{order:0}.your-score{max-width:none}.reaction-panel{position:static;margin:22px 0 0}.reaction-panel div{justify-content:space-between}.reaction-panel button{width:17%}.photo-answers{flex-direction:column}.photo-answers button{min-height:45px}.bingo-grid button{font-size:9px;padding:5px;aspect-ratio:1}.host-drawer{padding:24px 20px}footer{padding:20px 0 28px}footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.join-backdrop{position:fixed;inset:0;z-index:60;background:rgba(24,17,33,.48);backdrop-filter:blur(5px);display:none;place-items:center;padding:20px}.join-backdrop.open{display:grid}.join-card{width:min(440px,100%);background:white;border-radius:22px;padding:35px;box-shadow:0 30px 80px rgba(22,15,30,.22);position:relative}.join-card h2{font:800 35px/1.1 Fraunces;margin:18px 0 10px}.join-card>p{color:var(--muted);font-size:13px;line-height:1.55}.join-card label{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-top:16px}.join-card input{display:block;width:100%;height:48px;border:1px solid var(--line);border-radius:11px;margin-top:7px;padding:0 13px;color:var(--ink)}.join-close{position:absolute;right:18px;top:18px;border:0;background:#f5f1ee;border-radius:50%;width:34px;height:34px;font-size:21px;cursor:pointer}.join-error{color:#d23856!important;min-height:18px;margin:8px 0!important}.empty-state{color:var(--muted);font-size:12px}.answers button:disabled,.photo-answers button:disabled{cursor:default;opacity:.75}
@media(max-width:500px){.join-card{padding:28px 20px}.join-card h2{font-size:31px}}
.bingo-progress{display:flex;justify-content:space-between;align-items:center;margin:-14px 0 14px;color:var(--muted);font-size:10px}.bingo-progress span{font-weight:800;color:var(--pink)}.bingo-grid button{transition:transform .16s,background .16s}.bingo-grid button:active{transform:scale(.96)}
.ravin-portrait{background:linear-gradient(145deg,#477c76,#9bc7bc 62%,#e4eee8)}.ravin-portrait .hair{width:105px;height:70px;left:61px;top:61px;border-radius:50% 50% 25% 25%;background:linear-gradient(90deg,#e7e7df,#a9aaa5,#e6e5dc);z-index:4}.ravin-portrait .face{width:98px;height:121px;left:65px;top:83px;border-radius:42% 42% 46% 46%;background:#b87550}.ravin-portrait .face:before,.ravin-portrait .face:after{top:50px}.ravin-portrait .smile{left:105px;top:145px}.ravin-portrait .body-shape{background:#173b3a}.ravin-portrait .party-hat{border-bottom-color:#d9ad55}.ravin-portrait .party-hat i{background:#087f78}.age-badge{background:#d9ad55;box-shadow:0 5px 0 #b88b34}.portrait-frame{border-radius:42% 42% 38% 38% / 33% 33% 45% 45%}.hero h1 em{color:#087f78}.eyebrow,.category{background:#e1f1ed;color:#066861}