:root{--bg: #0a0f2c;--bg-2: #131b47;--panel: rgba(28, 38, 90, .72);--panel-solid: #1b254f;--raise: #26326a;--line: #3a4894;--text: #f4f7ff;--muted: #97a5e0;--brand: #ffd23f;--brand-deep: #f4a712;--berry: #ff5d8f;--mint: #4ecdc4;--grape: #a06cd5;--good: #6bcb77;--bad: #ff6b6b;--radius: 20px;--radius-lg: 28px;--lip: 5px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}#root{height:100vh;height:100dvh}body{background-color:var(--bg);background-image:radial-gradient(1100px 700px at 12% -8%,rgba(160,108,213,.28),transparent 60%),radial-gradient(900px 640px at 92% 4%,rgba(78,205,196,.2),transparent 62%),radial-gradient(1000px 800px at 50% 108%,rgba(255,210,63,.12),transparent 60%),radial-gradient(circle,rgba(255,233,168,.11) 1.6px,transparent 1.7px);background-size:auto,auto,auto,34px 34px;color:var(--text);font-family:Fredoka,ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,Segoe UI,sans-serif;font-size:18px;font-weight:500;-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:inherit;cursor:pointer}.app{height:100%;display:flex;flex-direction:column;overflow:hidden}.screen-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,3vh,34px) clamp(16px,3vw,40px) 44px;gap:clamp(18px,3vh,30px)}.screen-scroll>*{margin-block:auto}.brand{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);justify-content:center}.wordmark{font-size:clamp(42px,7.4vw,92px);font-weight:700;line-height:.92;letter-spacing:-.02em;margin:0;background:linear-gradient(178deg,#fff6cf 8%,var(--brand) 48%,var(--brand-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #6c3f00) drop-shadow(0 9px 18px rgba(0,0,0,.55))}.tagline{color:var(--muted);margin:0;text-align:center;font-size:clamp(16px,1.7vw,21px);font-weight:500}.mascot{flex:none;filter:drop-shadow(0 5px 0 rgba(120,66,0,.55)) drop-shadow(0 10px 20px rgba(0,0,0,.45))}.mascot-jaw{transform-origin:50px 50px}.mascot-jaw-top{animation:chomp-top .62s ease-in-out infinite alternate}.mascot-jaw-bottom{animation:chomp-bottom .62s ease-in-out infinite alternate}@keyframes chomp-top{0%{transform:rotate(-2deg)}to{transform:rotate(-31deg)}}@keyframes chomp-bottom{0%{transform:rotate(2deg)}to{transform:rotate(31deg)}}@media(prefers-reduced-motion:reduce){.mascot-jaw{animation:none!important}}.section-title{font-size:clamp(21px,2.4vw,30px);font-weight:600;margin:0;text-align:center}.btn{border:none;border-radius:999px;padding:14px 28px;font-size:clamp(17px,1.5vw,20px);font-weight:600;background:var(--raise);color:var(--text);box-shadow:0 var(--lip) 0 #131c44;transition:transform .08s ease,filter .15s ease,box-shadow .08s ease}.btn:hover:not(:disabled){filter:brightness(1.13)}.btn:active:not(:disabled){transform:translateY(var(--lip));box-shadow:0 0 #131c44}.btn:disabled{opacity:.38;cursor:not-allowed}.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}.btn-primary{background:linear-gradient(180deg,#ffe887,var(--brand) 60%,var(--brand-deep));color:#4a2f00;box-shadow:0 var(--lip) 0 #a8700a;font-size:clamp(21px,2.2vw,28px);padding:17px 46px}.btn-primary:active:not(:disabled){box-shadow:0 0 #a8700a}.btn-danger{background:linear-gradient(180deg,#ff8aa5,#e4436b);color:#43081b;box-shadow:0 var(--lip) 0 #8d1f3c}.btn-danger:active:not(:disabled){box-shadow:0 0 #8d1f3c}.btn-sm{font-size:16px;padding:10px 18px;--lip: 4px}.btn-ghost{background:transparent;box-shadow:none;color:var(--muted);text-decoration:underline}.btn-ghost:active:not(:disabled){transform:none;box-shadow:none}.face-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.face-option{width:54px;height:54px;border-radius:16px;border:3px solid transparent;background:var(--raise);font-size:28px;line-height:1;box-shadow:0 3px #0000004d;transition:transform .1s ease}.face-option[aria-pressed=true]{border-color:var(--brand);transform:scale(1.1)}.dpad-wrap{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:20;display:flex;flex-direction:column;align-items:center;gap:8px;touch-action:none;user-select:none;-webkit-user-select:none}.dpad-players{display:flex;gap:6px;background:#060a1ebf;border-radius:999px;padding:5px}.dpad-player{width:40px;height:40px;border-radius:50%;border:3px solid transparent;background:none;padding:0}.dpad-player img{width:100%;height:100%;border-radius:50%;display:block}.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:4px}.dpad-btn{border:none;border-radius:16px;background:var(--raise);color:var(--dpad-color, var(--brand));font-size:22px;line-height:1;box-shadow:0 4px #0006;opacity:.92;touch-action:none}.dpad-btn:active{transform:translateY(4px);box-shadow:0 0 #0006;background:var(--dpad-color, var(--brand));color:#22283f}.dpad-hub{border-radius:12px;background:#ffffff0d}.game.has-dpad .side{padding-bottom:210px}.dpad-btn.up{grid-area:1 / 2}.dpad-btn.left{grid-area:2 / 1}.dpad-hub{grid-area:2 / 2}.dpad-btn.right{grid-area:2 / 3}.dpad-btn.down{grid-area:3 / 2}.panel{background:var(--panel);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border:2px solid var(--line);border-radius:var(--radius-lg);padding:clamp(14px,2vw,22px);box-shadow:0 10px 30px #0000004d}.stack{display:flex;flex-direction:column;gap:14px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.center{justify-content:center}.roster{width:min(1320px,100%);display:flex;flex-direction:column;gap:clamp(18px,3vh,30px)}.roster-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.4vw,20px)}.player-card,.add-card{width:clamp(158px,15vw,216px);flex:none}.player-card{background:linear-gradient(180deg,var(--raise),var(--panel-solid));border:3px solid var(--line);border-radius:var(--radius);padding:16px 10px 12px;text-align:center;position:relative;box-shadow:0 6px #00000047}.player-card img{width:clamp(88px,8.6vw,132px);height:clamp(88px,8.6vw,132px);border-radius:50%;display:block;margin:0 auto 10px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}.player-card .name{font-weight:600;font-size:clamp(18px,1.6vw,23px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card .lane{color:var(--muted);font-size:14px;margin-top:3px}.card-remove{position:absolute;top:7px;right:7px;width:32px;height:32px;border-radius:50%;border:none;background:#e4436b;color:#fff;font-size:15px;line-height:1;display:grid;place-items:center;box-shadow:0 3px #8d1f3c}.add-card{border:4px dashed var(--line);border-radius:var(--radius);background:#ffffff08;color:var(--muted);min-height:clamp(178px,17vw,250px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:clamp(17px,1.5vw,21px);font-weight:600;transition:border-color .15s ease,color .15s ease,transform .08s ease}.add-card .plus{font-size:clamp(46px,4.6vw,68px);line-height:1;color:var(--brand)}.add-card:hover{border-color:var(--brand);color:var(--text);transform:translateY(-2px)}.empty-hint{width:100%;text-align:center;color:var(--muted);margin:0}.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(12px,1.4vw,20px)}.field{display:flex;flex-direction:column;gap:8px}.field>label{font-size:14px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.8px}.seg{display:flex;background:#060a1ebf;border:2px solid var(--line);border-radius:999px;padding:4px;gap:4px}.seg button{flex:1;border:none;background:transparent;color:var(--muted);padding:10px;border-radius:999px;font-size:16px;font-weight:600;transition:background .15s ease,color .15s ease}.seg button:disabled{opacity:.4}.seg button[aria-pressed=true]{background:linear-gradient(180deg,#ffe887,var(--brand));color:#4a2f00}.text-input{background:#060a1ecc;border:3px solid var(--line);border-radius:16px;color:var(--text);padding:14px 18px;font-size:clamp(21px,2.2vw,27px);font-family:inherit;font-weight:600;text-align:center;width:100%}.text-input:focus{outline:none;border-color:var(--brand)}.register{width:min(860px,100%);display:flex;flex-direction:column;gap:clamp(12px,2vh,20px);align-items:center}.cam-wrap{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;border:4px solid var(--line);background:#000;aspect-ratio:4 / 3;max-height:56vh;box-shadow:0 14px 40px #00000073}.cam-wrap canvas{width:100%;height:100%;display:block;object-fit:cover}.cam-hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:clamp(17px,1.8vw,22px);font-weight:600;text-shadow:0 2px 10px #000,0 0 24px #000}.cam-hint.ok{color:#9dffb0}.countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:clamp(110px,20vw,200px);font-weight:700;color:var(--brand);text-shadow:0 8px 0 #6c3f00,0 12px 44px #000}.avatar-preview{width:clamp(150px,17vw,208px);height:clamp(150px,17vw,208px);border-radius:50%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}.color-picker{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.swatch{width:42px;height:42px;border-radius:50%;border:3px solid transparent;box-shadow:0 3px #00000059;transition:transform .1s ease}.swatch[aria-pressed=true]{border-color:#fff;transform:scale(1.14)}.error-box{background:linear-gradient(180deg,#4a1428,#33101f);border:3px solid #8d1f3c;color:#ffc2d1;border-radius:var(--radius);padding:18px 22px;text-align:center}.game{flex:1;min-height:0;display:flex;gap:clamp(12px,1.4vw,22px);padding:clamp(10px,1.4vw,20px);align-items:stretch}.board-area{flex:1;min-width:0;min-height:0;display:grid;place-items:center}.board{border-radius:var(--radius-lg);overflow:hidden;border:4px solid var(--line);background:#070b1e;line-height:0;box-shadow:0 16px 44px #00000080}.board canvas{display:block}.side{width:clamp(250px,22vw,340px);flex:none;display:flex;flex-direction:column;gap:clamp(8px,1.2vh,14px);min-height:0;overflow-y:auto}.side-actions{margin-top:auto;padding-top:6px}.timer{font-size:clamp(38px,4.4vw,60px);font-weight:700;text-align:center;line-height:1;font-variant-numeric:tabular-nums}.timer.low{color:var(--bad);animation:pulse .8s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.09)}}.chip{display:inline-flex;align-items:center;gap:6px;background:#060a1eb3;border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px;color:var(--muted);font-weight:500}.score-list{display:flex;flex-direction:column;gap:9px}.score-row{display:flex;align-items:center;gap:11px;padding:10px;border-radius:16px;background:linear-gradient(180deg,var(--raise),var(--panel-solid));border:2px solid transparent;box-shadow:0 4px #00000040}.score-row.lead{border-color:var(--brand);box-shadow:0 4px #00000040,0 0 22px #ffd23f52}.score-row img{width:clamp(42px,3.6vw,56px);height:clamp(42px,3.6vw,56px);border-radius:50%;flex:none}.score-row .who{flex:1;min-width:0}.score-row .who b{display:block;font-size:clamp(16px,1.4vw,20px);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-row .who small{color:var(--muted);font-size:13px}.score-row .pts{font-size:clamp(24px,2.3vw,32px);font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}.rank-badge{font-size:20px;width:26px;text-align:center;flex:none}.lanes{position:relative;width:100%;border-radius:16px;overflow:hidden;border:3px solid var(--line);background:#000;aspect-ratio:16 / 7;flex:none}.lanes canvas{width:100%;height:100%;display:block;object-fit:cover}.lane-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;pointer-events:none}.lane-cell{flex:1;border-right:2px dashed rgba(255,255,255,.28);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:5px 2px}.lane-cell:last-child{border-right:none}.lane-name{font-size:12px;font-weight:600;background:#0009;padding:2px 8px;border-radius:999px;max-width:96%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lane-arrow{font-size:30px;line-height:1;text-shadow:0 2px 6px #000}.lane-arrow.idle{opacity:.22}.results{width:min(820px,100%);display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px);text-align:center}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.winner{display:flex;flex-direction:column;align-items:center;gap:6px}.winner img{width:clamp(150px,18vw,214px);height:clamp(150px,18vw,214px);border-radius:50%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55));animation:bob 1.9s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-9px)}}@media(prefers-reduced-motion:reduce){.winner img,.timer.low{animation:none}}.winner .who{font-size:clamp(30px,4.2vw,50px);font-weight:700}.result-list{display:flex;flex-direction:column;gap:10px;text-align:left;width:100%}.help{color:var(--muted);font-size:15px;line-height:1.55;max-width:680px;text-align:center;margin:0 auto}kbd{background:var(--raise);border-radius:7px;box-shadow:0 2px #131c44;padding:1px 7px;font-size:13px;font-family:inherit;font-weight:600}@media(max-width:900px),(max-height:560px){body{overflow:auto}.app{height:auto;min-height:100%}.game{flex-direction:column;align-items:center}.side{width:min(560px,100%);overflow:visible}.board-area{width:100%}.side-actions{margin-top:12px}}@media(max-width:560px){body{font-size:17px}.screen-scroll{padding-left:12px;padding-right:12px}.dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px)}.lanes{aspect-ratio:16 / 5}}