:root{--bg:#0d0f17;--panel:#161925;--panel2:#0f1220;--line:#262a3b;--line2:#2c3146;--text:#e8eaf2;--muted:#9aa1b8;--soft:#b8bfd4;--red:#ff6a4d;--redt:#ff8a73;--blue:#4da8ff;--bluet:#7fc0ff;--gold:#f5c542;--green:#3ddc84;--twitch:#8f5cff;--pix:Silkscreen,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 Inter,system-ui,sans-serif}
a{color:#9ec9ff}a:hover{color:#cfe4ff}
button,input{font:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:#1b1f2e;color:var(--text);font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:#232838;color:var(--text)}
.btn.primary{background:var(--twitch);border-color:var(--twitch);color:#fff}
.btn.primary:hover{background:#7d47f0}
.btn.ghost{background:transparent}
.btn:disabled{cursor:not-allowed;opacity:.75}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:10px 20px;background:#11131d;border-bottom:1px solid var(--line)}
.logo{font-family:var(--pix);font-size:26px;font-weight:700;letter-spacing:1px;text-decoration:none}
.logo .r{color:var(--red)}.logo .b{color:var(--blue)}
.top nav{display:flex;flex-wrap:wrap;gap:4px 18px;flex:1 1 280px}
.top nav a{color:var(--soft);text-decoration:none;padding:10px 0;font-weight:600}
.top nav a:hover{color:var(--text)}
.who{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.balance{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#1b1f2e;border:1px solid var(--line2);border-radius:999px;font-weight:700;color:var(--gold)}
.me{font-weight:600;background:none;border:0;color:var(--text);min-height:44px;padding:0 4px;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.me:hover{text-decoration-color:var(--soft)}
.layout{max-width:1440px;margin:0 auto;padding:16px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.fighters{flex:1 1 260px;max-width:340px;display:flex;flex-direction:column;gap:12px;min-width:0}
.fighter{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px}
.fighter.red{border-top:4px solid var(--red)}.fighter.blue{border-top:4px solid var(--blue)}
.fhead{display:flex;gap:12px;align-items:center}
.portrait{width:76px;height:76px;flex:0 0 76px;border-radius:10px;background:var(--bg);border:2px solid var(--line2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.red .portrait{border-color:var(--red)}.blue .portrait{border-color:var(--blue)}
.portrait img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.portrait img:not([src]){display:none}
.fname{display:flex;flex-direction:column;gap:6px;min-width:0}
.fname h2{margin:0;font-family:var(--pix);font-size:18px;line-height:1.15;overflow-wrap:break-word;word-break:normal}
.red h2{color:var(--redt)}.blue h2{color:var(--bluet)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tier,.tag{padding:3px 8px;border-radius:6px;font-size:12px}
.tier{background:#2a2010;color:var(--gold);font-weight:700}
.tier:empty,.tag:empty{display:none}
.tag{background:#1f2333;color:#c7cde0}
.life{height:10px;background:var(--panel2);border-radius:6px;overflow:hidden}
.life .fill{height:100%;width:100%;transition:width .3s}
.red .life .fill{background:var(--red)}.blue .life .fill{background:var(--blue)}
.stats{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stats div{background:var(--panel2);border-radius:8px;padding:8px}
.stats dt{color:var(--muted);font-size:12px}
.stats dd{margin:2px 0 0;font-weight:700}
.vs{text-align:center;font-family:var(--pix);font-size:22px;color:var(--soft)}
.arena{margin:0;text-align:center;color:var(--muted);font-size:14px}
.center{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
.player{position:relative;width:100%;aspect-ratio:16/9;background:#05060a;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.noembed{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;text-align:center;color:var(--muted)}
.bets{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px}
.betstatus{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.phase{font-family:var(--pix);font-size:18px;color:var(--muted)}
.phase.open{color:var(--green)}
.timer{padding:4px 10px;border-radius:6px;background:#12301f;color:#6ff0a6;font-weight:700;font-size:14px}
.timer:empty{display:none}
.hint{margin-left:auto;color:var(--muted);font-size:13px}
.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.side{min-height:92px;border-radius:12px;border:3px solid transparent;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px}
.side.r{background:#2a1512;border-color:#3a2420}.side.b{background:#10202f;border-color:#1d2c40}
.side.r.on{border-color:var(--red)}.side.b.on{border-color:var(--blue)}
.side:disabled{cursor:not-allowed}
.sname{font-family:var(--pix);font-size:20px;overflow-wrap:anywhere;text-align:center}
.side.r .sname{color:var(--redt)}.side.b .sname{color:var(--bluet)}
.spool{font-size:14px;color:#d8dbe8}
.wager{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 160px}
.field label{font-size:13px;color:var(--muted)}
input{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font-size:16px}
input::placeholder{color:#8a91a8}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:44px;min-width:56px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:#1b1f2e;color:var(--text);font-weight:600;cursor:pointer}
.betgo{flex:1 1 200px;font-weight:700}
.betgo.r{background:var(--red);border-color:var(--red);color:#0d0f17}
.betgo.b{background:var(--blue);border-color:var(--blue);color:#0d0f17}
.msg{margin:0;min-height:1.2em;font-size:14px;color:var(--gold)}
.msg:empty{display:none}
.fine{margin:0;font-size:13px;color:var(--muted)}
.chat{flex:1 1 300px;max-width:380px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;height:640px}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tab{flex:1;min-height:44px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}
.tab.on{color:var(--text);border-bottom-color:var(--twitch)}
.msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:14px;overflow-wrap:anywhere}
.msgs[hidden]{display:none}
.msgs .u{font-weight:700}
.msgs .betrow{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;background:var(--panel2);border-radius:8px}
.msgs .r{color:var(--redt);font-weight:700}.msgs .b{color:var(--bluet);font-weight:700}
.msgs .sys{color:var(--muted);font-style:italic}
.chatframe{flex:1;width:100%;border:0;border-radius:0 0 12px 12px;background:var(--panel)}
.chatframe[hidden]{display:none}
.chatfoot{padding:12px;border-top:1px solid var(--line);display:flex}
.chatfoot .btn{flex:1}
.block{max-width:1440px;margin:0 auto;padding:8px 16px 32px}
.block h2{margin:0 0 12px;font-family:var(--pix);font-size:22px}
.block h2.gold{color:var(--gold)}
.blockhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.note{color:var(--muted);font-size:13px}
.tablebox{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
th{color:var(--muted);text-align:left;padding:8px;font-weight:600}
td{padding:8px;border-top:1px solid var(--line)}
td.gold{color:var(--gold);font-weight:700}
td.empty{color:var(--muted);text-align:center}
.perks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.perks article{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.perks h3{margin:0;font-size:17px}
.perks p{margin:0;color:var(--soft);font-size:14px;flex:1}
.price{font-weight:700;color:var(--gold)}
.foot{max-width:1440px;margin:0 auto;padding:16px 16px 40px;color:var(--muted);font-size:13px}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:14px;padding:20px;max-width:420px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(5,6,10,.7)}
dialog form{display:flex;flex-direction:column;gap:10px}
dialog h2{margin:0;font-family:var(--pix);font-size:20px}
dialog p{margin:0;color:var(--soft);font-size:14px}
dialog label{font-size:13px;color:var(--muted)}
.dlgbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
@media (max-width:700px){.fighters,.chat{max-width:none}.chat{height:480px}.hint{margin-left:0}.center{order:-1}}
.dlgtabs{display:flex;gap:4px;padding:4px;background:var(--panel2);border-radius:10px}
.dlgtabs button{flex:1;min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--soft);font-weight:600;cursor:pointer}
.dlgtabs button.on{background:#232838;color:var(--text)}
.dlgtabs[hidden]{display:none}
.fld{display:flex;flex-direction:column;gap:6px}
.dlglinks{display:flex;flex-wrap:wrap;gap:4px 16px}
.link{background:none;border:0;padding:6px 0;min-height:32px;color:#b69cff;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:#d3c4ff}
.msg.ok{color:var(--green)}
dialog h3.sub{margin:6px 0 0;font-size:15px}
.setup{display:flex;flex-direction:column;gap:10px}
.qr{align-self:center;width:200px;box-sizing:border-box;background:#fff;padding:10px;border-radius:10px;line-height:0}
.qr:empty{display:none}
.qr img,.qr canvas{width:180px!important;height:180px!important}
.keyline code{font-size:13px;word-break:break-all;color:var(--text);background:var(--panel2);padding:2px 6px;border-radius:6px;user-select:all}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px;margin:0;padding:12px 12px 12px 34px;background:var(--panel2);border-radius:10px;font-family:ui-monospace,Consolas,monospace;font-size:15px}
[data-view][hidden]{display:none!important}
.perks .buy{align-self:flex-start}
.perks .row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.perks img{width:100%;max-height:120px;object-fit:contain;border-radius:8px}
.badge{padding:4px 10px;border-radius:999px;background:#3a2c08;color:var(--gold);font-size:12px;font-weight:700;border:1px solid #5a4510}
.links{list-style:none;margin:6px 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.links li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--panel2);border-radius:10px;font-size:14px}
.links .pf{font-weight:700}
.links .who{color:var(--soft);flex:1;overflow-wrap:anywhere}
.links .link{min-height:28px;padding:0}
.linkcode{margin-bottom:8px}
.cmd code{display:inline-block;font-size:22px;font-weight:700;letter-spacing:1px;padding:8px 14px;background:var(--panel2);border:1px dashed var(--line2);border-radius:10px;user-select:all;color:var(--gold)}