/* Combat Night fighter page v2: phone-first (ACD round 3 "B tap view", font A; Alex's go 2026-11-12).
   Built by Code Architect from ACD's comp (comp3.html + the round-2 x-base styles). Scoped to body.fv2b / .fv2
   so the classic page and every other page are untouched. Phones 360-430 are the design width; at 900px+ the
   photo becomes a sticky left column and the content reads on the right. */

body.fv2b main.wrap{max-width:none;padding:0;margin:0}
.fv2{--fv2-pad:16px}
.fv2 a{color:inherit}

/* ---- hero + identity ---- */
.fv2-hero{position:relative;height:470px;overflow:hidden;background:#2a1d15}
.fv2-hero.short{height:300px}
.fv2-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.fv2-hero .ini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:400 90px/1 var(--disp);color:var(--gold);background:radial-gradient(circle at 50% 35%,#2a2018,#120d0b)}
.fv2-hero::after{content:"";position:absolute;inset:62% 0 0;background:linear-gradient(transparent,var(--void) 96%);pointer-events:none}
.fv2-hero .bk{position:absolute;left:16px;top:12px;z-index:2;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:rgba(10,9,8,.6);padding:9px 11px;border-radius:6px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* the name block overlaps only the photo's faded bottom edge (shoulders), never the face */
.fv2-id{position:relative;z-index:2;margin:-92px var(--fv2-pad) 0}
.fv2-id .tags.sub{margin:12px 0 0}
.fv2-id .tags .bdg.contender{color:var(--gold2);background:transparent;border:1.5px solid var(--gold)}
.fv2-hero.short + .fv2-id,.fv2-l:has(.short) + .fv2-r .fv2-id{margin-top:-70px}
.fv2-id .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.fv2-id .tags .bdg{font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:3px}
.fv2-id .tags .bdg.cnchamp{color:#1a1206;background:linear-gradient(90deg,#f7e5a4,var(--gold) 60%,#a9822f);border:0}
.fv2-id .nk{font:italic 19px/1.05 var(--serif);color:var(--gold2);margin-bottom:6px}
.fv2-id h1{font:400 min(17vw,76px)/.84 var(--disp);text-transform:uppercase;color:var(--bone);margin:0;word-spacing:100vw;overflow-wrap:anywhere}
.fv2-stats{display:flex;margin:16px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fv2-stats>div{flex:1;min-width:0;padding:11px 0 10px 12px;border-left:1px solid var(--line)}
.fv2-stats>div:first-child{border-left:0;padding-left:0}
.fv2-stats b{display:block;font:400 26px/1 var(--disp);color:var(--bone)}
.fv2-stats b.sm{font-size:17px;line-height:1.2}
.fv2-stats b sup{color:var(--gold2);font-size:.6em}
.fv2-stats .tm b{font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.fv2-stats .tm a{color:var(--bone)}
.fv2-stats>div>span{display:block;font:700 9.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.fv2-src{font:600 11px/1.45 var(--sans);color:var(--faint);margin-top:8px}
.fv2-src a{color:var(--gold2)}

/* ---- next fight / ticket strip ---- */
.fv2 .p-nf{margin:18px var(--fv2-pad) 0;padding:16px;border-radius:12px;background:linear-gradient(120deg,rgba(207,29,43,.32),rgba(207,29,43,.08));border:1px solid rgba(207,29,43,.6)}
.fv2 .p-nf .k{font:700 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--blood)}
.fv2 .p-nf .vs{font:400 30px/1 var(--disp);text-transform:uppercase;color:var(--bone);margin-top:6px}
.fv2 .p-nf .d{font:600 13px/1.35 var(--sans);color:var(--gold2);margin-top:6px}
.fv2 .p-nf a[data-cta]{display:inline-block;margin-top:12px;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--blood);color:var(--bone);padding:13px 14px;border-radius:6px}
.fv2 .p-nf a.card{display:inline-block;margin:12px 0 0 12px;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}
.fv2 .p-tix{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:18px var(--fv2-pad) 0;padding:12px 12px 12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.fv2 .p-tix .k{font:700 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--blood)}
.fv2 .p-tix .e{font:14px/1.25 var(--serif);color:var(--bone);margin-top:5px}
.fv2 .p-tix a{font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--bone);color:var(--void);padding:12px;border-radius:6px;white-space:nowrap}

/* ---- stat line + sponsor ---- */
.fv2 .p-line{display:grid;grid-template-columns:repeat(4,1fr);margin:16px var(--fv2-pad) 0;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.fv2 .p-line.c1{grid-template-columns:1fr}.fv2 .p-line.c2{grid-template-columns:1fr 1fr}.fv2 .p-line.c3{grid-template-columns:repeat(3,1fr)}
.fv2 .p-line div{padding:12px 6px;text-align:center;border-left:1px solid var(--line)}
.fv2 .p-line div:first-child{border-left:0}
.fv2 .p-line b{display:block;font:400 24px/1 var(--disp);color:var(--bone)}
.fv2 .p-line span{display:block;font:700 9px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-top:6px}
.fv2 .p-spon{display:flex;justify-content:space-between;align-items:center;margin:16px var(--fv2-pad) 0;padding:12px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fv2 .p-spon span{font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.fv2 .p-spon img{max-height:34px;width:auto;display:block}

/* ---- bands (the classic sections, restyled; their content and markup are unchanged) ---- */
.fv2 .band{padding:26px var(--fv2-pad) 0;margin:0;min-height:0;border:0;background:none}
.fv2 .band .hd{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.fv2 .band .hd b{font:400 26px/1 var(--disp);text-transform:uppercase;color:var(--bone);letter-spacing:.01em}
.fv2 .band .hd span{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fv2 .band .hd button{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.fv2 .disclaimer{font:600 11px/1.5 var(--sans);color:var(--faint);margin-top:10px}

/* on film: the thumbnail grid becomes rows (thumb left, text right) */
.fv2 .onfilm{display:block;margin:0}
.fv2 .onfilm .vthumb{display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:center;width:100%;padding:9px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:left;background:none;color:var(--bone);overflow:visible}
.fv2 .onfilm .vthumb img{width:128px;height:72px;object-fit:cover;border-radius:6px;display:block;aspect-ratio:16/9;opacity:1;background:var(--panel)}
.fv2 .onfilm .vthumb:hover img{transform:none}
/* the play mark sits on the thumbnail (classic places it at the centre of a full-width card) */
.fv2 .onfilm .vthumb::before{left:64px;top:50%;border-left-width:16px;border-top-width:10px;border-bottom-width:10px}
.fv2 .onfilm .vl{position:static;display:block;background:none;padding:0;font:400 17px/1.05 var(--disp);text-transform:uppercase;color:var(--bone)}
.fv2 .onfilm .vl b{display:block;font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;background:none;padding:0;width:auto;height:auto}
.fv2 .onfilm .vl b.l{color:var(--ash)}
.fv2 .onfilm .vl .vd{display:block;font:600 11.5px/1.35 var(--sans);text-transform:none;color:var(--ash);margin-top:5px}
.fv2 .film-sub{font:400 18px/1 var(--disp);text-transform:uppercase;color:var(--bone);margin:18px 0 4px}

/* news */
.fv2 .fnews{display:block;margin:0}
.fv2 .fnews-card{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);background:none;border-radius:0}
.fv2 .fnews-card img{width:96px;height:72px;object-fit:cover;border-radius:6px}
.fv2 .fnews-b{padding:0}
.fv2 .fnews-t{display:block;font:400 17px/1.05 var(--disp);text-transform:uppercase;color:var(--bone)}
.fv2 .fnews-d{display:none}
.fv2 .fnews-m{display:block;font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:6px}

/* by the numbers */
.fv2 .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}
.fv2 .stat{padding:12px 0;border-bottom:1px solid var(--line);background:none;border-radius:0;text-align:left}
.fv2 .stat:nth-child(odd){padding-right:12px}
.fv2 .stat .n{font:400 26px/1 var(--disp);color:var(--bone)}
.fv2 .stat .n.sm{font-size:17px}
.fv2 .stat .n .of{font-size:.6em;color:var(--ash)}
.fv2 .stat .l{font:700 9.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:5px}

/* story */
.fv2 .story{display:block;margin:12px 0 0}
.fv2 .story .lead{font:400 22px/1.15 var(--disp);text-transform:uppercase;color:var(--bone)}
.fv2 .story p{font:16px/1.55 var(--serif);color:var(--ash);margin:8px 0 0}
.fv2 .pullcard{margin-top:14px;padding:14px;border-left:3px solid var(--gold);background:var(--panel)}

/* own words + walkout */
.fv2 .sec-lead{font:16px/1.55 var(--serif);color:var(--ash);margin:12px 0 0}
.fv2 .qfacts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:8px 0 0}
.fv2 .qf{padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.fv2 .qf:nth-child(odd){padding-right:12px}
.fv2 .qf.wide{grid-column:1/-1}
.fv2 .ql{font:700 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.fv2 .qv{font:600 17px/1.4 var(--sans);color:var(--bone);margin-top:6px;overflow-wrap:anywhere}
.fv2 .btn-ghost{margin-top:4px}
.fv2 .p-song{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;margin:14px 0 4px;padding:12px;border-radius:12px;background:linear-gradient(120deg,#1d1512,#120d0b);border:1px solid rgba(201,162,75,.35)}
.fv2 .p-song .pp{width:52px;height:52px;border-radius:50%;border:0;background:var(--blood);position:relative;cursor:pointer}
.fv2 .p-song .pp::after{content:"";position:absolute;left:21px;top:16px;border-left:15px solid var(--bone);border-top:10px solid transparent;border-bottom:10px solid transparent}
.fv2 .p-song.on .pp::after{left:18px;top:17px;width:5px;height:18px;border:0;background:var(--bone);box-shadow:11px 0 0 var(--bone)}
.fv2 .p-song .mid{min-width:0}
.fv2 .p-song .l{font:700 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.fv2 .p-song .t{font:400 18px/1.05 var(--disp);text-transform:uppercase;color:var(--bone);margin-top:5px;overflow-wrap:anywhere}
.fv2 .p-song .bar{height:3px;border-radius:2px;background:#3a2e25;margin-top:9px;overflow:hidden}
.fv2 .p-song .bar i{display:block;height:100%;width:0;background:var(--gold2)}
.fv2 .p-song .tm{display:flex;justify-content:space-between;font:600 10px/1 var(--sans);color:var(--faint);margin-top:5px}
.fv2 .p-song .am{align-self:start;font:700 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}

/* get notified */
.fv2 .p-ntf{display:block;margin:22px var(--fv2-pad) 0;padding:16px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.fv2 .p-ntf b{display:block;font:400 22px/1.02 var(--disp);text-transform:uppercase;color:var(--bone)}
.fv2 .p-ntf .row2{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.fv2 .p-ntf input{background:var(--void);border:1px solid #3a2e25;border-radius:8px;color:var(--bone);font:16px var(--sans);padding:13px 12px;min-width:0}
.fv2 .p-ntf button{font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--bone);color:var(--void);padding:15px 12px;border:0;border-radius:8px;white-space:nowrap;cursor:pointer}
.fv2 .p-ntf>span{display:block;font:600 11.5px/1.3 var(--sans);color:var(--faint);margin-top:10px}
.fv2 .p-ntf.done{border-color:rgba(201,162,75,.5)}
.fv2 .p-ntf.done b{color:var(--gold2)}

/* fight history */
.fv2 .fh{margin:0;border:0;background:none}
.fv2 .fh .fhsec{font:700 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:16px 0 6px;background:none}
.fv2 .fh .fhsec span{font:700 10.5px/1 var(--sans);color:var(--ash);margin-left:6px}
.fv2 .stat{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.fv2 .fh .row{display:grid;grid-template-columns:30px 1fr auto;grid-template-areas:"res who meth" "res who watch";gap:2px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);background:none}
.fv2 .fh .res{grid-area:res;width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;font:400 14px/1 var(--disp);background:var(--blood);color:var(--bone)}
.fv2 .fh .res.l{background:#3a2e25}.fv2 .fh .res.d{background:#4a4036}
.fv2 .fh .row>div:nth-child(2){grid-area:who;min-width:0}
.fv2 .fh .opp{font:600 14px/1.2 var(--sans);color:var(--bone)}
.fv2 .fh .ev{font:600 11px/1.3 var(--sans);color:var(--faint);margin-top:3px}
.fv2 .fh .ev a{color:var(--faint)}
.fv2 .fh .meth{grid-area:meth;font:600 11px/1.2 var(--sans);color:var(--ash);text-align:right;max-width:130px}
.fv2 .fh .dt{display:none}
.fv2 .fh .wcell{grid-area:watch;text-align:right}
.fv2 .fh-empty{font:15px/1.5 var(--serif);color:var(--ash);padding:12px 0}
.fv2 .p-more{display:block;width:100%;text-align:center;margin:12px 0 0;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);border:1px solid rgba(201,162,75,.45);border-radius:6px;padding:13px;background:none;cursor:pointer}
.fv2 .fv2-hide{display:none!important}

/* the camp */
.fv2 .gymback{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 0;margin:0!important;border:0;border-bottom:1px solid var(--line);background:none;border-radius:0}
.fv2 .gymback .plate{width:44px;height:44px;padding:0;border-radius:8px;border:1px solid rgba(201,162,75,.45);display:flex;align-items:center;justify-content:center;overflow:hidden;background:none}
.fv2 .gymback .plate img{height:auto;max-width:36px;max-height:36px}
.fv2 .gymback a.btn-ghost{grid-column:auto;white-space:nowrap}
@media(max-width:620px){.fv2 .gymback{grid-template-columns:44px 1fr auto}.fv2 .gymback a{grid-column:auto}}
.fv2 .gymback .fb{font:400 16px/1 var(--disp);color:var(--gold)}
.fv2 .gymback .gn{font:400 17px/1 var(--disp);text-transform:uppercase;color:var(--bone)}
.fv2 .gymback .gl{font:600 11.5px/1.3 var(--sans);color:var(--ash);margin-top:4px}
.fv2 .gymback .btn-ghost{font-size:10.5px;padding:9px 10px}

/* shelves: teammates, city */
.fv2 .w4-shelf{margin:26px 0 0}
.fv2 .x-shelf-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--fv2-pad);margin:0 0 10px}
.fv2 .x-shelf-h b{font:400 21px/1 var(--disp);text-transform:uppercase;color:var(--bone);letter-spacing:.01em}
.fv2 .x-shelf-h span{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fv2 .x-hs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 var(--fv2-pad);scroll-padding:16px}
.fv2 .x-hs::-webkit-scrollbar{display:none}
.fv2 .w4-p{flex:none;width:82px;text-align:center}
.fv2 .x-face{display:block;width:82px;height:82px;border-radius:50%;overflow:hidden;background:#2a1d15;border:2px solid #3a2e25}
.fv2 .x-face img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.fv2 .x-face .ini{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font:400 22px/1 var(--disp);color:var(--gold)}
.fv2 .w4-p b{display:block;font:400 13.5px/1 var(--disp);text-transform:uppercase;color:var(--bone);margin-top:7px;overflow-wrap:anywhere}
.fv2-r{padding-bottom:40px}

/* interactive states: navy fill + light text on hover/focus (Kameha standing rule for every build) */
.fv2 .p-tix a:hover,.fv2 .p-tix a:focus-visible,.fv2 .p-nf a[data-cta]:hover,.fv2 .p-nf a[data-cta]:focus-visible,
.fv2 .p-ntf button:hover,.fv2 .p-ntf button:focus-visible,.fv2 .p-more:hover,.fv2 .p-more:focus-visible,
.fv2-hero .bk:hover,.fv2-hero .bk:focus-visible{background:#14213d;color:#f4efe6;outline:none}
.fv2 .w4-p:hover .x-face,.fv2 .w4-p:focus-visible .x-face{border-color:#14213d;box-shadow:0 0 0 3px #14213d}
.fv2 .onfilm .vthumb:focus-visible,.fv2 .p-song .pp:focus-visible{outline:2px solid #f4efe6;outline-offset:2px}

/* phones + tablets: the photo starts below the fixed nav (as in ACD's comp), so the back link is never under it */
@media (max-width:899px){
  .fv2-l{padding-top:68px}
}
/* tablets: the phone layout as a centred column, not stretched edge to edge */
@media (min-width:600px) and (max-width:899px){
  .fv2{max-width:640px;margin:0 auto}
  .fv2-hero{height:560px;border-radius:0 0 14px 14px}
}

/* ---- desktop: sticky photo left, content right ---- */
@media (min-width:900px){
  /* 104px clears the fixed site nav (it overlays the photo on phones by design, never the name on desktop) */
  .fv2{display:grid;grid-template-columns:minmax(320px,42%) minmax(0,1fr);gap:0 40px;max-width:1240px;margin:0 auto;padding:104px 32px 0;--fv2-pad:0px}
  .fv2-l{position:sticky;top:104px;align-self:start}
  .fv2-hero{height:auto;aspect-ratio:920/1180;max-height:calc(100vh - 128px);border-radius:14px}
  .fv2-hero.short{aspect-ratio:1/1}
  .fv2-hero::after{inset:70% 0 0}
  .fv2-id{margin:8px 0 0}
  .fv2-l:has(.short) + .fv2-r .fv2-id{margin-top:8px}
  .fv2-id h1{font-size:clamp(64px,6vw,96px);word-spacing:normal}
  .fv2 .p-line b{font-size:30px}
  .fv2 .x-shelf-h,.fv2 .x-hs{padding-left:0;padding-right:0}
  .fv2 .statgrid{grid-template-columns:repeat(3,1fr)}
  .fv2 .qfacts{grid-template-columns:1fr 1fr 1fr}
}