*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f0e4cf;--surface:#faf4e8;--card:#fff;--border:#c8b090;--border-dark:#a08868;--primary:#7b68ae;--primary-light:#a594d0;--primary-dark:#5a4888;--secondary:#5ea85e;--secondary-light:#80c880;--accent:#e8a040;--accent-light:#f0c070;--danger:#d06060;--danger-light:#e88888;--text:#3d3050;--text-dim:#8a7a98;--text-light:#b0a0b8;--shadow:#3c281e26;--pixel:3px;--font-pixel:"Press Start 2P", monospace;--font-size-xs:8px;--font-size-sm:10px;--font-size-md:12px;--font-size-lg:16px;--font-size-xl:20px;--font-size-title:28px}html,body{height:100%;overflow:hidden}body{font-family:var(--font-pixel);font-size:var(--font-size-md);color:var(--text);background:var(--bg);-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;image-rendering:pixelated;touch-action:manipulation}#root{flex-direction:column;height:100%;display:flex}.pixel-box{background:var(--card);border:var(--pixel) solid var(--border-dark);box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow), inset 0 0 0 var(--pixel) var(--border)}.pixel-box-primary{background:var(--primary);border:var(--pixel) solid var(--primary-dark);color:#fff;box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow)}.screen{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;align-items:center;gap:16px;width:100%;max-width:480px;margin:0 auto;padding:20px 16px;display:flex;overflow-y:auto}.screen-title{font-size:var(--font-size-xl);color:var(--primary);text-align:center;text-shadow:2px 2px 0 var(--shadow);line-height:1.4}.screen-subtitle{font-size:var(--font-size-sm);color:var(--text-dim);text-align:center;line-height:1.6}.btn{font-family:var(--font-pixel);font-size:var(--font-size-sm);border:var(--pixel) solid var(--border-dark);cursor:pointer;text-align:center;box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow);-webkit-tap-highlight-color:transparent;padding:12px 20px;line-height:1.4;transition:transform .1s}.btn:active{transform:translate(var(--pixel), var(--pixel));box-shadow:none}.btn-primary{background:var(--primary);border-color:var(--primary-dark);color:#fff}.btn-secondary{background:var(--secondary);color:#fff;border-color:#488848}.btn-accent{background:var(--accent);color:#fff;border-color:#c08030}.btn-danger{background:var(--danger);color:#fff;border-color:#a04848}.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}.btn:disabled{opacity:.5;cursor:default;box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow);transform:none}.btn-lg{font-size:var(--font-size-md);padding:16px 28px}.btn-full{width:100%}.input{font-family:var(--font-pixel);font-size:var(--font-size-md);border:var(--pixel) solid var(--border-dark);background:var(--card);color:var(--text);box-shadow:inset 2px 2px 0 0 var(--shadow);outline:none;width:100%;padding:12px 14px}.input:focus{border-color:var(--primary);box-shadow:inset 2px 2px 0 0 var(--primary-light)}.input::placeholder{color:var(--text-light);font-size:var(--font-size-xs)}.input-sm{font-size:var(--font-size-sm);padding:8px 10px}.avatar{border:var(--pixel) solid var(--border-dark);width:48px;height:48px;box-shadow:2px 2px 0 0 var(--shadow);flex-shrink:0;justify-content:center;align-items:center;font-size:24px;display:flex}.avatar-sm{width:36px;height:36px;font-size:18px}.avatar-lg{width:64px;height:64px;font-size:32px}.avatar-xl{width:80px;height:80px;font-size:40px}.avatar-grid{grid-template-columns:repeat(6,1fr);gap:8px;width:100%;display:grid}.avatar-option{aspect-ratio:1;border:var(--pixel) solid var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;font-size:24px;transition:transform .1s;display:flex}.avatar-option:active{transform:scale(.9)}.avatar-option.selected{border-color:var(--primary);box-shadow:0 0 0 var(--pixel) var(--primary);transform:scale(1.05)}.player-row{background:var(--card);border:var(--pixel) solid var(--border);align-items:center;gap:12px;width:100%;padding:10px 14px;display:flex}.player-row .name{font-size:var(--font-size-sm);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.player-row .badge{font-size:var(--font-size-xs);border:2px solid;padding:4px 8px}.badge-ready{color:var(--secondary);border-color:var(--secondary)}.badge-waiting{color:var(--text-dim);border-color:var(--border)}.timer-bar-wrap{border:var(--pixel) solid var(--border-dark);background:var(--surface);width:100%;height:16px;overflow:hidden}.timer-bar{background:var(--secondary);height:100%;transition:width .25s linear,background-color .5s}.timer-bar.warning{background:var(--accent)}.timer-bar.danger{background:var(--danger)}.timer-text{font-size:var(--font-size-lg);color:var(--text);text-align:center;min-width:60px}.timer-row{align-items:center;gap:12px;width:100%;display:flex}.question-card{flex-direction:column;gap:12px;width:100%;padding:16px;display:flex}.question-author{font-size:var(--font-size-xs);color:var(--text-dim)}.question-text{font-size:var(--font-size-md);line-height:1.6}.options-grid{grid-template-columns:1fr 1fr;gap:10px;width:100%;display:grid}.option-btn{font-family:var(--font-pixel);font-size:var(--font-size-xs);border:var(--pixel) solid var(--border-dark);background:var(--card);color:var(--text);cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;word-break:break-word;padding:14px 10px;line-height:1.5;transition:transform .1s,background .15s}.option-btn:active{transform:scale(.95)}.option-btn.selected{background:var(--primary);border-color:var(--primary-dark);color:#fff}.option-btn.correct{background:var(--secondary);color:#fff;border-color:#488848}.option-btn.wrong{background:var(--danger-light);border-color:var(--danger);color:#fff}.number-input-row{align-items:stretch;gap:10px;width:100%;display:flex}.number-input-row .input{flex:1}.number-input-row .btn{flex-shrink:0}.score-row{background:var(--card);border:var(--pixel) solid var(--border);align-items:center;gap:10px;width:100%;padding:8px 14px;display:flex}.score-row .rank{font-size:var(--font-size-lg);color:var(--accent);text-align:center;min-width:32px}.score-row .name{font-size:var(--font-size-sm);flex:1}.score-row .points{font-size:var(--font-size-sm);color:var(--primary)}.wavelength-track{border:var(--pixel) solid var(--border-dark);background:linear-gradient(90deg, var(--danger-light), var(--accent-light), var(--secondary-light));cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;height:40px;position:relative}.wavelength-labels{width:100%;font-size:var(--font-size-xs);color:var(--text-dim);justify-content:space-between;display:flex}.wavelength-marker{background:var(--text);border:2px solid var(--card);width:12px;height:48px;transition:left .15s;position:absolute;top:-4px;transform:translate(-50%)}.wavelength-marker.mine{background:var(--primary);z-index:2}.wavelength-marker.actual{background:var(--accent);z-index:3;width:16px}.wavelength-guess-dot{border:2px solid var(--card);z-index:1;border-radius:0;width:10px;height:10px;position:absolute;top:50%;transform:translate(-50%,-50%)}.award-card{text-align:center;flex-direction:column;align-items:center;gap:8px;width:100%;padding:16px;display:flex}.award-emoji{font-size:40px}.award-title{font-size:var(--font-size-md);color:var(--accent)}.award-desc{font-size:var(--font-size-xs);color:var(--text-dim);line-height:1.5}.award-player{font-size:var(--font-size-sm);color:var(--primary)}.question-form{flex-direction:column;gap:10px;width:100%;display:flex}.type-toggle{gap:0;width:100%;display:flex}.type-toggle .btn{font-size:var(--font-size-xs);border-radius:0;flex:1}.type-toggle .btn.active{background:var(--primary);border-color:var(--primary-dark);color:#fff}.my-questions-list{flex-direction:column;gap:8px;width:100%;display:flex}.my-question-item{background:var(--surface);border:2px solid var(--border);font-size:var(--font-size-xs);align-items:center;gap:8px;padding:8px 12px;line-height:1.5;display:flex}.my-question-item .num{color:var(--primary);flex-shrink:0}.my-question-item .text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.my-question-item .remove-btn{font-family:var(--font-pixel);font-size:var(--font-size-xs);color:var(--danger);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:2px 6px}.suggestions{flex-wrap:wrap;gap:6px;width:100%;display:flex}.suggestion-chip{font-family:var(--font-pixel);background:var(--surface);border:2px solid var(--border);color:var(--text-dim);cursor:pointer;-webkit-tap-highlight-color:transparent;padding:6px 8px;font-size:7px;line-height:1.4}.suggestion-chip:active{background:var(--primary-light);color:#fff}.room-code{font-size:var(--font-size-title);letter-spacing:8px;color:var(--primary);text-align:center;background:var(--surface);border:var(--pixel) solid var(--primary);padding:12px 20px}.countdown-overlay{z-index:100;background:#3d3050d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.countdown-number{color:#fff;text-shadow:4px 4px 0 var(--primary-dark);font-size:80px;animation:1s ease-in-out infinite countPulse}@keyframes countPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.results-banner{text-align:center;width:100%;font-size:var(--font-size-sm);padding:12px;line-height:1.6}.results-banner.correct{background:var(--secondary-light);border:var(--pixel) solid var(--secondary);color:#fff}.results-banner.wrong{background:var(--danger-light);border:var(--pixel) solid var(--danger);color:#fff}.confetti-wrap{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti-piece{width:8px;height:8px;animation:linear forwards confettiFall;position:absolute;top:-10px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.divider{background:var(--border);width:100%;height:2px}.fade-in{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.spinner{border:var(--pixel) solid var(--border);border-top-color:var(--primary);width:16px;height:16px;animation:.8s steps(8,end) infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.row{align-items:center;gap:10px;display:flex}.col{flex-direction:column;gap:8px;display:flex}.w-full{width:100%}.text-center{text-align:center}.gap-sm{gap:6px}.gap-lg{gap:16px}.mt-auto{margin-top:auto}.flex-1{flex:1}body:before{content:"";background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);opacity:.12;pointer-events:none;z-index:-1;background-size:24px 24px;position:fixed;inset:0}