@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap";:root{--color-bg:#0f1117;--color-surface:#1a1d27;--color-surface-2:#22263a;--color-border:#ffffff14;--color-border-soft:#ffffff0d;--color-primary:#9560f0;--color-primary-dim:#7632ec;--color-accent:#fcb336;--color-accent-dim:#fba004;--color-success:#21c45d;--color-success-dim:#1a9948;--color-danger:#f04438;--color-text:#f3f4f7;--color-text-soft:#98a1b3;--color-text-muted:#676f7e;--grad-primary:linear-gradient(135deg, #9560f0, #cf3cdd);--grad-accent:linear-gradient(135deg, #fcb336, #f9681f);--grad-success:linear-gradient(135deg, #21c45d, #24a887);--grad-bg:linear-gradient(160deg, #0f1117 0%, #141824 100%);--font-display:"Nunito", sans-serif;--font-body:"Nunito Sans", sans-serif;--text-xs:clamp(.7rem, 2vw, .75rem);--text-sm:clamp(.8rem, 2.5vw, .875rem);--text-base:clamp(.9rem, 3vw, 1rem);--text-md:clamp(1rem, 3.5vw, 1.125rem);--text-lg:clamp(1.1rem, 4vw, 1.25rem);--text-xl:clamp(1.3rem, 5vw, 1.5rem);--text-2xl:clamp(1.6rem, 6vw, 1.875rem);--text-3xl:clamp(2rem, 8vw, 2.5rem);--text-4xl:clamp(2.5rem, 10vw, 3.25rem);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:8px;--radius:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--shadow-sm:0 1px 3px #0006;--shadow:0 4px 16px #00000080;--shadow-lg:0 8px 32px #0009;--shadow-glow-primary:0 0 24px #9560f059;--shadow-glow-accent:0 0 24px #fcb33666;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--transition-bounce:.3s cubic-bezier(.34, 1.56, .64, 1);--max-width:430px;--header-h:56px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;height:100%}body{min-height:100%;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--grad-bg);-webkit-font-smoothing:antialiased;background-attachment:fixed;font-weight:400;line-height:1.5;overflow-x:hidden}#root{flex-direction:column;align-items:center;min-height:100dvh;display:flex}.app-shell{width:100%;max-width:var(--max-width);flex-direction:column;min-height:100dvh;display:flex;position:relative;overflow:hidden}.screen{padding:var(--space-6) var(--space-5);flex-direction:column;flex:1;animation:.25s forwards screen-enter;display:flex}@keyframes screen-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;font-weight:800;line-height:1.2}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.text-muted{color:var(--color-text-muted)}.text-soft{color:var(--color-text-soft)}.text-center{text-align:center}.font-display{font-family:var(--font-display);font-weight:800}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:800;font-size:var(--text-md);padding:var(--space-4) var(--space-6);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-bounce);-webkit-user-select:none;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;border:none;line-height:1;display:inline-flex;position:relative;overflow:hidden}.btn:active{transform:scale(.95)}.btn-full{width:100%}.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:0 4px 20px #9560f073}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 28px #9560f099}.btn-primary:active{transform:scale(.96)translateY(0);box-shadow:0 2px 12px #9560f059}.btn-accent{background:var(--grad-accent);color:#1a1000;box-shadow:0 4px 20px #fcb33666}.btn-accent:hover{transform:translateY(-1px);box-shadow:0 6px 28px #fcb3368c}.btn-accent:active{transform:scale(.96)translateY(0)}.btn-success{background:var(--grad-success);color:#fff;box-shadow:0 4px 20px #21c45d66}.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 28px #21c45d8c}.btn-ghost{color:var(--color-text-soft);border:2px solid var(--color-border);background:0 0}.btn-ghost:hover{background:var(--color-surface);color:var(--color-text);border-color:#ffffff26}.btn-outline{color:var(--color-primary);border:2px solid var(--color-primary);background:0 0}.btn-outline:hover{background:#9560f01a}.btn-sm{font-size:var(--text-sm);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg)}.btn-lg{font-size:var(--text-xl);padding:var(--space-5) var(--space-8)}.btn-xl{font-size:var(--text-2xl);padding:var(--space-6) var(--space-10)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none!important;transform:none!important}.input-group{gap:var(--space-2);flex-direction:column;display:flex}.input-label{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--color-text-soft);letter-spacing:.04em;text-transform:uppercase}.input{width:100%;padding:var(--space-4) var(--space-5);font-family:var(--font-body);font-size:var(--text-md);color:var(--color-text);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-fast);caret-color:var(--color-primary);outline:none;font-weight:600}.input::placeholder{color:var(--color-text-muted);font-weight:400}.input:focus{border-color:var(--color-primary);background:var(--color-surface-2);box-shadow:0 0 0 3px #9560f026}.input-answer{padding:var(--space-5) var(--space-6);font-size:var(--text-xl);font-family:var(--font-display);text-align:center;border-radius:var(--radius-xl);font-weight:700}.input-answer:focus{box-shadow:0 0 0 4px #9560f033}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}.card-elevated{background:var(--color-surface-2);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow);border:1px solid #ffffff1a}.card-glow{background:var(--color-surface-2);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-glow-primary);border:1px solid #9560f04d}.game-logo{font-family:var(--font-display);font-weight:900;font-size:var(--text-4xl);letter-spacing:-.03em;background:var(--grad-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.game-logo-sm{font-size:var(--text-2xl)}.game-code{font-family:var(--font-display);font-weight:900;font-size:var(--text-4xl);letter-spacing:.15em;color:var(--color-accent);text-align:center;text-shadow:var(--shadow-glow-accent);cursor:pointer;transition:all var(--transition)}.game-code:hover{transform:scale(1.03)}.game-code:active{transform:scale(.98)}.player-list{gap:var(--space-2);flex-direction:column;display:flex}.player-item{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-fast);animation:player-enter .3s var(--transition-bounce) forwards;display:flex}@keyframes player-enter{0%{opacity:0;transform:translate(-16px)scale(.96)}to{opacity:1;transform:translate(0)scale(1)}}.player-avatar{background:var(--grad-primary);width:36px;height:36px;font-family:var(--font-display);font-weight:900;font-size:var(--text-sm);color:#fff;text-transform:uppercase;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.player-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);flex:1}.player-badge{font-size:var(--text-xs);font-weight:700;font-family:var(--font-display);padding:2px var(--space-2);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em}.badge-host{color:var(--color-accent);background:#fcb33626;border:1px solid #fcb3364d}.badge-connected{color:var(--color-success);background:#21c45d26}.question-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-6);text-align:center;position:relative;overflow:hidden}.question-card:before{content:"";background:var(--grad-primary);height:3px;position:absolute;top:0;left:0;right:0}.question-text{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-text);letter-spacing:-.01em;font-weight:900;line-height:1.3}.round-badge{align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-4);background:#9560f01f;display:inline-flex}.answer-progress{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.progress-bar-wrap{background:var(--color-surface);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:var(--grad-success);border-radius:var(--radius-full);height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.progress-text{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);color:var(--color-text-soft)}.progress-text span{color:var(--color-text);font-size:var(--text-xl)}.result-item{align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition);display:flex}.result-item.is-winner{background:#fcb33614;border-color:#fcb33659;box-shadow:0 4px 20px #fcb33626}.result-answer{font-family:var(--font-display);font-weight:800;font-size:var(--text-md);flex:1}.result-count{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);color:var(--color-accent)}.result-bar{background:var(--grad-accent);border-radius:var(--radius-full);height:6px;transition:width .6s cubic-bezier(.4,0,.2,1)}.winner-announce{text-align:center;padding:var(--space-6);border-radius:var(--radius-xl);background:linear-gradient(135deg,#fcb3361f,#9560f01f);border:1px solid #fcb33640}.winner-label{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-2);font-weight:800}.winner-text{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-text);letter-spacing:-.02em;font-weight:900}.winner-sub{font-size:var(--text-sm);color:var(--color-text-soft);margin-top:var(--space-2)}.score-item{align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);transition:all var(--transition);display:flex}.score-rank{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);text-align:center;width:32px}.score-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);flex:1}.score-points{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);color:var(--color-accent)}.rank-1{background:#fcb3361f;border:1px solid #fcb3364d}.rank-2{background:#f3f4f70f;border:1px solid #ffffff1f}.rank-3{background:#e87d3014;border:1px solid #e87d3040}.timer-ring{border:4px solid var(--color-border);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;display:flex;position:relative}.timer-ring.urgent{border-color:var(--color-danger);animation:1s infinite timer-pulse}@keyframes timer-pulse{0%,to{box-shadow:0 0 #f0443880}50%{box-shadow:0 0 0 10px #f0443800}}.timer-number{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900}.toast{bottom:calc(var(--space-6) + env(safe-area-inset-bottom));background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-6);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);white-space:nowrap;box-shadow:var(--shadow-lg);z-index:100;transition:transform var(--transition-bounce);position:fixed;left:50%;transform:translate(-50%)translateY(100px)}.toast.show{transform:translate(-50%)translateY(0)}.dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.dot-online{background:var(--color-success);animation:2s infinite pulse-dot;box-shadow:0 0 0 2px #21c45d40}@keyframes pulse-dot{0%,to{box-shadow:0 0 0 2px #21c45d40}50%{box-shadow:0 0 0 5px #21c45d14}}.divider{background:var(--color-border);height:1px;margin:var(--space-4) 0;border:none}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}.flex-1{flex:1}.w-full{width:100%}.mt-auto{margin-top:auto}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:40px;height:40px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen{justify-content:center;align-items:center;gap:var(--space-4);min-height:100dvh;color:var(--color-text-soft);font-family:var(--font-display);flex-direction:column;font-weight:700;display:flex}.answer-sent{justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-10) var(--space-6);text-align:center;flex-direction:column;display:flex}.checkmark-circle{background:var(--grad-success);width:72px;height:72px;animation:pop-in .4s var(--transition-bounce) forwards;border-radius:50%;justify-content:center;align-items:center;font-size:36px;display:flex;box-shadow:0 8px 24px #21c45d73}@keyframes pop-in{0%{opacity:0;transform:scale(0)rotate(-15deg)}70%{transform:scale(1.15)rotate(5deg)}to{opacity:1;transform:scale(1)rotate(0)}}.select-group{gap:var(--space-2);flex-wrap:wrap;display:flex}.select-chip{min-width:60px;padding:var(--space-3) var(--space-4);text-align:center;font-family:var(--font-display);font-weight:800;font-size:var(--text-md);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-soft);-webkit-user-select:none;user-select:none;flex:1}.select-chip:hover{border-color:var(--color-primary);color:var(--color-text)}.select-chip.selected{border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary);background:#9560f01f}.screen{padding-bottom:max(var(--space-6), env(safe-area-inset-bottom));padding-top:max(var(--space-6), env(safe-area-inset-top))}@keyframes reveal-answer{0%{opacity:0;transform:translateY(20px)scale(.95)}60%{transform:translateY(-4px)scale(1.02)}to{opacity:1;transform:translateY(0)scale(1)}}.reveal-stagger>*{animation:reveal-answer .4s var(--transition-bounce) both}.reveal-stagger>:first-child{animation-delay:0s}.reveal-stagger>:nth-child(2){animation-delay:80ms}.reveal-stagger>:nth-child(3){animation-delay:.16s}.reveal-stagger>:nth-child(4){animation-delay:.24s}.reveal-stagger>:nth-child(5){animation-delay:.32s}.reveal-stagger>:nth-child(6){animation-delay:.4s}.reveal-stagger>:nth-child(n+7){animation-delay:.48s}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:99px}