:root{--bg: #07090d;--card: rgba(28, 28, 32, .72);--line: rgba(255, 255, 255, .08);--text: #f5f5f7;--mute: #8e8e93;--red: #ff453a;--blue: #0a84ff;--green: #30d158;--yellow: #ffd60a;--ice: #64d2ff;--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", Roboto, system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}#field{position:fixed;inset:0}#field canvas{display:block}#stage{position:fixed;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;pointer-events:none}section[hidden]{display:none!important}#status{position:absolute;bottom:28px;left:50%;transform:translate(-50%);color:var(--mute);font-size:22px;letter-spacing:.02em}#lobby{position:absolute;inset:0;padding:56px 72px;display:flex;flex-direction:column;gap:36px;background:radial-gradient(1200px 700px at 15% 0%,rgba(255,69,58,.13),transparent 60%),radial-gradient(1200px 700px at 85% 100%,rgba(10,132,255,.14),transparent 60%),var(--bg);animation:fade .6s ease}.brand{display:flex;align-items:center;gap:22px}.logo{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;font-size:44px;background:linear-gradient(145deg,#2c2c2e,#1c1c1e);box-shadow:0 10px 30px #00000080,inset 0 1px #ffffff14}.brand h1{font-size:52px;font-weight:700;letter-spacing:-.03em}.brand p{color:var(--mute);font-size:24px;margin-top:2px}.cols{flex:1;display:grid;grid-template-columns:1fr 520px 1fr;gap:40px;min-height:0}.team{background:var(--card);border:1px solid var(--line);border-radius:32px;padding:30px;backdrop-filter:blur(30px)}.team h2{font-size:34px;font-weight:700;display:flex;align-items:center;gap:14px;margin-bottom:20px;letter-spacing:-.02em}.team h2 i{width:16px;height:16px;border-radius:50%}.t0 h2 i{background:var(--red);box-shadow:0 0 20px var(--red)}.t1 h2 i{background:var(--blue);box-shadow:0 0 20px var(--blue)}.team ul{list-style:none;display:flex;flex-direction:column;gap:10px}.team li{display:flex;align-items:center;gap:18px;padding:11px 20px;border-radius:20px;background:#ffffff0a;transition:background .3s,transform .3s}.team li.joined{background:#ffffff14}.team li.ready{background:#30d15824}.team li .ri{font-size:34px;width:44px;text-align:center}.team li .rn{flex:1;display:flex;flex-direction:column}.team li .rn b{font-size:24px;font-weight:600}.team li .rn small{font-size:19px;color:var(--mute);margin-top:2px}.team li.joined small,.team li.ready small{color:var(--text)}.team li .rc{font-size:26px;color:var(--green);font-weight:700}.qr-card{background:#f5f5f7;color:#1c1c1e;border-radius:40px;padding:40px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 30px 80px #0000008c}.qr{width:340px;height:340px}.qr svg{width:100%;height:100%}.code{font-size:64px;font-weight:800;letter-spacing:.18em;margin:22px 0 6px;padding-left:.18em}.scan{font-size:22px;color:#3a3a3c}.url{font-size:18px;color:#6e6e73;margin-top:8px}.state{margin-top:auto;font-size:20px;font-weight:600;padding:12px 22px;border-radius:999px;background:#e5e5ea;color:#3a3a3c}.state.ok{background:var(--green);color:#fff;animation:pulse 1.4s ease-in-out infinite}.pending{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;min-height:34px}.pending span{background:#1c1c1e;color:#fff;font-size:17px;padding:6px 14px;border-radius:999px;animation:pop .35s ease}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.how div{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 26px}.how span{flex:none;width:44px;height:44px;border-radius:50%;background:#2c2c2e;display:grid;place-items:center;font-weight:700;font-size:22px}.how p{font-size:20px;line-height:1.35;color:#d1d1d6}.settings{text-align:center;color:var(--mute);font-size:20px;margin-top:-14px}.settings b{color:var(--text);font-weight:600}#hud{position:absolute;inset:0}.timer{position:absolute;top:22px;left:50%;transform:translate(-50%);z-index:2;padding:10px 28px;border-radius:999px;background:#1c1c20d9;border:1px solid var(--line);backdrop-filter:blur(20px);font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.finale{position:absolute;top:96px;left:50%;transform:translate(-50%) scale(.8);opacity:0;z-index:2;color:#fff;background:var(--red);font-weight:800;font-size:22px;letter-spacing:.16em;padding:8px 20px;border-radius:999px;transition:all .4s cubic-bezier(.2,1.4,.4,1)}.is-finale .finale{opacity:1;transform:translate(-50%) scale(1);animation:pulse 1s ease-in-out infinite}.is-finale .timer{color:var(--red)}.half{position:absolute;top:0;width:960px;height:1080px;padding:22px 26px}.h0{left:0}.h1{left:960px}.half .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.h0 .top{padding-right:130px}.h1 .top{padding-left:130px}.tname{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:700;letter-spacing:-.02em}.tname i{width:14px;height:14px;border-radius:50%}.h0 .tname i{background:var(--red);box-shadow:0 0 16px var(--red)}.h1 .tname i{background:var(--blue);box-shadow:0 0 16px var(--blue)}.gold{font-size:24px;color:var(--yellow);background:#ffd60a1f;padding:4px 14px;border-radius:999px;font-variant-numeric:tabular-nums}.gold b{color:var(--text)}.jam{display:none;font-size:18px;font-weight:700;color:#fff;background:#bf5af2;padding:4px 12px;border-radius:999px}.jam.on{display:block;animation:shake .3s linear infinite}.horde{display:none;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#e9c6ff;background:#bf5af224;padding:4px 12px;border-radius:999px}.horde.on{display:flex}.horde div{width:90px;height:8px;border-radius:4px;background:#ffffff1a;overflow:hidden}.horde i{display:block;height:100%;background:#bf5af2;transform-origin:left;transform:scaleX(0);transition:transform .1s linear;box-shadow:0 0 10px #bf5af2}.chips{display:flex;gap:6px;flex-wrap:wrap;width:100%}.chip{font-size:16px;padding:4px 10px;border-radius:999px;background:#ffffff14;color:#e5e5ea;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all .3s}.chip.npc{color:var(--mute);background:#ffffff0a}.chip.frozen{background:var(--ice);color:#002033;box-shadow:0 0 18px #64d2ffb3}.events{position:absolute;top:112px;left:26px;right:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.ev{position:relative;overflow:hidden;min-width:220px;max-width:290px;padding:10px 16px 14px;border-radius:18px;background:#ff453aeb;box-shadow:0 10px 30px #00000073;animation:pop .4s cubic-bezier(.2,1.5,.4,1);display:flex;flex-direction:column}.ev.k5{background:#ff9f0af2}.ev.k8{background:#bf5af2f2}.ev.k2,.ev.k3,.ev.k4{background:linear-gradient(135deg,#5ac8fa,#0a84ff)}.ev b{font-size:20px;font-weight:700}.ev small{font-size:15px;opacity:.9;margin-top:2px}.ev i{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#ffffffbf;transform-origin:left;animation:drain linear infinite}.ev.out{animation:out .4s ease forwards}.toast{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;font-size:72px;font-weight:800;letter-spacing:-.03em;padding:24px 56px;border-radius:40px;background:#1c1c20e6;border:1px solid var(--line);backdrop-filter:blur(20px)}.toast.on{animation:toast 2.2s cubic-bezier(.2,1.3,.4,1) forwards}#end{position:absolute;inset:0;display:grid;place-items:center;background:#07090db8;backdrop-filter:blur(18px);animation:fade .5s ease}#end .card{width:880px;padding:56px 64px;border-radius:44px;background:#1c1c20eb;border:1px solid var(--line);text-align:center;box-shadow:0 0 0 4px var(--w),0 40px 120px #0009;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}#end .crown{font-size:96px;animation:bounce 1.6s ease-in-out infinite}#end h1{font-size:72px;font-weight:800;letter-spacing:-.04em;color:var(--w);margin-top:8px}#end p{color:var(--mute);font-size:24px;margin-top:4px}#end table{width:100%;margin:34px 0 20px;border-collapse:collapse;font-size:26px}#end th{font-size:24px;padding:8px}#end th.c0{color:var(--red)}#end th.c1{color:var(--blue)}#end td{padding:10px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}#end td:first-child{text-align:left;color:var(--mute)}#end .hint{font-size:20px}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.7)}}@keyframes out{to{opacity:0;transform:scale(.7) translateY(-10px)}}@keyframes pulse{50%{filter:brightness(1.2);transform:translate(var(--tx, 0)) scale(1.04)}}.state.ok{--tx: 0}.is-finale .finale{--tx: -50%}@keyframes drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes shake{25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes bounce{50%{transform:translateY(-10px)}}@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}