@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{font-family:"DM Sans",sans-serif;color:#16151c;background:#f5f0eb;font-synthesis:none;--ink:#17151d;--cream:#f8f3ee;--copper:#ad673a;--line:#ded5cd}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,a{font:inherit}button{cursor:pointer}.eyebrow{font:700 .72rem/1.2 Manrope,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#9c6c4e}.brand{display:flex;flex-direction:column;gap:2px;letter-spacing:.28em;font-family:Manrope,sans-serif}.brand span{font-size:1rem;font-weight:700}.brand small{font-size:.42rem;letter-spacing:.22em}.demo-badge{display:inline-flex;padding:5px 8px;border:1px solid currentColor;border-radius:99px;font-size:.58rem;letter-spacing:.12em}.toast{position:fixed;z-index:30;left:50%;bottom:24px;translate:-50% 0;padding:12px 18px;border-radius:10px;background:#16151c;color:white;box-shadow:0 12px 40px #0003}.toast.error{background:#a92d43}

/* Home */
.home-shell{min-height:100vh;display:grid;place-items:center;padding:30px;overflow:hidden;position:relative;background:radial-gradient(circle at 20% 20%,#f1d6c5 0,transparent 30%),radial-gradient(circle at 80% 75%,#d9b797 0,transparent 27%),#efe5dd}.home-card{position:relative;width:min(760px,100%);padding:50px;border:1px solid #fff8;border-radius:28px;background:#f9f5f0dd;box-shadow:0 40px 100px #63381d1f;backdrop-filter:blur(18px)}.home-card .brand{position:absolute;right:50px;top:50px}.home-card h1{font:400 clamp(3rem,10vw,6.5rem)/.9 Manrope;margin:25px 0}.home-card h1 em{font-style:normal;color:var(--copper)}.lede{font-size:1.08rem;color:#625a56;max-width:480px;line-height:1.6}.view-grid{display:grid;gap:10px;margin-top:38px}.view-link{text-decoration:none;color:inherit;display:grid;grid-template-columns:55px 1fr 30px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:14px;transition:.2s;background:#fff8}.view-link:hover{translate:5px 0;border-color:#b57a55;background:white}.view-link b{font:400 1.5rem Manrope;color:#a56741}.view-link span{display:flex;flex-direction:column}.view-link strong{font-size:1rem}.view-link small{color:#7b7470;margin-top:3px}.view-link i{font-style:normal;font-size:1.3rem}.home-card footer{margin-top:30px;color:#77706b;font-size:.78rem;display:flex;align-items:center;gap:8px}

/* Shared large screen */
.screen-shell{min-height:100vh;background:linear-gradient(135deg,#f9f5f0,#e9ddd3);display:flex;flex-direction:column;overflow:hidden;position:relative}.screen-header{min-height:106px;display:grid;grid-template-columns:180px 1fr 100px;align-items:center;gap:28px;padding:16px 4vw;border-bottom:1px solid #d7cbc2}.team-strip{display:flex;align-items:stretch;justify-content:center;gap:clamp(8px,1.5vw,25px)}.team-score{display:grid;grid-template-columns:15px auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;min-width:90px}.team-dot{width:13px;height:13px;border-radius:50%;background:var(--team);grid-row:1/3;box-shadow:0 0 0 4px color-mix(in srgb,var(--team),transparent 80%)}.team-score span:nth-child(2){font-size:clamp(.58rem,.9vw,.85rem);color:#68605d}.team-score strong{font:700 clamp(1.25rem,2.2vw,2rem) Manrope}.question-count{text-align:right}.question-count small{display:block;font-size:.58rem;letter-spacing:.18em}.question-count strong{font:600 2rem Manrope}.question-count span{font-size:.8rem;color:#8f8580}.question-stage{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,36%);align-items:center;padding:clamp(25px,4vw,70px) 5vw;gap:4vw}.question-content h1{font:500 clamp(2rem,4.1vw,4.7rem)/1.08 Manrope;margin:15px 0 clamp(25px,4vh,50px);max-width:950px;letter-spacing:-.04em}.screen-options{display:grid;gap:12px;max-width:900px}.screen-option{position:relative;min-height:59px;border:1px solid #d8d0cb;border-radius:13px;background:#ffffffaa;display:grid;grid-template-columns:48px minmax(130px,1fr) minmax(70px,180px) 64px;align-items:center;padding:5px 10px;gap:14px;overflow:hidden}.option-letter{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:#fff;font:700 1.1rem Manrope}.option-A .option-letter{background:#2388f5}.option-B .option-letter{background:#ef4774}.option-C .option-letter{background:#7653d8}.option-D .option-letter{background:#86818a}.option-text{font-size:clamp(.82rem,1.3vw,1.08rem)}.shape{justify-self:end;color:#aaa}.result-track{height:10px;border-radius:10px;background:#e8e3df;overflow:hidden}.result-track i{display:block;width:var(--percent);height:100%;border-radius:inherit;background:#b47b58;animation:grow .65s ease-out}.percent{font:700 1rem Manrope;text-align:right}.correct-mark{position:absolute;right:4px;top:3px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#33965f;color:white;font-size:.7rem}.screen-option.is-correct{border-color:#399b65;box-shadow:inset 3px 0 #399b65}.skin-art{align-self:stretch;position:relative;display:grid;place-items:center;min-height:360px}.skin-art div{position:absolute;width:min(31vw,480px);aspect-ratio:1;border-radius:46% 54% 65% 35%/44% 38% 62% 56%;background:radial-gradient(circle at 48% 40%,#f6b99c 0 3%,#d68165 15%,#9f493b 40%,#4c2528 70%);box-shadow:inset 20px 10px 60px #fff3,0 35px 80px #6f342c48;filter:saturate(.8)}.skin-art div:before,.skin-art div:after{content:"";position:absolute;border:1px solid #ffe8db88;border-radius:50%}.skin-art div:before{inset:12%}.skin-art div:after{inset:28%}.skin-art span{position:relative;color:#fff;text-align:center;letter-spacing:.28em;font:400 clamp(1rem,2vw,1.6rem) Manrope;text-shadow:0 3px 14px #0007}.skin-art b{font-size:2.2em}.question-stage figure{margin:0;height:100%;max-height:560px}.question-stage figure img{width:100%;height:100%;object-fit:cover;border-radius:24px}.screen-footer{min-height:100px;background:#17151c;color:#fff;display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;padding:12px 5vw}.screen-footer p{margin:0;font-size:.88rem}.screen-footer .phase-label{text-align:right;font-size:.65rem;letter-spacing:.2em;color:#bdb5b1}.timer{position:relative;width:72px;height:72px;display:grid;place-items:center;justify-self:center}.timer svg{position:absolute;inset:0;rotate:-90deg}.timer circle{fill:none;stroke:#ffffff26;stroke-width:2}.timer .progress{stroke:#e8a170;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:calc(119.4 * (1 - var(--progress)));transition:stroke-dashoffset 1s linear}.timer strong{font:600 1.5rem Manrope}.timer.urgent{color:#ff6f70}.timer.urgent .progress{stroke:#ff6f70}.lobby-screen{padding:35px 5vw;display:grid;grid-template-columns:180px 1fr;grid-template-rows:auto 1fr auto}.lobby-screen>.team-strip{grid-column:2;align-self:start}.lobby-screen>section{grid-column:1/3;text-align:center;align-self:center}.lobby-screen h1{font:500 clamp(3rem,7vw,7rem)/1 Manrope;margin:16px}.lobby-screen section>p:not(.eyebrow){font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.6;color:#6b615c}.join-code{display:inline-flex;flex-direction:column;margin-top:30px;padding:15px 32px;border:1px solid #bd9c87;border-radius:12px}.join-code small{font-size:.55rem;letter-spacing:.2em}.join-code strong{font:700 1.8rem Manrope;letter-spacing:.18em}.lobby-screen>footer{grid-column:1/3;justify-self:center}.pulse,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#47bd75;margin-left:8px;box-shadow:0 0 0 0 #47bd75;animation:pulse 1.7s infinite}

/* Controller */
.controller-shell{min-height:100vh;background:#f3eee9;display:flex;flex-direction:column}.controller-shell>header{display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;border-bottom:1px solid #ddd3cb}.controller-shell>header>div{font-size:.68rem;letter-spacing:.12em;color:#777;display:flex;align-items:center;gap:8px}.controller-card{width:min(700px,calc(100% - 32px));margin:auto;padding:45px;border:1px solid #ded5ce;border-radius:24px;background:#fff;box-shadow:0 22px 60px #5e3a2520}.controller-status{display:flex;justify-content:space-between;align-items:center}.round-chip,.state-chip{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:99px;background:#f0ebe7}.state-open{background:#e6f7ed;color:#187e47}.state-results{background:#f3e8dd;color:#995c37}.controller-card h1{font:500 clamp(1.8rem,4vw,3.2rem)/1.15 Manrope;margin:35px 0;letter-spacing:-.035em;min-height:110px}.controller-metric{border-top:1px solid #e5ddd7;border-bottom:1px solid #e5ddd7;padding:22px 0;display:flex;justify-content:space-between;align-items:end}.controller-metric small{letter-spacing:.15em;color:#8a817c}.controller-metric strong{font:600 2.5rem Manrope}.controller-metric em{font-size:1rem;font-style:normal}.control-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.control-actions button{height:62px;border-radius:12px;border:0;font-weight:700;display:flex;justify-content:space-between;align-items:center;padding:0 20px}.control-actions button:disabled{opacity:.35;cursor:not-allowed}.control-actions .secondary{background:#eee9e5;color:#332f2c}.control-actions .primary{background:#18161d;color:#fff}.control-actions .danger{background:#a93c4b;color:#fff}.text-button{display:block;margin:20px auto 0;border:0;background:none;color:#8b817b;text-decoration:underline;font-size:.76rem}.controller-shell>footer{display:flex;justify-content:center;gap:30px;padding:20px}.controller-shell>footer a{color:#6f625a;font-size:.78rem}

.sheet-import{margin-top:24px;border-top:1px solid #e5ddd7;padding-top:18px}.sheet-import summary{cursor:pointer;font-size:.8rem;color:#6d625c}.sheet-import form{display:grid;gap:12px;margin-top:16px}.sheet-import label{display:grid;gap:5px;font-size:.7rem;color:#756b65}.sheet-import input{height:42px;border:1px solid #d8cec7;border-radius:9px;padding:0 11px;background:#fbf9f7}.sheet-import form button{height:43px;border:0;border-radius:9px;background:#ad673a;color:#fff;font-weight:700}.sheet-import form button:disabled{opacity:.5}.sheet-import small{color:#958b84;font-size:.65rem}
.login-card form{display:grid;gap:14px}.login-card label{display:grid;gap:6px;font-size:.75rem;color:#756b65}.login-card input{height:48px;border:1px solid #d8cec7;border-radius:10px;padding:0 12px}.login-card form button{height:52px;border:0;border-radius:10px;background:#17151d;color:#fff;font-weight:700;display:flex;justify-content:space-between;align-items:center;padding:0 18px}.login-card form button:disabled{opacity:.5}

/* Player */
.player-shell{min-height:100svh;background:#15141c;color:#fff;display:flex;flex-direction:column;max-width:640px;margin:auto;box-shadow:0 0 0 100vmax #0e0d12;clip-path:inset(0 -100vmax)}.player-shell>header{height:80px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14}.player-shell>header button{border:0;background:#ffffff12;color:#fff;width:38px;height:38px;border-radius:50%;font-size:1.2rem}.player-team{display:grid;grid-template-columns:13px auto;grid-template-rows:auto auto;column-gap:9px;align-items:center}.player-team>span{width:11px;height:11px;border-radius:50%;background:var(--team);grid-row:1/3;box-shadow:0 0 0 4px color-mix(in srgb,var(--team),transparent 80%)}.player-team small{font-size:.5rem;letter-spacing:.18em;color:#99929f}.player-team strong{font-size:.9rem}.player-shell>section{flex:1;padding:24px 22px}.player-shell>footer{text-align:center;color:#6f6976;font-size:.55rem;letter-spacing:.2em;padding:18px}.team-picker{background:#f3ece6;color:#17151d}.team-picker>header{border-color:#d8cec6}.team-picker>section{padding-top:50px}.team-picker h1{font:600 clamp(2.4rem,12vw,4.2rem)/1.02 Manrope;margin:12px 0;letter-spacing:-.055em}.team-picker section>p:not(.eyebrow){color:#786e68}.team-picker-list{display:grid;gap:10px;margin-top:35px}.team-picker-list button{display:grid;grid-template-columns:34px 1fr 20px;align-items:center;text-align:left;gap:12px;min-height:60px;padding:10px 16px;border-radius:13px;border:1px solid #d7cec6;background:#fff;color:#17151d;box-shadow:0 5px 15px #50331b0c}.team-picker-list button:active{scale:.98}.team-picker-list button span{width:28px;height:28px;border-radius:50%;background:var(--team);box-shadow:inset 0 0 0 4px #ffffff44}.team-picker-list button i{font-style:normal}.team-picker>footer{color:#827871}.mobile-progress{height:4px;background:#ffffff14;border-radius:5px;overflow:hidden;margin-bottom:18px}.mobile-progress i{display:block;height:100%;width:calc(var(--progress) * 100%);background:var(--team);transition:width 1s linear}.mobile-heading{display:flex;justify-content:space-between;font-size:.72rem;color:#9993a0;text-transform:uppercase;letter-spacing:.08em}.mobile-heading strong{color:#fff}.player-question h1{font:600 clamp(1.55rem,7vw,2.5rem)/1.15 Manrope;letter-spacing:-.04em;margin:25px 0 30px}.answer-grid{display:grid;gap:12px}.answer-grid button{position:relative;display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:12px;min-height:74px;padding:10px 15px;border:1px solid #ffffff1f;border-radius:14px;color:#fff;text-align:left;background:#ffffff09;transition:.15s}.answer-grid button:active{scale:.98}.answer-grid button:disabled{opacity:.45}.answer-grid button>span{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;font:700 1.15rem Manrope}.answer-grid button strong{font-size:.92rem;line-height:1.25}.answer-grid button i{font-style:normal;text-align:center;opacity:.6}.answer-A>span{background:#2388f5}.answer-B>span{background:#ef4774}.answer-C>span{background:#7653d8}.answer-D>span{background:#77727c}.answer-grid button.sending{border-color:var(--team);animation:loading .8s infinite alternate}.player-wait,.answer-sent{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.player-wait h1,.answer-sent h1{font:600 clamp(2rem,10vw,3.4rem)/1.05 Manrope;letter-spacing:-.05em;margin:12px 0}.player-wait>p:not(.eyebrow),.answer-sent>p:not(.eyebrow){color:#aaa4ae;line-height:1.6}.wait-orbit{width:110px;height:110px;border:1px solid #ffffff26;border-radius:50%;margin-bottom:35px;position:relative;animation:spin 5s linear infinite}.wait-orbit:before{content:"";position:absolute;inset:18px;border:1px solid #ffffff12;border-radius:50%}.wait-orbit span{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--team);top:7px;left:48px;box-shadow:0 0 18px var(--team)}.sent-icon{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--team),#15141c 45%);font:600 2.2rem Manrope;margin-bottom:30px}.answer-sent small{color:#77717d;margin-top:20px}

@keyframes grow{from{width:0}}@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}}@keyframes spin{to{rotate:360deg}}@keyframes loading{to{background:#ffffff1a}}
@media(max-width:850px){.screen-header{grid-template-columns:130px 1fr 70px;gap:10px;padding-inline:20px}.team-score span:nth-child(2){display:none}.team-score{min-width:auto;grid-template-columns:15px auto}.question-stage{grid-template-columns:1fr}.skin-art,.question-stage figure{display:none}.screen-option{grid-template-columns:42px minmax(100px,1fr) minmax(60px,120px) 45px}.home-card{padding:30px}.home-card .brand{position:static;margin-bottom:45px}.lobby-screen{grid-template-columns:1fr}.lobby-screen>.team-strip{grid-column:1;grid-row:2}.lobby-screen>section{grid-column:1}.lobby-screen>footer{grid-column:1}}
@media(max-width:520px){.home-shell{padding:0}.home-card{min-height:100vh;border-radius:0;padding:28px 20px}.view-link{grid-template-columns:42px 1fr 20px;padding:15px}.controller-card{padding:28px 22px}.controller-card h1{min-height:100px}.control-actions{grid-template-columns:1fr}.controller-shell>header{padding:18px 20px}.controller-shell>header .brand+div{font-size:0}.controller-shell>footer{gap:18px}.player-shell{max-width:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}