/* Bad Actors Shootout. Night-street look, single dark theme by choice. Arena on top, crew, leaderboard, Bosses, rules. */
:root{
  color-scheme:dark;
  --night:#11131c; --street:#1a1d2a; --brick:#262a3b; --chalk:#ece6d6; --dim:#9497ab;
  --brass:#e7b84a; --blood:#e2574c; --neon:#5fc3c9;
  --f-display:"Pixelify Sans","Courier New",monospace;
  --f-body:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-num:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{background:var(--night);color:var(--chalk)}
body{font-family:var(--f-body);font-size:17px;line-height:1.4}
.wrap{max-width:980px;margin:0 auto;padding-inline:16px;padding-block:18px 56px;display:grid;gap:30px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.45}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px}
.brand{display:grid;gap:2px}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,9vw,64px);line-height:.9;margin:0;letter-spacing:.02em;color:var(--brass);text-wrap:balance}
.proto{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--night);background:var(--neon);padding:4px 8px;border-radius:2px}
.side{display:grid;gap:8px;justify-items:end}
@media (max-width:520px){.side{justify-items:start}}
.clock{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:13px;color:var(--dim)}
.clock b{color:var(--chalk);font-weight:500}
.clock .pot b{color:var(--brass)}
h2{font-family:var(--f-display);font-weight:500;font-size:24px;margin:0;letter-spacing:.02em}
.sec{display:grid;gap:12px}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.hint{color:var(--dim);font-size:15px;margin:0;max-width:62ch}

