/* Agent Arena: the battle table in the Lounge. Sits over the Midnight City store. */
.nft{
	--felt:#141235;--felt2:#1b1846;--rim:#0a0a1c;--edge:#3b52ff;--lit:#6b8aff;--ice:#5fe3ff;--amber:#ffb547;--bone:#ece9e1;--mute:#9a9cb6;--hpg:#7dffb0;--hpm:#ffd166;--hpl:#ff5d7a;--ink:#07071a;
	--px:"Silkscreen","Outfit",monospace;--sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
	--t-common:#b9c0d4;--t-uncommon:#45c486;--t-rare:#4f8cff;--t-epic:#b06bff;--t-legendary:#ffb347;--t-mythic:#ff4fd8;
	position:fixed;inset:0;z-index:100000;font-family:var(--sans);color:var(--bone);font-size:15px;line-height:1.45;
}
.nft[hidden]{display:none!important}
.nft *,.nft *::before,.nft *::after{box-sizing:border-box}
.nft [hidden]{display:none!important}
html.nft-open,html.nft-open body{overflow:hidden}
.nft__dim{position:absolute;inset:0;background:rgba(4,4,14,.72);opacity:0;transition:opacity .22s}
.nft.is-in .nft__dim{opacity:1}
.nft__table{position:absolute;inset:max(10px,env(safe-area-inset-top)) 10px 10px;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 50% 45%,var(--felt2),var(--felt) 60%,#0f0d2a);border:3px solid var(--rim);box-shadow:0 0 0 2px var(--edge),0 0 40px rgba(59,82,255,.35),inset 0 0 80px rgba(0,0,0,.45);border-radius:22px;overflow:hidden;transform:scale(.97);opacity:0;transition:transform .22s,opacity .22s}
.nft.is-in .nft__table{transform:none;opacity:1}
.nft__table::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(107,138,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(107,138,255,.045) 1px,transparent 1px);background-size:24px 24px}
.nft__bar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(107,138,255,.22);background:rgba(7,7,26,.55)}
.nft__where b{font-family:var(--px);font-weight:700;font-size:15px;color:var(--bone);letter-spacing:.02em}
.nft__where span{color:var(--mute);margin-left:8px;font-size:13px}
.nft__barr{display:flex;align-items:center;gap:12px}
.nft__rec{font-family:var(--px);font-size:12px;color:var(--mute)}
.nft__up{font:600 14px var(--sans);color:var(--bone);background:transparent;border:1px solid rgba(236,233,225,.35);padding:7px 14px;border-radius:999px;cursor:pointer}
.nft__up:hover{border-color:var(--bone)}
.nft__body{position:relative;flex:1;overflow:auto;padding:16px;overscroll-behavior:contain}
.nft button{font-family:inherit}
.nft :focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.nft a{color:var(--ice)}
.nft h2{font:700 15px var(--px);margin:0 0 6px;color:var(--bone);letter-spacing:.02em}
.nft h3{font-size:15px;margin:0 0 4px}
.nft .note{color:var(--mute);font-size:13.5px;margin:0 0 10px;max-width:60ch}
.nft .dim{color:var(--mute)}
.nft-load,.nft-empty{display:grid;place-items:center;min-height:50vh;color:var(--mute);text-align:center;gap:12px}
.nft__toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);border:1px solid var(--edge);padding:10px 16px;border-radius:10px;max-width:min(90vw,520px);font-size:14px;z-index:5}

