@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{--text-main: #2b3950;--bg-color: #d3d3d3;--primary: #ff5e80;--primary-hover: #ff426a;--secondary: #8c8bf5;--secondary-hover: #7b7af0;--accent: #ffdb00;--surface: #ffffff;--brown-900: #2b3950;--brown-700: #576b88;--brown-500: #889bb0;--cream-2: #ffffff;--dark-bg: #1e272e;--dark-card: #2f3542;--dark-text: #f1f2f6;--neon-green: #2ed573;--neon-red: #ff5e80;--shadow-sm: 0 4px 16px rgba(43, 57, 80, .05);--shadow-md: 0 8px 24px rgba(43, 57, 80, .08);--radius: 20px;--radius-sm: 16px}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%;height:100%}body{font-family:Fredoka,sans-serif;color:var(--text-main);background-color:var(--bg-color);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}body.dark-mode{background:var(--dark-bg);color:var(--dark-text)}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}input,textarea,select{font:inherit;color:inherit}a{color:var(--secondary);text-decoration:none}a:hover{text-decoration:underline}.app-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px 16px 48px}.page{width:100%;max-width:500px;display:flex;flex-direction:column;gap:16px}.page-wide{max-width:760px;padding:20px 0;display:flex;flex-direction:column;align-items:center}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;gap:12px;align-items:center}.row-wrap{display:flex;flex-wrap:wrap;gap:10px}.grow{flex:1}.center{text-align:center;margin:0 auto}.muted{color:var(--brown-700)}.small{font-size:13px}.tiny{font-size:11px;letter-spacing:.06em;text-transform:uppercase}.card{background:var(--surface);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm)}.card-dark{background:var(--dark-card);color:var(--dark-text);border:none}h1.title{font-size:38px;margin:8px 0 2px;letter-spacing:-.5px}.subtitle{color:var(--brown-700);margin:0 0 8px;font-weight:600}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:38px;color:var(--text-main)}.brand-mascot{font-size:38px;color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;border-radius:20px;font-weight:700;font-size:20px;background:var(--surface);color:var(--text-main);box-shadow:0 4px 12px #2b39500a;transition:all .15s ease}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn:active{transform:translateY(2px);box-shadow:0 0 0 transparent}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 16px #ff5e8059}.btn-primary:hover{background:var(--primary-hover);box-shadow:0 6px 20px #ff5e8073}.btn-primary:active{transform:translateY(2px);box-shadow:0 0 0 transparent}.btn-ghost{background:transparent;box-shadow:none;color:var(--brown-700);font-size:16px;padding:8px 12px;font-weight:600}.btn-ghost:hover{background:#0000000d}.btn-danger{background:var(--red);color:#fff;box-shadow:0 4px 12px #ff47574d}.btn-bmc{background:var(--accent);color:#000;border-radius:999px;font-weight:700;font-size:16px;padding:14px 28px;box-shadow:0 4px 14px #ffdb004d}.btn-bmc:hover{transform:translateY(-2px);box-shadow:0 6px 18px #ffdb0066}.btn-full{width:100%}.input,.textarea,.select{width:100%;padding:16px 20px;border-radius:var(--radius-sm);border:2px solid rgba(48,65,86,.1);background:#fff;outline:none;font-weight:600;font-size:20px;text-align:center;transition:all .2s}.input:focus,.textarea:focus{border-color:var(--secondary);box-shadow:0 0 0 4px #6e9df533}.textarea{resize:vertical;min-height:88px}.code-input{letter-spacing:10px;text-align:center;font-size:28px;text-transform:uppercase}.label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--brown-500);margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;background:var(--cream-2);color:var(--brown-700);font-weight:600;font-size:14px;border:3px solid transparent;cursor:pointer}.chip:hover{border-color:var(--brown-500)}.chip.active{background:var(--secondary);color:#fff}.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--cream-2);color:var(--brown-700);font-weight:600;font-size:13px;border:2px solid rgba(0,0,0,.1)}.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.topic-tile{padding:14px 10px;border-radius:var(--radius-sm);background:#fff;text-align:center;font-weight:600;cursor:pointer;transition:all .12s ease;box-shadow:var(--shadow-sm)}.topic-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.topic-tile.active{background:var(--secondary);color:#fff}.room-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:72px;font-weight:900;letter-spacing:14px;text-align:center;color:var(--text-main);padding:12px 0}.player-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-sm);animation:slideUp .26s ease}.player-avatar{width:36px;height:36px;border-radius:50%;background:var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}.player-name{flex:1;font-weight:600}.host-badge{padding:3px 8px;border-radius:999px;background:var(--secondary);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em}.arena-card{background:var(--dark-card);border-radius:24px;padding:30px;box-shadow:0 10px 40px #0006;min-height:280px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.type-target{font-family:Fredoka,sans-serif;font-size:38px;font-weight:600;line-height:1.4;color:#475569;position:relative;z-index:2}.type-char{transition:color .1s,text-shadow .1s}.type-char.correct{color:var(--neon-green);text-shadow:var(--neon-glow)}.type-char.incorrect{color:var(--neon-red);text-shadow:var(--neon-glow-red);animation:splat .3s both}.type-char.current{color:#94a3b8;border-bottom:3px solid var(--neon-green);box-shadow:0 4px 0 -2px var(--neon-green)}.hidden-input{position:absolute;opacity:0;pointer-events:auto;z-index:-1}.avatar-race-track{width:100%;height:6px;background:#ffffff1a;border-radius:10px;margin:10px 0 30px;position:relative}.avatar-racer{position:absolute;top:-15px;transition:left .3s cubic-bezier(.4,0,.2,1);transform:translate(-50%)}.avatar-icon{width:32px;height:32px;border-radius:50%;background:var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;box-shadow:0 4px 10px #00000080}.avatar-icon.me{background:var(--neon-green);color:var(--dark-bg);box-shadow:var(--neon-glow)}.game-input{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-radius:28px;box-shadow:var(--shadow-sm)}.game-input input{flex:1;border:none;outline:none;padding:8px 6px;font-size:16px;background:transparent}.send-btn{width:42px;height:42px;border-radius:50%;background:var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;transition:transform .1s ease}.send-btn:hover{transform:scale(1.06)}.send-btn:disabled{background:#d9c3a5;cursor:not-allowed;transform:none}.timer{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:#fff;font-weight:800;font-family:monospace;font-size:18px;box-shadow:var(--shadow-sm)}.score-big{font-size:92px;font-weight:900;line-height:1;margin:10px 0;opacity:0;transform:scale(.7);transition:all .6s cubic-bezier(.2,.9,.3,1.3)}.score-big.show{opacity:1;transform:scale(1)}.score-emoji{font-size:120px;line-height:1;opacity:0;transform:scale(.4) rotate(-10deg);transition:all .5s}.score-emoji.show{opacity:1;transform:scale(1) rotate(0)}.score-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;opacity:0;transform:translateY(12px);transition:all .5s}.score-stats.show{opacity:1;transform:translateY(0)}.stat{background:var(--surface);border-radius:var(--radius-sm);padding:12px 8px;text-align:center;box-shadow:var(--shadow-sm)}.stat-value{font-size:22px;font-weight:900;color:var(--text-main)}.stat-label{font-size:11px;color:var(--brown-500);text-transform:uppercase;letter-spacing:.08em}.leader-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-sm);opacity:0;transform:translateY(20px);transition:all .6s}.leader-row.show{opacity:1;transform:translateY(0)}.leader-row.first{border:2px solid var(--accent)}.viral-card{background:var(--dark-card);border-radius:28px;padding:36px 28px;box-shadow:0 20px 50px #0006;text-align:center;position:relative;overflow:hidden;color:var(--dark-text);max-width:400px;margin:0 auto}.viral-stat-huge{font-family:Fredoka,sans-serif;font-size:64px;font-weight:900;text-transform:uppercase;line-height:.9;margin:24px 0}.viral-stat-highlight{color:var(--neon-green);text-shadow:var(--neon-glow)}.viral-flavor{font-size:20px;font-weight:500;color:#cbd5e1;font-style:italic;margin-bottom:30px}.viral-cta-box{background:#ffffff0d;border-radius:20px;padding:20px;display:flex;align-items:center;gap:16px;text-align:left}.qr-box{display:inline-block;padding:14px;background:#fff;border-radius:var(--radius-sm)}@keyframes splat{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.setup-section{display:flex;flex-direction:column;width:100%;margin-bottom:32px}.setup-title{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--brown-500);margin-bottom:12px;letter-spacing:1px}.bomb-grid{display:flex;flex-wrap:wrap;gap:16px;width:100%}.bomb-grid-small{gap:12px}.bomb-card{background:var(--surface);border-radius:20px;padding:20px 24px;text-align:center;font-weight:600;font-size:18px;color:var(--text-main);box-shadow:var(--shadow-sm);transition:all .15s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;flex:1;min-width:130px;cursor:pointer}.bomb-card-sm{padding:16px 20px;font-size:24px;min-width:70px}.bomb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.bomb-card:active{transform:translateY(2px);box-shadow:var(--shadow-sm)}.bomb-card.active{background:var(--secondary);color:#fff}.bomb-icon{font-size:32px}
