:root{--bg:#0b0f1a;--bg2:#141a2b;--card:#171d30;--line:#2a3350;--text:#f5f5f7;--muted:#9aa3b8;--accent:#fbbf24;--accent2:#f97316;--good:#22c55e;--mid:#f59e0b;--bad:#ef4444;--blue:#60a5fa;--radius:14px;--display:"Bangers", "Impact", system-ui, sans-serif;--body:"Inter", system-ui, -apple-system, sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 600px at 50% -10%, #2a1650 0%, var(--bg) 60%);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-size:16px;line-height:1.4}button,input,select{font:inherit}a{color:inherit}.screen{min-height:100dvh;padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));flex-direction:column;width:100%;max-width:560px;margin:0 auto;display:flex}.screen.center{justify-content:center;align-items:center}.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.lobby{justify-content:flex-start;gap:16px}.logo{font-family:var(--display);letter-spacing:2px;text-shadow:0 4px #000,0 8px 24px #f9731659;align-items:baseline;gap:12px;margin:8px 0 0;font-size:clamp(44px,12vw,72px);line-height:.9;display:flex}.logo-accent{color:var(--accent);display:inline-block;transform:rotate(-3deg)}.lobby-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.name-chip{background:var(--bg2);max-width:100%;color:var(--text);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;border-radius:999px;align-items:center;gap:6px;margin-top:10px;padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex}.name-chip:hover:not(:disabled){border-color:var(--accent)}.name-chip:disabled{opacity:.6;cursor:default}.name-chip-nick{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.name-edit{flex:240px;max-width:320px;margin-top:6px}.name-edit-row{align-items:center;gap:6px;display:flex}.name-edit .input{min-width:0;padding:8px 12px}.name-edit .error{margin:6px 0 0}.tagline{color:var(--muted);margin:0}.status-row{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.dot{background:var(--bad);border-radius:50%;width:8px;height:8px;display:inline-block}.dot.on{background:var(--good);box-shadow:0 0 8px var(--good)}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.stack{flex-direction:column;gap:12px;display:flex}.stack.center{text-align:center;align-items:center}.row{flex-wrap:wrap;gap:10px;display:flex}.row>*{flex:140px}.label{text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-size:12px;font-weight:600}.input{background:var(--bg2);width:100%;color:var(--text);border:1px solid var(--line);border-radius:10px;outline:none;padding:12px 14px;font-size:16px}.input:focus{border-color:var(--accent)}.btn{background:var(--bg2);color:var(--text);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;border-radius:10px;justify-content:center;align-items:center;gap:6px;min-height:46px;padding:12px 16px;font-weight:600;text-decoration:none;transition:transform 50ms,background .15s;display:inline-flex}.btn:active{transform:translateY(1px)scale(.99)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);color:#1a0b00;border-color:#0000}.btn.big{font-family:var(--display);letter-spacing:1px;min-height:60px;font-size:26px}.btn.ghost{background:0 0}.btn.small{align-self:center;min-height:34px;padding:6px 12px;font-size:13px}.pill{background:var(--bg2);border:1px solid var(--line);border-radius:999px;margin:0;padding:4px 10px;font-size:13px;display:inline-block}.pill.warn{color:var(--mid);border-color:var(--mid)}.error{color:var(--bad);margin:0;font-size:14px}.error.banner{background:#ef44441f;border:1px solid #ef444480;border-radius:10px;padding:10px 12px}.code{background:var(--bg);border:1px dashed var(--line);word-break:break-all;border-radius:8px;width:100%;padding:10px;font-size:14px;display:block}.spinner{border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.how{color:var(--muted);margin-top:auto;font-size:14px}.how summary{cursor:pointer;color:var(--text);font-weight:600}.how-steps{flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;display:flex}.how .how-steps{margin-top:12px}.how-step{align-items:flex-start;gap:12px;display:flex}.how-num{font-family:var(--display);color:var(--accent);text-shadow:0 3px #000;text-align:center;flex:none;min-width:22px;font-size:28px;line-height:1}.how-body{flex-direction:column;gap:2px;min-width:0;display:flex}.how-title{color:var(--text);font-size:15px;font-weight:800}.how-text{color:var(--muted);font-size:13px;line-height:1.4}.how-side{display:none}.lobby-main{flex-direction:column;flex:auto;gap:16px;min-width:0;display:flex}.top-side{min-width:0}.top-side:empty{display:none}@media (min-width:1100px){.screen.lobby{grid-template-columns:300px minmax(0,560px) 300px;justify-content:center;align-items:start;column-gap:40px;max-width:1280px;display:grid}.lobby-main{width:100%;min-height:calc(100dvh - 32px)}.screen.lobby>.site-footer{grid-column:1/-1}.how-side,.top-side{margin-top:28px;display:block;position:sticky;top:24px}.how-side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}.how-side:before{content:"How it works";font-family:var(--display);letter-spacing:1px;margin-bottom:16px;font-size:26px;display:block}.top-side .section-head{flex-direction:column;align-items:flex-start;gap:2px}.top-side .section-title{font-size:24px}.screen.lobby .how{display:none}}.fight{max-width:720px;height:100dvh;min-height:0;padding:0;position:relative;overflow:hidden}.fight-header{padding:calc(10px + var(--safe-top)) 12px 8px;background:linear-gradient(#0000008c,#0000);flex:none}.bars{grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;display:grid}.hpbar{min-width:0}.hp-name{white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:13px;font-weight:700;overflow:hidden}.hpbar.right .hp-name{text-align:right}.you{color:var(--muted);font-weight:400}.hp-track{background:#1f2637;border:2px solid #000;border-radius:6px;height:20px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0009}.hpbar.right .hp-track,.hpbar.right .hp-num{transform:scaleX(-1)}.hp-fill{background:linear-gradient(#4ade80,#16a34a);height:100%;transition:width .45s cubic-bezier(.2,.8,.2,1)}.hp-fill.mid{background:linear-gradient(#fbbf24,#d97706)}.hp-fill.low{background:linear-gradient(#f87171,#b91c1c)}.hp-num{text-shadow:0 1px 2px #000;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:flex;position:absolute;inset:0}.clock{font-family:var(--display);text-align:center;text-shadow:0 2px #000;min-width:52px;padding-bottom:2px;font-size:34px;line-height:1}.clock.urgent{color:var(--bad);animation:.5s ease-in-out infinite alternate pulse}@keyframes pulse{to{transform:scale(1.12)}}.topic{text-align:center;flex-direction:column;gap:2px;margin-top:8px;display:flex}.topic-title{font-size:15px;font-weight:800}.topic-side{color:var(--muted);font-size:13px}.feed{-webkit-overflow-scrolling:touch;flex-direction:column;flex:auto;gap:8px;min-height:0;padding:8px 12px 16px;display:flex;overflow-y:auto}.feed-empty{max-width:300px;margin:auto}.bubble{background:var(--card);border:1px solid var(--line);border-radius:14px;max-width:86%;padding:10px 12px;animation:.18s ease-out pop}@keyframes pop{0%{opacity:0;transform:scale(.92)}}.bubble.mine{background:#1d2a4a;border-bottom-right-radius:4px;align-self:flex-end}.bubble.theirs{border-bottom-left-radius:4px;align-self:flex-start}.bubble.backfire,.bubble.blocked{border-color:#ef444499}.bubble.whiff,.bubble.unjudged{opacity:.75}.bubble-text{word-wrap:break-word;overflow-wrap:anywhere}.bubble-meta{flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-size:12px;display:flex}.who{color:var(--muted)}.tag{background:#ffffff0f;border-radius:999px;padding:2px 8px;font-weight:800}.tag.hit.opponent{color:var(--good)}.tag.backfire,.tag.blocked{color:var(--bad)}.tag.whiff,.tag.unjudged{color:var(--muted)}.bubble.judging{color:var(--muted);align-items:center;gap:6px;font-size:13px;display:flex}.dots i{background:var(--muted);border-radius:50%;width:5px;height:5px;margin-right:3px;animation:1s infinite blink;display:inline-block}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}@keyframes blink{50%{opacity:.2}}.hitlabel{text-align:center;pointer-events:none;z-index:5;max-width:90%;animation:1.6s ease-out forwards hit;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.hit-dmg{font-family:var(--display);text-shadow:0 4px #000,0 0 30px;font-size:72px;line-height:1}.hit-text{text-transform:uppercase;letter-spacing:1px;background:#000000b3;border-radius:999px;padding:4px 10px;font-size:14px;font-weight:800;display:inline-block}.hitlabel.good{color:var(--good)}.hitlabel.bad{color:var(--bad)}.hitlabel.neutral{color:var(--muted)}.hitlabel.combo .hit-dmg{color:var(--accent);font-size:88px}@keyframes hit{0%{opacity:0;transform:translate(-50%,-30%)scale(.5)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}22%{transform:translate(-50%,-50%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-80%)scale(.9)}}.composer{padding:8px 12px calc(10px + var(--safe-bottom));background:var(--bg2);border-top:1px solid var(--line);flex:none;position:relative}.cooldown{background:var(--accent);height:2px;transition:width 50ms linear;position:absolute;top:0;left:0}.composer-row{gap:8px;display:flex}.btn.send{font-family:var(--display);letter-spacing:1px;flex:0 0 72px;font-size:22px}.composer-hint{color:var(--muted);justify-content:space-between;gap:8px;margin-top:6px;font-size:11px;display:flex}.composer-error{color:var(--bad);margin-bottom:6px;font-size:13px}.replay-bar{gap:8px;display:flex}.replay-bar>*{flex:1}.overlay{z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay.countdown{font-family:var(--display);color:var(--accent);text-shadow:0 6px #000;pointer-events:none;font-size:120px;animation:.3s ease-out pop}.overlay.result{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#05070ed1;padding:16px;overflow-y:auto}.result-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-align:center;flex-direction:column;gap:12px;width:100%;max-width:440px;margin:auto;padding:18px;display:flex}.result-card.inline{align-self:center;margin-top:8px}.result-card p{margin:0}.result-title{font-family:var(--display);letter-spacing:2px;text-shadow:0 4px #000;font-size:64px;line-height:1}.result-title.small{font-size:44px}.result-card.won .result-title{color:var(--good)}.result-card.lost .result-title{color:var(--bad)}.result-card.draw .result-title{color:var(--muted)}.best{color:var(--muted);font-size:14px}.share-card{border:1px solid var(--line);border-radius:10px;width:100%;display:block}@media (min-width:720px){.fight{border-left:1px solid var(--line);border-right:1px solid var(--line)}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}.chips{scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:8px;padding:2px 0 6px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chip{background:var(--bg2);color:var(--text);border:1px solid var(--line);white-space:nowrap;cursor:pointer;touch-action:manipulation;border-radius:999px;flex:none;padding:8px 14px;font-size:14px;font-weight:600}.chip.on{background:var(--accent);color:#1a0b00;border-color:#0000}.versus-list{flex-direction:column;gap:8px;display:flex}.versus{background:var(--card);border:1px solid var(--line);border-radius:12px;transition:border-color .15s;overflow:hidden}.versus.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.versus-head{width:100%;color:var(--text);text-align:left;cursor:pointer;touch-action:manipulation;background:0 0;border:0;align-items:center;gap:12px;padding:12px 14px;display:flex}.versus-emoji{flex:none;font-size:24px}.versus-names{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.fighter{font-size:16px;font-weight:800}.vs{font-family:var(--display);color:var(--accent2);letter-spacing:1px;font-size:18px}.side-pick{grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px;display:grid}.side{border:1px solid var(--line);background:var(--bg2);color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:10px;padding:12px 8px;font-weight:700;transition:background .15s,transform 50ms}.side:active{transform:scale(.98)}.side.a.on{background:var(--blue);color:#06111f;border-color:#0000}.side.b.on{background:var(--bad);color:#fff;border-color:#0000}.hp-team{color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-top:3px;font-size:11px;font-weight:700}.hpbar.right .hp-team{text-align:right}.turnstile:empty{display:none}.turnstile{min-height:65px}.status-link{color:var(--accent);margin-left:auto;font-size:14px;font-weight:700;text-decoration:none}.status-link:hover{text-decoration:underline}.winbar{flex-direction:column;gap:4px;min-width:0;display:flex}.winbar-labels{align-items:baseline;gap:6px;min-width:0;font-size:14px;display:flex}.winbar.compact .winbar-labels{font-size:13px}.winbar-name{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:800;overflow:hidden}.winbar-name.b{text-align:right}.winbar-count{font-variant-numeric:tabular-nums;color:var(--muted);flex:none;font-weight:600}.winbar-spacer{flex:auto}.winbar-track{background:var(--bg2);border-radius:7px;gap:2px;height:14px;display:flex;overflow:hidden}.winbar.compact .winbar-track{border-radius:4px;height:8px}.winbar-fill{align-items:center;min-width:2px;height:100%;padding:0 6px;font-size:10px;font-weight:800;transition:width .4s ease-out;display:flex}.winbar-fill.a{background:var(--blue);color:#06111f;border-radius:7px 0 0 7px}.winbar-fill.b{background:var(--bad);color:#fff;border-radius:0 7px 7px 0;justify-content:flex-end}.winbar.empty .winbar-fill{background:var(--line);color:#0000}.stats-panel{border-top:1px solid var(--line);flex-direction:column;gap:12px;margin-top:2px;padding:4px 14px 14px;display:flex}.stats-panel .winbar{margin-top:10px}.stats-panel .best{text-align:left}.stat-tiles{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat-tile{background:var(--bg2);border:1px solid var(--line);text-align:center;border-radius:10px;padding:10px 8px}.stat-value{font-family:var(--display);letter-spacing:1px;color:var(--accent);font-size:26px;line-height:1}.stat-tiles.hero .stat-value{font-size:40px}.stat-label{text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:4px;font-size:11px;font-weight:700}.stat-hint{color:var(--muted);margin-top:2px;font-size:11px}.stat-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:14px}.stat-table th,.stat-table td{border-bottom:1px solid var(--line);text-align:center;padding:6px 4px}.stat-table th[scope=row]{text-align:left;color:var(--muted);font-weight:600}.stat-table thead th{font-weight:800}.stat-table thead th.a{color:var(--blue)}.stat-table thead th.b{color:var(--bad)}.stat-table tbody tr:last-child td,.stat-table tbody tr:last-child th{border-bottom:0}.topfights{flex-direction:column;gap:8px;display:flex}.section-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.section-title{font-family:var(--display);letter-spacing:1px;margin:0;font-size:24px}.section-link{color:var(--accent);white-space:nowrap;font-size:14px;font-weight:700;text-decoration:none}.section-link:hover{text-decoration:underline}.topfights-list,.board{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.topfight{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:12px;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;transition:border-color .15s;display:flex}.topfight:hover{border-color:var(--accent)}.topfight-emoji{flex:none;font-size:22px}.topfight-body,.board-body{flex:auto;min-width:0}.topfight-fights{flex-direction:column;flex:none;align-items:center;min-width:40px;line-height:1;display:flex}.topfight-fights b{font-family:var(--display);letter-spacing:1px;color:var(--accent);font-size:22px}.topfight-fights small{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.leaderboard .logo-link{align-self:center;text-decoration:none}.page-title{font-family:var(--display);letter-spacing:2px;text-align:center;margin:-8px 0 0;font-size:34px}.board-row.unfought{opacity:.7}.board-rank{font-family:var(--display);color:var(--muted);text-align:right;flex:none;min-width:22px;font-size:18px}.board-detail{flex-direction:column;gap:10px;display:flex}.board-detail .btn{margin:0 14px 14px}.versus-actions{padding:0 12px 12px}.host-fight{text-align:left;width:100%}.host-fight .versus-head{cursor:default;padding-bottom:4px}.host-fight .host-side{margin:0;padding:0 14px 10px}.share{min-width:0;display:flex;position:relative}.share>.btn{width:100%}.share-menu{z-index:20;background:var(--card);border:1px solid var(--line);text-align:left;border-radius:12px;grid-template-columns:1fr 1fr;gap:2px;min-width:240px;max-width:calc(100vw - 32px);padding:6px;display:grid;position:absolute;bottom:calc(100% + 6px);left:0;box-shadow:0 12px 32px #00000080}.share-item{color:var(--text);font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:8px;align-items:center;gap:8px;padding:10px;font-size:14px;font-weight:600;text-decoration:none;display:flex}.share-item:hover,.share-item:focus-visible{background:var(--bg2);outline:none}.share-icon{text-align:center;width:22px;font-size:16px}.site-footer{color:var(--muted);text-align:center;margin:8px 0 0;font-size:12px}.site-footer a{color:var(--muted);text-decoration:underline}.screen.legal{justify-content:flex-start;gap:16px}.legal .logo-link{align-self:center;text-decoration:none}.legal .legal-body{text-align:left;font-size:15px;line-height:1.55}.legal .legal-body h3{margin:12px 0 0;font-size:17px}.legal .legal-body p,.legal .legal-body ul{margin:0}.legal .legal-body ul{padding-left:18px}.legal .legal-body li{margin-bottom:8px}.legal .legal-body a{color:var(--accent)}