/* buttons */
.nb{font:600 14px var(--sans);color:var(--bone);background:#1a1f55;border:1px solid var(--lit);padding:10px 16px;border-radius:10px;cursor:pointer}
.nb:hover:not(:disabled){background:#232a73}
.nb:disabled{opacity:.45;cursor:not-allowed}
.nb--go{background:var(--edge);border-color:#8da2ff;font-size:15px;padding:12px 20px;width:100%}
.nb--go:hover:not(:disabled){background:#5068ff}
.nb--q{background:transparent;border-color:rgba(154,156,182,.45)}
.nb--s{padding:6px 11px;font-size:13px}
.nb--bad{background:transparent;border-color:rgba(255,93,122,.55);color:#ffb3c1}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* pips */
.pips{display:inline-flex;gap:3px}
.pips i{width:9px;height:9px;border:1px solid currentColor;opacity:.4;transform:rotate(45deg)}
.pips i.on{opacity:1;background:currentColor}
.pips--cyan{color:var(--ice)}
.pips--amber{color:var(--amber)}

/* portraits */
.pt{width:42px;height:60px;image-rendering:pixelated;flex:none}
.pt--k{width:56px;height:80px}

/* --- trainer card: the multiplier -------------------------------------------------- */
.tc{--tcol:var(--t-common);position:relative;background:linear-gradient(180deg,#191746,#100f2c);border:1px solid rgba(185,192,212,.35);border-radius:12px;padding:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.tc.tier-uncommon{--tcol:var(--t-uncommon)}.tc.tier-rare{--tcol:var(--t-rare)}.tc.tier-epic{--tcol:var(--t-epic)}.tc.tier-legendary{--tcol:var(--t-legendary)}.tc.tier-mythic{--tcol:var(--t-mythic)}
.tc{border-color:color-mix(in srgb,var(--tcol) 55%,transparent)}
.tc__id{display:flex;gap:10px;align-items:center}
.tc__id .pt{background:rgba(0,0,0,.35);border-radius:6px}
.tc__name{display:block;font:700 14px var(--px)}
.tc__title{display:block;font-size:13px;color:var(--bone);opacity:.85}
.tc__meta{display:block;font-size:12px;color:var(--mute)}
.tc__mult{margin:12px 0 8px;padding:10px 12px;border-radius:10px;background:radial-gradient(120% 140% at 0% 0%,rgba(255,181,71,.18),rgba(255,181,71,.04));border:1px solid rgba(255,181,71,.45);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.tc__x{grid-row:span 2;font:700 30px/1 var(--px);color:var(--amber);text-shadow:0 0 14px rgba(255,181,71,.45);letter-spacing:-.02em}
.tc__c{font-size:12.5px;color:#ffd9a0}
.tc__mult.is-hot .tc__x{animation:nft-pulse 1.4s ease-in-out infinite}
@keyframes nft-pulse{50%{text-shadow:0 0 22px rgba(255,181,71,.9)}}
.tc__en{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);margin-bottom:6px}
.tc__en b{font:700 12px var(--px);color:var(--ice);margin-left:auto}
.tc__flags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.tc__flags span{font-size:11.5px;color:var(--mute);border:1px solid rgba(154,156,182,.3);padding:1px 7px;border-radius:999px}
.tc__flags .bad{color:#ffb3c1;border-color:rgba(255,93,122,.5)}
.tc__flags .ok{color:var(--hpg);border-color:rgba(125,255,176,.5)}
.tc__stats{margin:0;display:grid;gap:3px}
.tc__s{display:grid;grid-template-columns:54px 1fr;gap:6px;align-items:baseline;font-size:12.5px}
.tc__s dt{color:var(--mute)}
.tc__s dd{margin:0;display:flex;gap:7px;align-items:baseline}
.tc__s dd b{font:700 12px var(--px);min-width:18px}
.tc__s dd span{color:#c9cbe0}
.tc__s.is-focus dt,.tc__s.is-focus dd b{color:var(--amber)}
.tc__focus{margin:8px 0 0;font-size:12.5px;color:#c9cbe0}

/* --- fighter cards ---------------------------------------------------------------- */
.fc{--tcol:var(--t-common);position:relative;min-width:0;display:flex;flex-direction:column;gap:5px;padding:8px;background:linear-gradient(180deg,#1d1a4a,#121033);border:2px solid var(--tcol);border-radius:12px;color:var(--bone);text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.4);font:inherit}
.fc.tier-uncommon{--tcol:var(--t-uncommon)}.fc.tier-rare{--tcol:var(--t-rare)}.fc.tier-epic{--tcol:var(--t-epic)}.fc.tier-legendary{--tcol:var(--t-legendary)}
.fc.tier-mythic{--tcol:var(--t-mythic);border-image:linear-gradient(135deg,#ff4fd8,#6b8aff,#4ff0ff,#ffb347) 1}
button.fc{cursor:pointer}
.fc__head{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.fc__head b{font:700 12px var(--px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc__head em{font:400 11px var(--px);font-style:normal;color:var(--mute);flex:none}
.fc__art{display:block;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:#161126;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc) 35%,transparent)}
.fc__art img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.fc__role{display:flex;align-items:center;gap:5px;font-size:12px;color:#c9cbe0}
.fc__role svg{width:13px;height:13px;fill:currentColor}
.fc__role i{margin-left:auto;font-style:normal;color:var(--tcol);font-size:11.5px}
.fc__hp{display:block;height:7px;background:rgba(0,0,0,.45);border-radius:4px;overflow:hidden}
.fc__hp i{display:block;height:100%;background:var(--hpg);transition:width .45s ease}
.fc__hp i.mid{background:var(--hpm)}.fc__hp i.low{background:var(--hpl)}
.fc__hpn{font:400 11px var(--px);color:var(--mute);text-align:right;margin-top:-3px}
.fc__st{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid rgba(95,227,255,.45);color:#bff3ff}
.chip.bad{border-color:rgba(255,93,122,.55);color:#ffc0cb}
.chip.dim{border-color:rgba(154,156,182,.35);color:var(--mute)}
.fc__badge{position:absolute;top:-9px;right:8px;font:700 10px var(--px);background:var(--amber);color:#1b1100;padding:2px 6px;border-radius:5px}
.fc--big{width:clamp(170px,19vw,220px)}
.fc--big .fc__head b{font-size:13.5px}
.fc--small{width:118px;padding:6px;gap:4px;border-width:1px}
.fc--small .fc__head b{font-size:10.5px}
.fc--small .fc__head em{font-size:9.5px}
.fc--pick{width:150px}
.fc.is-ko{filter:grayscale(1) brightness(.55)}
.fc.is-ko::after{content:"KO";position:absolute;z-index:2;inset:auto 0 42% 0;text-align:center;font:700 20px var(--px);color:var(--hpl);text-shadow:0 2px 0 #000}
.fc.is-picked{outline:2px solid var(--amber);outline-offset:2px}
.fc.is-pickable{outline:2px dashed var(--amber);outline-offset:3px;animation:nft-bob 1.2s ease-in-out infinite}
@keyframes nft-bob{50%{transform:translateY(-3px)}}
.fc[aria-disabled="true"]{cursor:default}

/* --- lobby ------------------------------------------------------------------------- */
.nft-banner{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid rgba(255,181,71,.5);background:rgba(255,181,71,.08);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.nft-banner p{margin:0;max-width:60ch}
.nft-resume{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.nft-resume li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(7,7,26,.5);border:1px solid rgba(107,138,255,.3);border-radius:10px;padding:8px 12px;font-size:14px}
.nft-resume em{font-style:normal;color:var(--amber);margin-left:6px}
.nft-resume span:last-child{display:flex;gap:6px}
.lobby{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr) minmax(240px,290px);gap:18px;align-items:start}
.lobby section{min-width:0}
.tpicks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tpick{display:flex;align-items:center;gap:6px;background:rgba(7,7,26,.5);border:1px solid rgba(154,156,182,.3);border-radius:10px;padding:3px 10px 3px 3px;color:var(--bone);cursor:pointer;text-align:left}
.tpick .pt{width:28px;height:40px}
.tpick b{display:block;font-size:13px}
.tpick small{display:block;font-size:11.5px;color:var(--mute)}
.tpick.on{border-color:var(--amber);background:rgba(255,181,71,.1)}
.slots{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.slot{width:150px;min-height:190px;border:1px dashed rgba(154,156,182,.35);border-radius:12px;display:grid;place-items:center}
.slot--lead{border-color:rgba(255,181,71,.55)}
.slot__e{color:var(--mute);font-size:13px}
.fgrid{display:flex;flex-wrap:wrap;gap:10px}
.lobby__info{margin-top:12px}
.opp{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.opp p{margin:2px 0 0;font-size:13.5px;color:var(--mute)}
.friend{margin-top:18px;padding-top:14px;border-top:1px solid rgba(107,138,255,.2)}
.join{margin-top:10px}
.join label{display:block;font-size:13px;color:var(--mute);margin-bottom:4px}
.join span{display:flex;gap:6px}
.join input{flex:1;min-width:0;font:700 15px var(--px);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--bone);border:1px solid rgba(154,156,182,.45);border-radius:10px;padding:9px 10px}
.how{margin-top:16px;font-size:13.5px}
.how summary{cursor:pointer;color:var(--ice)}
.how ul{padding-left:18px;margin:8px 0 0;color:#c9cbe0;display:grid;gap:5px}

/* fighter info */
.inf{background:rgba(7,7,26,.55);border:1px solid rgba(107,138,255,.25);border-radius:12px;padding:10px 12px;font-size:13.5px}
.inf p{margin:6px 0 0}
.inf__h{display:flex;gap:10px;align-items:center}
.inf__h img{width:64px;aspect-ratio:4/3;object-fit:cover;border-radius:6px;image-rendering:pixelated}
.inf__h b{display:block;font:700 13px var(--px)}
.inf__h span{font-size:12.5px;color:var(--mute)}
.inf__s{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--mute)}
.inf__s b{color:var(--bone);font:700 12px var(--px)}
.inf--idle{color:var(--mute)}

/* starter */
.starter{max-width:1020px;margin:0 auto}
.starter .nb--go{width:auto}
.stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:12px 0 18px}
.st{display:flex;flex-direction:column;gap:8px;align-items:center;background:transparent;border:0;color:var(--bone);cursor:pointer;padding:6px;border-radius:14px}
.st .fc--pick{width:100%}
.st.on{background:rgba(255,181,71,.12);box-shadow:0 0 0 2px var(--amber)}
.st__t{font-size:12.5px;color:#c9cbe0;text-align:left}
.st__t b{color:var(--bone)}

/* waiting */
.wait{max-width:460px;margin:8vh auto;text-align:center;display:grid;gap:14px;justify-items:center}
.code{font:700 38px var(--px);letter-spacing:.18em;padding:12px 20px;border:2px solid var(--amber);border-radius:12px;color:var(--amber);background:rgba(255,181,71,.07);user-select:all}

/* --- battle ------------------------------------------------------------------------- */
.bt{position:relative;display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr) minmax(230px,280px);grid-template-areas:"opp mat rail" "me mat rail" "me acts rail";grid-template-rows:auto 1fr auto;gap:14px;min-height:100%}
.bt__side--opp{grid-area:opp}
.bt__side--me{grid-area:me;align-self:end}
.bt__side--opp .tc{opacity:.92}
/* the battleground: a playmat with card zones */
.mat{grid-area:mat;position:relative;display:grid;grid-template-rows:1fr auto 1fr;gap:6px;padding:14px 18px;border-radius:26px;background:
	radial-gradient(60% 50% at 50% 50%,rgba(59,82,255,.16),transparent 70%),
	repeating-linear-gradient(0deg,rgba(107,138,255,.05) 0 1px,transparent 1px 32px),
	repeating-linear-gradient(90deg,rgba(107,138,255,.05) 0 1px,transparent 1px 32px),
	linear-gradient(180deg,#120f33,#17144a 50%,#120f33);
	border:2px solid rgba(107,138,255,.35);box-shadow:inset 0 0 0 6px rgba(7,7,26,.55),inset 0 0 60px rgba(0,0,0,.5);min-height:0}
.mat::before{content:"";position:absolute;left:18px;right:18px;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,138,255,.55),transparent)}
.mat.is-mine .mat__half--me .zone--active,.mat.is-theirs .mat__half--opp .zone--active{box-shadow:0 0 0 2px var(--amber),0 0 26px rgba(255,181,71,.35)}
.mat__half{display:flex;align-items:center;justify-content:center;gap:26px}
.mat__half--opp{align-items:flex-start}
.mat__half--me{align-items:flex-end}
.mat__bench{display:flex;gap:12px}
.zone{position:relative;border:1px dashed rgba(154,156,182,.32);border-radius:14px;padding:16px 8px 8px;background:rgba(7,7,26,.25);transition:box-shadow .25s}
.zone__l{position:absolute;top:2px;left:10px;font:400 9.5px var(--px);color:var(--mute);letter-spacing:.04em}
.zone--active{padding:16px 8px 8px}
.bt__side--opp .tc__stats,.bt__side--opp .tc__focus{display:none}
.bt{gap:12px}
.mat__mid{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:4px 0}
.mat__turn{font:400 11.5px var(--px);color:var(--mute)}
.mat__status{font-size:15px;font-weight:600;background:rgba(7,7,26,.7);padding:2px 12px;border-radius:999px}
.mat__coin{position:absolute;left:calc(50% - 150px);top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a8,#ffb547 55%,#a86a10);box-shadow:0 0 0 2px #7a4a06,0 2px 6px rgba(0,0,0,.5)}
.mat__coin i::before{content:"N";position:absolute;inset:0;display:grid;place-items:center;font:700 13px var(--px);color:#5a3504}
.mat__coin.coin--tails i::before{content:"☾";font-size:15px}
.bt > .acts{grid-area:acts;justify-content:center}
.ab{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:118px;padding:9px 12px 9px 30px;position:relative;background:#16184a;border:1px solid rgba(107,138,255,.55);border-radius:12px;color:var(--bone);cursor:pointer;text-align:left}
.ab b{font-size:14px}
.ab span{font-size:12px;color:var(--mute)}
.ab kbd{position:absolute;left:9px;top:10px;font:700 10px var(--px);color:var(--mute)}
.ab:hover:not(:disabled){background:#20246a}
.ab:disabled{opacity:.4;cursor:not-allowed}
.ab--atk{border-color:var(--lit)}
.ab--sig{border-color:var(--amber);background:#2a1f2c}
.ab--sig span{color:#ffd9a0}
.ab--q{background:transparent}
.ab.on{box-shadow:0 0 0 2px var(--amber)}
.acts__need{margin:0;color:var(--amber);font-weight:600}
.rail{grid-area:rail;display:flex;flex-direction:column;gap:10px;min-width:0}
.log{background:rgba(7,7,26,.45);border:1px solid rgba(107,138,255,.2);border-radius:12px;padding:8px 12px;font-size:13px;flex:1;min-height:0}
.log summary{cursor:pointer;color:var(--mute)}
.log ol{list-style:none;margin:6px 0 0;padding:0;max-height:300px;overflow:auto;display:grid;gap:3px}
.log li{color:#c9cbe0}
.log li.me{color:#cfe0ff}
.log li.opp{color:#ffd0dc}
.log li.n{color:var(--mute)}
.rail__acts{display:flex;flex-wrap:wrap;gap:6px}
.fx{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.say{font:700 14px var(--px);background:rgba(7,7,26,.88);border:1px solid var(--lit);padding:8px 14px;border-radius:10px;animation:nft-say .25s ease-out}
.say--opp{border-color:#ff7ab0}
@keyframes nft-say{from{transform:scale(.9);opacity:0}}
.float{position:absolute;left:50%;top:38%;transform:translateX(-50%);font:700 20px var(--px);pointer-events:none;white-space:nowrap;text-shadow:0 2px 0 #000;animation:nft-float 1.2s ease-out forwards;z-index:3}
.float.dmg{color:var(--hpl)}.float.ctr{color:#ff9f6b}.float.heal{color:var(--hpg)}.float.grd{color:var(--ice);font-size:14px}
.float.blk{color:var(--ice);font-size:12px;top:52%}
.float.msg{color:var(--bone);font-size:13px;top:28%}
@keyframes nft-float{to{transform:translate(-50%,-46px);opacity:0}}
.fx-lunge{animation:nft-lunge .45s ease}
.mat__half--opp .fx-lunge{animation-name:nft-lunge-d}
@keyframes nft-lunge{40%{transform:translateY(-18px) scale(1.03)}}
@keyframes nft-lunge-d{40%{transform:translateY(18px) scale(1.03)}}
.fx-hit{animation:nft-hit .4s ease}
@keyframes nft-hit{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.fx-dodge{animation:nft-dodge .45s ease}
@keyframes nft-dodge{40%{transform:translateX(26px);opacity:.4}}
.fx-ko{animation:nft-ko .7s ease}
@keyframes nft-ko{50%{transform:rotate(-6deg) scale(.95)}}
.fx-in{animation:nft-in .5s ease-out}
@keyframes nft-in{from{transform:translateY(30px);opacity:0}}
.banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:4}
.banner b{display:block;font:700 44px var(--px);color:var(--bone);text-shadow:0 0 24px rgba(107,138,255,.8)}
.banner span{color:var(--mute)}
.banner.go{animation:nft-ban 1.5s ease forwards}
@keyframes nft-ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}15%,75%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0}}
.is-busy .ab{cursor:progress}

/* result */
.res-wrap{position:absolute;inset:-16px;display:grid;place-items:start center;padding:6vh 16px;background:rgba(4,4,14,.7);z-index:6;overflow:auto}
.res{width:min(460px,100%);background:#121036;border:2px solid var(--lit);border-radius:16px;padding:20px;display:grid;gap:12px}
.res--win{border-color:var(--amber)}
.res--loss{border-color:#ff7ab0}
.res h2{font-size:30px;margin:0}
.res--win h2{color:var(--amber)}
.res .xp,.res .fxp{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.res .xp li,.res .fxp li{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px}
.res .xp b,.res .fxp b{font:700 12.5px var(--px);color:var(--amber)}
.res .fxp img{width:44px;aspect-ratio:4/3;object-fit:cover;border-radius:5px}
.res .fxp span{flex:1}
.res .fxp small{color:var(--mute)}
.lvl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.lvl b{font:700 13px var(--px)}
.lvl i{grid-column:1/-1;display:block;height:8px;background:rgba(0,0,0,.45);border-radius:4px;overflow:hidden}
.lvl em{display:block;height:100%;background:var(--amber)}
.lvl small{grid-column:1/-1;color:var(--mute);font-size:12.5px}

/* Jack's printed cards (AXO, BLUP, BYTE, HEX-01, NIGHTMAW, BUNKER) */
.fc--img{padding:0;gap:0;background:none;border:0;box-shadow:none;border-radius:12px}
.fc--img .fc__card{display:block;aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.55)}
.fc--img .fc__card img{display:block;width:100%;height:100%;object-fit:contain;background:#07071a}
.fc--img .fc__plate{display:flex;align-items:center;gap:6px;margin-top:6px;padding:4px 7px;background:rgba(7,7,26,.85);border:1px solid rgba(154,156,182,.3);border-radius:8px}
.fc--img .fc__plate em{font:400 10px var(--px);font-style:normal;color:var(--mute);flex:none}
.fc--img .fc__plate .fc__hp{flex:1;height:7px}
.fc--img .fc__plate .fc__hpn{font:700 10.5px var(--px);color:var(--bone);margin:0;flex:none}
.fc--img .fc__plate--lv{justify-content:center}
.fc--img .fc__st{margin-top:5px}
.fc--img.fc--big{width:clamp(150px,12.5vw,185px)}
.fc--img.fc--small{width:92px}
.fc--img.fc--small .fc__plate{padding:3px 5px;gap:4px;margin-top:4px}
.fc--img.fc--small .fc__plate em{display:none}
.fc--img.fc--small .fc__plate--lv{display:none}
.fc--img.fc--small .fc__plate .fc__hpn{font-size:9px}
.fc--img.fc--pick{width:150px}
.fc--img.is-ko .fc__card{filter:grayscale(1) brightness(.5)}
.fc--img.is-ko::after{inset:auto 0 50% 0}
.fc--img.is-picked{outline-offset:3px;border-radius:12px}
.inf__h img.is-card{width:46px;aspect-ratio:2/3;object-fit:contain;background:#07071a}
.st .fc--img.fc--pick{width:100%}

/* the coin flip */
.coinflip{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:rgba(4,4,14,.55);pointer-events:none}
.coinflip__in{display:grid;justify-items:center;gap:14px;text-align:center}
.coinflip__call{margin:0;color:var(--mute);font-size:14px}
.coinflip__res{margin:0;font-size:18px}
.coinflip__res b{font:700 22px var(--px);color:var(--amber);margin-right:6px}
.coin3d{position:relative;width:110px;height:110px;transform-style:preserve-3d;animation:nft-flip-h 1.5s cubic-bezier(.2,.7,.3,1) forwards}
.coin3d--tails{animation-name:nft-flip-t}
.coin3d span{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;background:radial-gradient(circle at 35% 30%,#ffe7a8,#ffb547 55%,#a86a10);box-shadow:inset 0 0 0 6px #c98a1d,inset 0 0 0 9px #7a4a06,0 10px 30px rgba(0,0,0,.6);font:700 46px var(--px);color:#5a3504}
.coin3d__t{transform:rotateY(180deg)}
@keyframes nft-flip-h{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-70px) rotateY(1260deg)}100%{transform:translateY(0) rotateY(1800deg)}}
@keyframes nft-flip-t{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-70px) rotateY(1260deg)}100%{transform:translateY(0) rotateY(1980deg)}}

/* --- smaller screens ----------------------------------------------------------------- */
@media (max-width:1180px){
	.lobby{grid-template-columns:minmax(240px,280px) minmax(0,1fr)}
	.lobby__o{grid-column:1/-1}
	.bt{grid-template-columns:minmax(200px,230px) minmax(0,1fr);grid-template-areas:"opp mat" "me mat" "acts acts" "rail rail"}
	.log ol{max-height:180px}
}
@media (max-width:760px){
	.nft__table{inset:0;border-radius:0;border-width:0;box-shadow:none}
	.nft__body{padding:12px}
	.lobby{grid-template-columns:1fr}
	.slots{gap:8px}
	.slot{width:calc(33.3% - 6px);min-height:0}
	.slot .fc{min-width:0}
	.slot .fc__role,.slot .fc__hpn{display:none}
	.nft__where span,.nft__rec{display:none}
	.nft__up{padding:6px 12px}
	.fc--pick{width:100%}
	.fgrid .fc--small{width:calc(33.3% - 7px)}
	.bt{grid-template-columns:1fr;grid-template-areas:"opp" "mat" "me" "acts" "rail";gap:10px}
	.tc{padding:8px 10px}
	.tc .tc__stats,.tc .tc__focus{display:none}
	.tc__mult{margin:8px 0 6px;padding:6px 10px}
	.tc__x{font-size:22px}
	.bt__side--opp .tc__mult,.bt__side--opp .tc__flags{display:none}
	.mat{min-height:0;border-radius:20px;padding:10px 6px}
	.mat__half{gap:8px}
	.mat__coin{display:none}
	.zone{padding:14px 4px 4px}
	.fc--big,.fc--img.fc--big{width:40vw;max-width:170px}
	.fc--small,.fc--img.fc--small{width:22vw;max-width:96px}
	.mat__bench{flex-direction:column;gap:6px}
	.ab{min-width:0;flex:1 1 30%;padding:8px 8px 8px 24px}
	.ab kbd{display:none}
	.ab{padding-left:10px}
	.bt > .acts{position:sticky;bottom:-12px;z-index:3;margin:0 -12px;padding:8px 12px 12px;background:linear-gradient(transparent,var(--felt) 22%)}
}
/* --- the Arena menu: decks, the Gauntlet, bosses, the Trophy Road ------------------- */
.nft .tro{width:15px;height:15px;fill:var(--amber);vertical-align:-2px;flex:none}
.nft .lk{width:12px;height:12px;fill:currentColor;vertical-align:-1px;margin-right:4px;flex:none}
.nft__rec{display:flex;align-items:center;gap:5px}
.nft__rec b{color:var(--amber);font-weight:700}
.nft__rec span{margin-left:6px}
.sh{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.sh h2{font-size:17px;margin-bottom:2px}
.sh .note{margin:0}
.sh__back{flex:none;font:600 13px var(--sans);color:var(--bone);background:rgba(7,7,26,.5);border:1px solid rgba(154,156,182,.4);border-radius:999px;padding:6px 12px;cursor:pointer}
.sh__back:hover{border-color:var(--bone)}
.menu{display:grid;gap:16px;max-width:1100px;margin:0 auto}
.menu__deck h2 span{font-family:var(--sans);font-weight:500;color:var(--mute);font-size:13px;margin-left:6px;letter-spacing:0}
.dstrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(7,7,26,.45);border:1px solid rgba(107,138,255,.25);border-radius:14px;padding:10px 12px;margin-bottom:10px}
.dstrip__t{display:flex;align-items:center;gap:8px;min-width:150px}
.dstrip__t b{display:block;font-size:14px}
.dstrip__t small{display:block;font-size:12px;color:var(--mute)}
.dstrip__f{display:flex;gap:8px;flex-wrap:wrap}
.dstrip__f .fc--small{width:84px}
.dstrip__f .fc--img.fc--small{width:70px}
.dstrip .nb{margin-left:auto}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.tile{position:relative;display:flex;align-items:center;gap:12px;text-align:left;color:var(--bone);background:linear-gradient(160deg,#1d1a52,#120f33);border:1px solid rgba(107,138,255,.35);border-radius:16px;padding:14px;cursor:pointer;min-height:96px;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-2px);border-color:var(--lit)}
.tile__i{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:rgba(59,82,255,.18)}
.tile__i svg{width:26px;height:26px;fill:var(--lit)}
.tile__i .tro{width:28px;height:28px}
.tile__i .pt{width:34px;height:48px}
.tile__t{flex:1;min-width:0}
.tile__t b{display:block;font:700 14px var(--px);letter-spacing:.02em;margin-bottom:3px}
.tile__t small{display:block;color:var(--mute);font-size:13px;line-height:1.35}
.tile__m{display:flex;align-items:center;gap:4px;margin-top:6px;font:700 12px var(--px);color:var(--amber)}
.tile__b{position:absolute;top:-8px;right:10px;background:var(--amber);color:var(--ink);font:700 11px var(--px);padding:3px 8px;border-radius:999px}
.tile--pve .tile__i{background:rgba(95,227,255,.14)}.tile--pve .tile__i svg{fill:var(--ice)}
.tile--bosses .tile__i{background:rgba(255,79,216,.14)}.tile--bosses .tile__i svg{fill:var(--t-mythic)}
.tile--road .tile__i{background:rgba(255,181,71,.14)}
.tile--keeper .tile__i{background:rgba(236,233,225,.08)}
.tile.is-locked{opacity:.6}
/* deck editor */
.dtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.dtab{display:flex;align-items:center;gap:6px;font:600 13px var(--sans);color:var(--bone);background:rgba(7,7,26,.5);border:1px solid rgba(154,156,182,.35);border-radius:999px;padding:7px 14px;cursor:pointer}
.dtab.on{border-color:var(--amber);background:rgba(255,181,71,.12)}
.dtab em{font-style:normal;font-size:11px;color:var(--hpg)}
.dtab--add{border-style:dashed;color:var(--mute)}
.dname{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dname label{font-size:13px;color:var(--mute)}
.dname input{font:600 14px var(--sans);color:var(--bone);background:var(--ink);border:1px solid rgba(107,138,255,.45);border-radius:8px;padding:7px 10px;width:200px;max-width:100%}
.dname__on{font-size:12px;color:var(--hpg);font-family:var(--px)}
.dname .is-armed{border-color:var(--hpl);color:#ffb3c1}
.lobby--deck{grid-template-columns:minmax(260px,340px) minmax(0,1fr)}
.acts--deck{margin-top:14px}
.acts--deck .nb--go{width:auto}
/* opponents */
.oteam{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.oteam .fc--small{width:72px;padding:4px}
.oteam .fc--img.fc--small{width:64px}
.oteam .fc--small .fc__head b{font-size:9px}
.gx__line{font-style:italic;color:#c9c8dc;font-size:13px;margin:0}
.gx__go{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.gx__go .nb--go{width:auto}
.gx__tag{display:inline-flex;align-items:center;gap:3px;font:700 11px var(--px);color:var(--mute);letter-spacing:.02em}
.gauntlet{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gx{position:relative;display:grid;grid-template-columns:32px minmax(180px,240px) 1fr auto auto;align-items:center;gap:14px;background:rgba(7,7,26,.45);border:1px solid rgba(107,138,255,.22);border-radius:14px;padding:10px 14px}
.gx__n{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(154,156,182,.45);font:700 13px var(--px);color:var(--mute)}
.gx__who{display:flex;align-items:center;gap:10px;min-width:0}
.gx__who b{display:block;font-size:15px}
.gx__who small{display:block;font-size:12px;color:var(--mute)}
.gx__who .gx__f{color:#b8bdf0}
.gx.is-won{border-color:rgba(125,255,176,.35)}
.gx.is-won .gx__n{border-color:var(--hpg);color:var(--hpg);background:rgba(125,255,176,.1)}
.gx.is-won .gx__tag{color:var(--hpg)}
.gx.is-next{border-color:var(--amber);box-shadow:0 0 0 1px rgba(255,181,71,.3),0 0 22px rgba(255,181,71,.12)}
.gx.is-next .gx__n{border-color:var(--amber);color:var(--amber)}
.gx.is-locked{opacity:.55}
.gx.is-locked .oteam{filter:grayscale(.7)}
.bosses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.bx{display:flex;gap:14px;background:linear-gradient(160deg,#2a1240,#130d2c);border:1px solid rgba(255,79,216,.35);border-radius:16px;padding:14px}
.bx__art{flex:none;width:84px;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(255,79,216,.25),transparent 70%);border-radius:12px}
.pt--boss{width:70px;height:100px}
.bx__q{font:700 40px var(--px);color:var(--mute)}
.bx__body{flex:1;min-width:0;display:grid;gap:6px}
.bx__name{font:700 15px var(--px);letter-spacing:.02em}
.bx__body small{color:var(--mute);font-size:12.5px;margin-top:-4px}
.bx .gx__go{justify-content:flex-start}
.bx.is-locked{filter:saturate(.5);opacity:.75}
.bx.is-locked .pt--boss{filter:brightness(.25)}
.bx.is-soon{border-style:dashed}
.bx.is-won{border-color:rgba(125,255,176,.4)}
/* the Trophy Road */
.road__bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;max-width:700px}
.road__bar span{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:14px}
.road__bar b{color:var(--amber);font:700 16px var(--px)}
.road__bar i{flex:1;height:10px;border-radius:99px;background:rgba(7,7,26,.6);border:1px solid rgba(255,181,71,.35);overflow:hidden}
.road__bar em{display:block;height:100%;background:linear-gradient(90deg,#ff9a3c,var(--amber))}
.road{list-style:none;margin:0;padding:0 0 0 18px;display:grid;gap:8px;max-width:700px;position:relative}
.road::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:3px;border-radius:3px;background:rgba(154,156,182,.25)}
.rd{position:relative;display:grid;grid-template-columns:72px 52px 1fr auto;align-items:center;gap:12px;background:rgba(7,7,26,.45);border:1px solid rgba(154,156,182,.22);border-radius:12px;padding:8px 12px}
.rd::before{content:"";position:absolute;left:-17px;top:50%;width:11px;height:11px;margin-top:-6px;border-radius:50%;background:#2a2a48;border:2px solid rgba(154,156,182,.5)}
.rd.is-on::before{background:var(--amber);border-color:var(--amber)}
.rd.is-ready{border-color:var(--amber);box-shadow:0 0 18px rgba(255,181,71,.15)}
.rd__at{display:flex;align-items:center;gap:4px;font:700 13px var(--px);color:var(--mute)}
.rd.is-on .rd__at{color:var(--amber)}
.rd__art{width:52px;height:52px;display:grid;place-items:center}
.rd__art img{max-width:52px;max-height:52px;object-fit:contain}
.rd__art img.is-card{border-radius:4px}
.rd__art .pt{width:32px;height:46px}
.rd__title .tro{width:32px;height:32px}
.rd__what b{display:block;font-size:14px}
.rd__what small{display:block;font-size:12px;color:var(--mute)}
.rd:not(.is-on) .rd__art{filter:grayscale(1) brightness(.6)}
.rd .gx__tag{color:var(--hpg)}
/* results */
.trow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.35);border-radius:10px;padding:8px 12px;margin:10px 0}
.trow span{display:flex;align-items:center;gap:6px}
.trow b{font:700 16px var(--px);color:var(--amber)}
.trow small{color:var(--mute)}
.unl{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}
.unl li{font-size:13.5px;color:var(--hpg)}
.unl li::before{content:"★ ";color:var(--amber)}
.friend--page{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;border-top:0;margin-top:6px;max-width:720px}
.friend--page .nb--go{width:auto}
@media (max-width:900px){
	.gx{grid-template-columns:32px 1fr auto;grid-template-areas:"n who go" "n line line" "n team team"}
	.gx .gx__n{grid-area:n;align-self:start}.gx .gx__who{grid-area:who}.gx .gx__go{grid-area:go}.gx .gx__line{grid-area:line}.gx .oteam{grid-area:team}
	.lobby--deck{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
	.nft .nft__rec{display:flex}
	.nft__rec span{display:none}
	.tiles{grid-template-columns:1fr}
	.tile{min-height:80px;padding:12px}
	.rd{grid-template-columns:58px 44px 1fr;row-gap:6px}
	.rd__go{grid-column:1/-1;justify-self:end}
	.rd__go:empty{display:none}
	.rd__art{width:44px;height:44px}.rd__art img{max-width:44px;max-height:44px}
	.bosses{grid-template-columns:1fr}
	.bx__art{width:64px}.pt--boss{width:56px;height:80px}
	.dstrip .nb{margin-left:0}
	.sh{flex-direction:column;gap:8px}
	.slot .fc--img.fc--pick{width:100%}
}

@media (prefers-reduced-motion:reduce){
	.nft *,.nft *::before,.nft *::after{animation:none!important;transition:none!important}
}
.trow--cr{background:rgba(255,207,90,.08);border-color:rgba(255,207,90,.35)}
.trow--cr .crd{font-style:normal;color:#ffcf5a;text-shadow:0 0 8px rgba(255,207,90,.5)}
.trow--cr small{text-align:right}