:root{--bg:#14161c;--panel:#1e2129;--panel2:#262a34;--ink:#e8e2d2;--sub:#9a9484;--gold:#ffd86b;--red:#c0392b;--blue:#2980b9;--line:#3a3f4c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 Georgia,'Times New Roman',serif}
button{font:inherit;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:8px 14px;cursor:pointer}
button:hover:not(:disabled){border-color:var(--gold)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.bar .fill{transition:none}}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--gold);color:#221a00;font-weight:bold;border-color:var(--gold)}
button.mini{padding:2px 9px;line-height:1}
select,input{font:inherit;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:7px 9px}
header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
header h1{margin:0;font-size:clamp(15px,4.5vw,20px);letter-spacing:.06em;color:var(--gold)}
@media(max-width:600px){header .sub{display:none}}
header .sub{font-size:13px}
main{padding:16px 18px;max-width:1240px;margin:0 auto}
.screen{display:block}
.sub{color:var(--sub);font-size:13px}
.nick{color:var(--gold);font-style:italic}
.belt{background:var(--gold);color:#221a00;font-size:11px;font-weight:bold;padding:1px 6px;border-radius:3px;letter-spacing:.05em}
.warn{color:#ff9d6b}
h2{margin:.2em 0 .6em;color:var(--gold);font-weight:normal;letter-spacing:.04em}
h3{margin:.2em 0 .4em}
h4{margin:.3em 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px}
.title-wrap{text-align:center;padding:50px 0}
.title-wrap h1{font-size:clamp(28px,9vw,52px);margin:0;color:var(--gold);letter-spacing:.08em}
.title-wrap p.tag{color:var(--sub);margin:0 0 30px}
.title-wrap .menu button{display:block;width:min(280px,90%);margin:10px auto;padding:12px}
.attr-row{display:grid;grid-template-columns:110px 28px 34px 28px 1fr;gap:6px;align-items:center;margin:4px 0}
.fighter-card .attr-row{grid-template-columns:110px 34px 1fr}
.attr-name{color:var(--sub)}
.attr-val{text-align:center;font-weight:bold}
.bar{height:10px;background:#0f1116;border-radius:5px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,#a67c00,var(--gold))}
.bar.hp .fill{background:linear-gradient(90deg,#8e1b1b,#e74c3c)}
.bar.sta .fill{background:linear-gradient(90deg,#1f6f8b,#5dade2)}
.cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.cols,.cols2{grid-template-columns:1fr}}
.offer{border:1px solid var(--line);border-radius:6px;padding:10px;margin:8px 0;background:var(--panel2)}
.offer.title-fight{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.offer .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.offer h4{margin:2px 0}
.offer button{margin-top:6px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:3px 6px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--sub);font-weight:normal}
tr.you td{color:var(--gold);font-weight:bold}
.upgrade{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
ul.log{list-style:none;margin:0;padding:0;font-size:13px;max-height:260px;overflow:auto}
ul.log li{padding:3px 0;border-bottom:1px dotted var(--line)}
ul.log li.win b{color:#7bd88f} ul.log li.loss b{color:#ff7b6b}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.field{display:flex;flex-direction:column;gap:4px}
.field label{color:var(--sub);font-size:13px}
/* fight */
.fight-grid{display:grid;grid-template-columns:1fr 340px;gap:14px}
@media(max-width:1000px){.fight-grid{grid-template-columns:1fr}}
#ring{width:100%;max-width:800px;display:block;background:#1b1d24;border:1px solid var(--line);border-radius:6px}
.corner{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0}
.corner .bar{margin:4px 0}
.corner .name{font-weight:bold}
.corner .blue{text-align:right}
.clock{display:flex;justify-content:space-between;align-items:center;font-size:18px;margin:6px 0}
.clock #fx-clock{font-family:'Courier New',monospace;color:var(--gold);font-size:24px}
#fx-strats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
@media(max-width:700px){#fx-strats{grid-template-columns:1fr 1fr}}
button.strat{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:8px;gap:2px}
button.strat span{font-size:11px;color:var(--sub);line-height:1.2}
button.strat.on{border-color:var(--gold);background:#3a3420}
button.on{border-color:var(--gold);color:var(--gold)}
#fx-slate{background:#111;color:#f1eadb;border:2px solid #4b4b4b;border-radius:4px;padding:12px;font-family:'Courier New',monospace;font-size:13px;min-height:140px}
#fx-slate h4{margin:0 0 8px;color:var(--gold);font-family:Georgia,serif}
.slate-row{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dotted #444}
.slate-advice{margin-top:10px;color:var(--gold)}
#fx-result{background:var(--panel2);border:2px solid var(--gold);border-radius:6px;padding:14px;margin-top:12px}
table.cards{max-width:420px}
.help p{max-width:760px}
.trait{display:inline-block;background:#3a3420;color:var(--gold);border:1px solid #6b5a1e;border-radius:10px;padding:0 8px;font-size:11px;margin:2px 2px 0 0;cursor:help}
.quote{font-style:italic;color:#d8cfb6;margin:6px 0 2px;border-left:2px solid var(--gold);padding-left:8px}
.bio{font-size:13px;color:#c9c2b0;margin:8px 0 0}
.hot{color:#7bd88f}
.tape{line-height:1.5;min-height:2.6em}