:root{--bg:#f3ede1;--bg-2:#e7ddc9;--text:#5c5347;--text-h:#2a2018;--border:#d8cdb8;--accent:#8a2b2b;--accent-border:#8a2b2b73;--gold:#9c7726;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:"Trajan Pro", "Optima", Georgia, "Times New Roman", serif;--mono:ui-monospace, Consolas, monospace;font:18px/1.5 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#17130d;--bg-2:#211a11;--text:#a99f8c;--text-h:#f0e8d8;--border:#3a3227;--accent:#cc5b4e;--accent-border:#cc5b4e80;--gold:#cba24a}}body{background:radial-gradient(120% 80% at 50% 0%, var(--bg-2), transparent 60%), linear-gradient(var(--bg), var(--bg));background-attachment:fixed;min-height:100svh;margin:0}h1{font-family:var(--heading);color:var(--text-h)}.arena{box-sizing:border-box;flex-direction:column;align-items:center;gap:28px;max-width:820px;min-height:100svh;margin:0 auto;padding:44px 24px 28px;display:flex}.masthead{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex}.spqr{font-family:var(--heading);letter-spacing:6px;color:var(--gold);margin:0;font-size:14px}.arena h1{letter-spacing:6px;text-transform:uppercase;margin:0;font-size:60px}@media (width<=1024px){.arena h1{font-size:42px}}.streak{color:var(--text);margin:4px 0 0}.streak strong{color:var(--text-h)}.best{opacity:.7}.link-button{color:var(--accent);cursor:pointer;text-underline-offset:3px;background:0 0;border:none;padding:4px;font-size:15px;text-decoration:underline}.link-button:hover{filter:brightness(1.1)}.link-button:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:3px}.share-msg{color:var(--text-h);word-break:break-word;max-width:40ch;margin:2px 0 0;font-size:14px}.tagline{color:var(--text);text-align:center;font-style:italic}.styles{flex-wrap:wrap;justify-content:center;gap:16px;width:100%;display:flex}.style-card{text-align:left;border:1px solid var(--border);background:color-mix(in srgb, var(--bg-2) 40%, transparent);cursor:pointer;border-radius:10px;flex-direction:column;flex:200px;gap:8px;max-width:240px;padding:20px;transition:border-color .2s,transform .1s,box-shadow .2s;display:flex}.style-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 20px -12px #0006}.style-card:focus-visible{outline:3px solid var(--accent-border);outline-offset:3px}.style-name{font-family:var(--heading);color:var(--text-h);font-size:24px}.style-blurb{font-size:15px;line-height:1.45}.style-beats{color:var(--gold);margin-top:auto;padding-top:4px;font-size:13px}.result{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:580px;display:flex}.outcome{font-family:var(--heading);margin:0;font-size:28px}.outcome.win{color:var(--text-h)}.outcome.loss{color:var(--accent)}.matchup{color:var(--text);margin:-6px 0 0;font-style:italic}.log{text-align:left;border:1px solid var(--border);background:color-mix(in srgb, var(--bg-2) 35%, transparent);box-sizing:border-box;border-radius:10px;width:100%;margin:0;padding:18px 20px 18px 42px;line-height:1.7;list-style:decimal}.log li{padding:2px 0}.log li:first-child,.log li:last-child{font-family:var(--heading);color:var(--text-h);margin-left:-22px;list-style:none}.seed{font-size:13px;font-family:var(--mono);color:var(--text);opacity:.7}.actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.fight{font-family:var(--heading);letter-spacing:1px;text-transform:uppercase;color:#fff;background:var(--accent);cursor:pointer;border:2px solid #0000;border-radius:6px;padding:12px 40px;font-size:20px;transition:transform .1s,filter .2s}.fight:hover{filter:brightness(1.1)}.fight:active{transform:translateY(1px)}.fight:focus-visible{outline:3px solid var(--accent-border);outline-offset:3px}.secondary{font-family:var(--heading);color:var(--text-h);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:12px 24px;font-size:16px;transition:border-color .2s}.secondary:hover{border-color:var(--accent)}.secondary:focus-visible{outline:3px solid var(--accent-border);outline-offset:3px}.footer{border-top:1px solid var(--border);flex-direction:column;align-items:center;gap:12px;width:100%;max-width:580px;margin-top:auto;padding-top:20px;display:flex}.how{width:100%}.how summary{cursor:pointer;font-family:var(--heading);color:var(--text-h);padding:4px 0}.how summary:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:3px}.how-body{text-align:left;padding-top:8px;font-size:15px;line-height:1.6}.how-body p{margin:0 0 10px}.how-body strong{color:var(--text-h)}.credit{letter-spacing:1px;color:var(--gold);opacity:.8;margin:0;font-size:13px}