/* Arena */
.arena{background:linear-gradient(180deg,var(--street),var(--night));border:1px solid var(--brick);border-radius:4px;padding:16px;display:grid;gap:14px;position:relative;overflow:hidden}
.duel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.fighter{display:grid;gap:6px;min-width:0}
.fighter canvas{width:100%;max-width:240px;aspect-ratio:1;image-rendering:pixelated;display:block;border-radius:3px;justify-self:center;transition:filter .3s,transform .3s}
.fighter.r canvas{transform:scaleX(-1)}
.fighter .nm{font-family:var(--f-num);font-weight:700;letter-spacing:.04em;font-size:22px;text-align:center;line-height:1}
.fighter .st{font-family:var(--f-mono);font-size:12px;color:var(--dim);text-align:center;font-variant-numeric:tabular-nums}
.fighter.lost canvas{filter:grayscale(1) brightness(.55)}
.fighter.lost.r canvas{transform:scaleX(-1) rotate(-4deg) scale(.94)}
.fighter.lost.l canvas{transform:rotate(4deg) scale(.94)}
.fighter.won .nm{color:var(--brass)}
.vs{display:grid;justify-items:center;gap:4px;min-width:64px}
.vs .odds{font-family:var(--f-num);font-weight:700;font-size:34px;color:var(--brass);font-variant-numeric:tabular-nums;line-height:1}
.vs small{font-family:var(--f-mono);font-size:10px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.banner{font-family:var(--f-display);font-size:clamp(28px,7vw,46px);text-align:center;min-height:1.1em;line-height:1.1;letter-spacing:.04em}
.banner.win{color:var(--brass)} .banner.lose{color:var(--blood)}
.flash{position:absolute;inset:0;background:var(--chalk);opacity:0;pointer-events:none}
.flash.go{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{translate:0}25%{translate:-6px 0}50%{translate:5px 0}75%{translate:-3px 0}}
.result{font-family:var(--f-mono);font-size:13px;color:var(--dim);text-align:center;min-height:1.4em;font-variant-numeric:tabular-nums}
.result b{color:var(--chalk);font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.btn{font-family:var(--f-display);font-size:19px;letter-spacing:.04em;background:var(--brass);color:var(--night);border:0;border-radius:3px;padding:12px 22px}
.btn.alt{background:transparent;color:var(--chalk);border:1px solid var(--brick)}
.btn.alt:hover{border-color:var(--dim)}
.btn.pay{background:transparent;color:var(--brass);border:1px solid var(--brass)}

/* Crew */
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{display:grid;gap:8px;padding:10px;background:var(--street);border:1px solid var(--brick);border-radius:4px;text-align:left;min-width:0}
.card.sel{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
.card canvas{width:100%;aspect-ratio:1;image-rendering:pixelated;display:block;border-radius:2px}
.card .row{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.card .id{font-family:var(--f-num);font-weight:700;letter-spacing:.04em;font-size:20px;line-height:1}
.card .boss{font-family:var(--f-mono);font-size:10px;color:var(--night);background:var(--brass);padding:1px 5px;border-radius:2px}
.card .meta{font-family:var(--f-mono);font-size:12px;color:var(--dim);display:grid;gap:2px;font-variant-numeric:tabular-nums}
.card .meta b{color:var(--chalk);font-weight:500}
.ammo{display:flex;gap:4px;align-items:center;min-height:12px}
.ammo i{width:9px;height:12px;border-radius:2px 2px 1px 1px;background:var(--brass)}
.ammo i.spent{background:var(--brick)}
.ammo i.paid{background:var(--neon)}
.clk{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;color:var(--dim);background:none;border:1px solid var(--brick);border-radius:3px;padding:6px 8px;justify-content:center}
.clk[aria-pressed="true"]{color:var(--neon);border-color:var(--neon)}
.add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.add input{font-family:var(--f-mono);font-size:14px;color:var(--chalk);background:var(--street);border:1px solid var(--brick);border-radius:3px;padding:9px 10px;width:110px}

/* Leaderboard */
.board{display:grid;border-top:1px solid var(--brick)}
.lr{display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--brick)}
.lr canvas{width:40px;height:40px;image-rendering:pixelated;border-radius:2px;display:block}
.lr .pos{font-family:var(--f-num);font-weight:700;font-size:20px;color:var(--dim);text-align:center}
.lr:first-child .pos{color:var(--brass)}
.lr .who{min-width:0;display:grid}
.lr .who span{font-family:var(--f-num);font-weight:600;letter-spacing:.03em;font-size:18px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .who small{font-family:var(--f-mono);font-size:11px;color:var(--dim)}
.lr .pts{font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.lr.me .who span{color:var(--neon)}
.lr.team .who small::after{content:" · team, no prizes";color:var(--blood)}

/* Bosses */
.bosses{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.bcard{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;padding:8px;background:var(--street);border:1px solid var(--brick);border-radius:4px;text-align:left}
.bcard:hover{border-color:var(--brass)}
.bcard canvas{width:56px;height:56px;image-rendering:pixelated;border-radius:2px;display:block}
.bcard b{font-family:var(--f-num);font-weight:700;letter-spacing:.03em;font-size:17px;display:block;line-height:1.1}
.bcard span{font-size:14px;color:var(--dim);line-height:1.2;display:block}

/* Week end */
.weekend{background:var(--street);border:1px solid var(--brass);border-radius:4px;padding:16px;display:grid;gap:10px}
.weekend h3{font-family:var(--f-display);font-weight:500;font-size:22px;margin:0;color:var(--brass)}
.weekend p{margin:0}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 24px;margin:0;padding:0;list-style:none}
.rules li{border-top:1px solid var(--brick);padding-top:8px;font-size:16px;color:var(--dim)}
.rules li b{display:block;color:var(--chalk);font-weight:600;letter-spacing:.02em}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));translate:-50% 0;background:var(--chalk);color:var(--night);font-family:var(--f-mono);font-size:13px;padding:10px 14px;border-radius:3px;max-width:calc(100% - 32px)}
@media (max-width:520px){
  .duel{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px}
  .vs{min-width:52px} .vs .odds{font-size:24px}
  .fighter .nm{font-size:16px}
  .crew{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.flash.go,.shake{animation:none}.fighter canvas{transition:none}}

html{scroll-behavior:smooth}
a{color:var(--neon)}
.nav{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.nav a{color:var(--dim);text-decoration:none} .nav a:hover,.nav a[aria-current]{color:var(--chalk)}
.wallet{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.wallet .addr{font-family:var(--f-mono);font-size:12px;color:var(--neon)}
.btn.sm{font-size:15px;padding:8px 14px}
.notice{border:1px solid var(--brick);border-radius:4px;padding:12px 14px;color:var(--dim);font-size:16px;display:grid;gap:8px}
.notice b{color:var(--chalk)}
.notice.warn{border-color:var(--blood);color:var(--chalk)}
.empty{color:var(--dim);font-size:16px;margin:0}
.card{cursor:pointer;font:inherit;color:inherit}
.card:hover{border-color:var(--dim)}
.card .tags{display:flex;gap:6px;flex-wrap:wrap;min-height:18px}
.tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;padding:2px 6px;border-radius:2px;border:1px solid var(--brick);color:var(--dim)}
.tag.on{border-color:var(--neon);color:var(--neon)}
.tag.boss{background:var(--brass);border-color:var(--brass);color:var(--night)}
.crewbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.lr{cursor:pointer}
.lr .acts{display:flex;gap:8px;align-items:center}
.lr .ch{font-family:var(--f-mono);font-size:11px;background:none;border:1px solid var(--brick);border-radius:3px;color:var(--brass);padding:4px 8px}
.bcard{font:inherit;color:inherit;cursor:pointer}
.feed{display:grid;border-top:1px solid var(--brick)}
.fr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--brick);font-size:16px}
.fr .res{font-family:var(--f-mono);font-size:12px;padding:2px 6px;border-radius:2px}
.fr .res.w{color:var(--night);background:var(--brass)} .fr .res.l{color:var(--chalk);background:var(--brick)}
.fr .meta{font-family:var(--f-mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;text-align:right}
.fr .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mono{font-family:var(--f-mono);font-size:12px;word-break:break-all;color:var(--dim)}
table.seeds{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:12px}
table.seeds td,table.seeds th{border-bottom:1px solid var(--brick);padding:6px 4px;text-align:left;vertical-align:top;word-break:break-all}
.tablewrap{overflow-x:auto}
.progress{font-family:var(--f-mono);font-size:13px;color:var(--dim)}
.picker{display:grid;gap:8px}
.picker button{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.picker img{width:24px;height:24px}
dialog{background:var(--street);color:var(--chalk);border:1px solid var(--brick);border-radius:4px;padding:18px;max-width:min(420px,calc(100% - 32px))}
dialog::backdrop{background:rgba(5,6,10,.7)}
dialog h3{font-family:var(--f-display);font-weight:500;margin:0 0 10px}
.hidden{display:none!important}
.mt{margin-top:4px}
.sum{display:grid;gap:4px;font-family:var(--f-mono);font-size:13px;color:var(--dim)}
.duel.one{grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:center}
@media (max-width:520px){.duel.one{grid-template-columns:1fr}}
.sum b{color:var(--chalk);font-weight:500}
.sum .big{font-family:var(--f-num);font-weight:700;font-size:28px;color:var(--brass)}
h3{font-family:var(--f-display);font-weight:500;font-size:18px;margin:6px 0 0}
input[type=text]{font-family:var(--f-mono);font-size:13px;color:var(--chalk);background:var(--street);border:1px solid var(--brick);border-radius:3px;padding:8px 10px}
.ok{color:var(--neon)} .bad{color:var(--blood)}
.vbtn{font-family:var(--f-mono);font-size:11px;background:none;border:1px solid var(--brick);border-radius:3px;color:var(--neon);padding:3px 7px}
.bosses{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.sechead > span{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
input[type=text]{max-width:100%;min-width:0}
.notice{overflow-wrap:anywhere;min-width:0}