/*
 * PROTOCOL: BATTLEFORGED — v1.6 design-fidelity pass.
 * Anchored to approved 1024 x 1536 long-page creative reference.
 * No imagery or text is baked into a fake website screenshot: controls remain semantic HTML.
 * Responsive layout / artwork focus points / borders / typography / density.
 */
body.pbf-home { background:#020b16; }
body.pbf-home .container-wide { width:calc(100% - 28px); max-width:none; }
body.pbf-home .site-header { background:#030e1c; border-bottom:1px solid #234467; }
body.pbf-home .header-inner { min-height:44px; padding:0 7px; gap:clamp(6px,1.2vw,20px); }
body.pbf-home .pbf15-brand-header .pbf15-wing{width:31px;height:36px}
body.pbf-home .pbf15-brand-header .pbf15-word strong{font-size:clamp(17px,1.55vw,24px)}
body.pbf-home .pbf15-brand-header .pbf15-word small{font-size:clamp(7px,.68vw,10px);letter-spacing:.24em}
body.pbf-home .pbf-menu{gap:clamp(6px,1.12vw,20px)}
body.pbf-home .pbf-menu a{font-size:clamp(9px,.68vw,13px); padding:14px 1px 12px;font-weight:900}
body.pbf-home .pbf15-region-switch{min-height:30px;padding:0 5px}
body.pbf-home .pbf15-region-switch select{font-size:10px;padding:5px 1px;max-width:75px}
body.pbf-home .header-actions .btn{min-height:29px;padding:6px 9px;font-size:10px}
/* Hero: dense, movie-poster composition; independent accessible controls. */
.pbf-reference-home { font-size:12px; line-height:1.28; }
.pbf40-hero{height:clamp(290px,29.4vw,470px)}
.pbf40-hero-image{object-position:center 46%;}
.pbf40-hero::after{background:radial-gradient(ellipse 28% 65% at 50% 50%,#001322bf 0%,#00112174 51%,transparent 100%),linear-gradient(0deg,#020a16e8 0%,transparent 20%,#0001 70%)}
.pbf40-hero-content{padding:3px 12px 0;gap:4px;transform:translateY(10px);}
.pbf15-brand-hero .pbf15-wing{height:clamp(38px,4vw,68px);width:clamp(38px,4vw,68px);margin-bottom:-2px}
.pbf15-brand-hero .pbf15-word strong{font-size:clamp(40px,5vw,85px);line-height:.95;-webkit-text-stroke:.55px #dae7f5}
.pbf15-brand-hero .pbf15-word small{font-size:clamp(16px,1.76vw,29px);letter-spacing:.23em}
.pbf40-hero-kicker{font-size:clamp(9px,.92vw,15px);letter-spacing:.34em;margin:2px 0}
.pbf40-hero-desc{font-size:clamp(10px,.84vw,14px);margin:2px 0}
.pbf40-hero-actions{margin-top:4px;gap:12px;flex-wrap:nowrap}
.pbf40-hero-actions .pbf40-action{font-size:clamp(11px,.91vw,15px);padding:7px 15px;min-height:35px;border-radius:3px;letter-spacing:0;}
.pbf40-hero-actions .pbf40-action-primary{box-shadow:0 0 15px #ff880099,inset 0 0 0 1px #ffca69}
.pbf40-platforms{margin-top:2px;font-size:11px;gap:10px}
.pbf40-platforms span{font-size:9px}
/* Feature strip, 5 equal tiles */
.pbf40-highlights{min-height:43px;box-shadow:0 0 12px #118aff26 inset;}
.pbf40-highlights>div{grid-template-columns:27px 1fr;column-gap:7px;padding:6px 10px}
.pbf40-highlights>div>span{font-size:20px}
.pbf40-highlights b{font-size:clamp(9px,.8vw,13px);letter-spacing:-.02em}
.pbf40-highlights small{font-size:clamp(8px,.68vw,11px)}
/* Everything below the feature bar is deliberately tightly composed, as in the agreed reference. */
.pbf40-section { width:calc(100% - clamp(26px,4vw,72px))!important; padding:9px 0 3px!important; margin:0 auto!important; }
.pbf40-section-title { font-size:clamp(18px,1.6vw,25px)!important; min-height:22px; margin-bottom:5px!important; padding:0 0 3px 11px; }
.pbf40-section-title:before {width:3px;top:1px}
.pbf40-section-title a{font-size:clamp(8px,.67vw,11px)}
.pbf40-centered-title {font-size:clamp(19px,2vw,32px)!important;margin:0 0 6px!important;}
.pbf40-factions {padding-top:9px!important;}
.pbf40-faction-row { gap:7px; }
.pbf40-faction { height:clamp(128px,13vw,194px); border-radius:4px;border-width:1px; }
.pbf40-faction-art{object-position:35% center!important}
.pbf40-faction-copy {padding:6px 10px 7px 47%;gap:6px;align-items:center;}
.pbf40-faction-glyph{font-size:clamp(18px,1.75vw,28px);line-height:1}
.pbf40-faction h3 {font-family:Arial,'Arial Narrow',sans-serif;font-size:clamp(14px,1.35vw,22px);font-weight:950;line-height:1.04}
.pbf40-faction p{font-size:clamp(9px,.72vw,12px);line-height:1.25;margin:3px 0 7px;}
.pbf40-faction a{font-size:clamp(9px,.71vw,12px);padding:4px 8px;min-height:23px;}
.pbf40-faction:after{background:linear-gradient(90deg,#03102500 0%,#03112755 36%,#031127ee 68%)}
.pbf40-alien:after{background:linear-gradient(90deg,#24050e00 0%,#25071455 36%,#250714eb 67%)}
.pbf40-hunter:after{background:linear-gradient(90deg,#06180a00 0%,#061a0f55 36%,#061a0fee 67%)}
/* Gameplay modules */
.pbf40-gameplay{grid-template-columns:minmax(108px,12%) minmax(0,1.25fr) minmax(0,.85fr);gap:7px}
.pbf40-game-tabs{padding:3px;border-radius:3px;align-self:stretch}
.pbf40-game-tabs button {font-size:clamp(10px,.85vw,14px);min-height:clamp(39px,4.2vw,57px);padding:7px;}
.pbf40-game-image{height:clamp(160px,17.2vw,235px);min-height:0;max-height:none;border-radius:3px}
.pbf40-game-copy{padding:2px 4px 0 10px}
.pbf40-game-copy h3{font-size:clamp(16px,1.5vw,23px);margin:0 0 5px}
.pbf40-game-copy p{font-size:clamp(10px,.77vw,13px);line-height:1.26;margin:3px 0 8px}
.pbf40-game-thumbs{gap:5px}
.pbf40-game-thumbs a{height:clamp(48px,5vw,76px)}
.pbf40-game-thumbs span{font-size:8px;padding:2px}
/* Dual featured art galleries */
.pbf40-dual-showcase{gap:10px!important;}
.pbf15-showcase-frame{padding:4px!important;min-height:0!important}
.pbf40-image-row{gap:5px}
.pbf40-image-row a { height:clamp(70px,7vw,105px)!important; min-height:0!important; aspect-ratio:auto!important; }
.pbf40-image-row a img { height:100%!important;width:100%!important;object-fit:cover!important;object-position:50% 42%; }
.pbf15-gallery-arrow{width:23px!important;font-size:18px!important;padding:0!important}
/* Ranking panels: sufficient content density without invented player results. */
.pbf40-heading-row{margin-bottom:4px}
.pbf40-rank-grid{gap:8px}
.pbf40-rank-filters{gap:5px}
.pbf15-mode-pills button{min-height:24px;padding:4px 8px;font-size:10px}
.pbf40-rank-filters select{min-height:25px;font-size:10px}
.pbf40-rank-card {min-height:170px;padding:7px 10px;border-radius:5px;box-shadow:0 0 7px var(--p40-rankglow),inset 0 -6px 14px var(--p40-rankglow)}
.pbf40-rank-card h3{font-size:clamp(13px,1.1vw,17px);margin:0 0 3px;padding-bottom:4px}
.pbf40-rank-card table{font-size:clamp(9px,.72vw,11px)}
.pbf40-rank-card th{font-size:9px;padding:3px 2px}
.pbf40-rank-card td{padding:5px 2px}
.pbf40-rank-card a{margin-top:5px;padding:4px 7px;max-width:92%;font-size:10px}
.pbf40-api-note{font-size:9px;margin:3px 0}
/* Event / season rewards */
.pbf40-event-row{gap:10px;grid-template-columns:1.4fr .86fr}
.pbf40-event-banner{min-height:clamp(120px,12vw,170px)}
.pbf40-event-banner>div{padding:10px 14px;width:68%}
.pbf40-event-banner h2{font-size:clamp(20px,1.9vw,30px);line-height:1.03;margin:4px 0}
.pbf40-event-banner p{font-size:clamp(9px,.7vw,12px);margin:2px 0 7px}
.pbf40-event-banner a{font-size:9px;padding:4px 8px}
.pbf40-label-orange{font-size:8px;padding:2px 6px}
.pbf40-rewards{padding:6px}
.pbf40-reward-items{gap:6px}
.pbf40-reward-items a{height:clamp(64px,8vw,110px)}
.pbf40-rewards>p{font-size:9px;margin-top:4px}
/* News and media */
.pbf40-bottom-grid{gap:10px;grid-template-columns:1.2fr .9fr;}
.pbf40-news-layout{gap:5px}
.pbf40-news-entry div{padding:5px 7px}
.pbf40-news-entry h3{font-size:clamp(10px,.95vw,15px);margin:2px 0}
.pbf40-news-entry p{font-size:clamp(9px,.72vw,11px);margin:2px 0}
.pbf40-news-featured img { height:clamp(88px,10vw,155px) }
.pbf40-news-featured h3{font-size:clamp(14px,1.3vw,19px)}
.pbf40-news-entry img{min-height:72px}
.pbf40-media-layout{gap:4px}
.pbf40-media-rail{gap:4px}
.pbf40-media-main>span{width:38px;height:38px;font-size:15px}
/* Join the battle banner and compact TAGSG footer */
.pbf40-final {min-height:clamp(92px,10vw,140px);margin-top:12px;padding:9px 3%;gap:8px}
.pbf40-final-characters{min-height:0;width:26%;}
.pbf40-final-characters img {height:clamp(80px,9.5vw,125px);object-fit:contain;object-position:center bottom}
.pbf40-final-copy h2{font-size:clamp(23px,2.4vw,38px)}
.pbf40-final-copy p{font-size:clamp(10px,.95vw,15px);margin:3px 0}
.pbf40-final>.pbf40-action{min-width:clamp(160px,16vw,250px);min-height:35px;padding:5px 10px;font-size:clamp(10px,.85vw,14px)}
body.pbf-home .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px;padding:15px 0 10px;}
body.pbf-home .footer-company p,body.pbf-home .footer-tagsg{display:none}
body.pbf-home .footer-col{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
body.pbf-home .footer-col h3{display:none}
body.pbf-home .footer-col a{font-size:10px;display:inline-block;margin:0}
body.pbf-home .footer-bottom{padding:7px 0;font-size:9px}
/* Keep navigation complete at reference width; use mobile menu only on truly small screens. */
@media(min-width:950px) and (max-width:1050px){
 body.pbf-home .header-inner{min-height:44px;gap:5px}
 body.pbf-home .menu-toggle{display:none}
 body.pbf-home .primary-nav{display:block;position:static;flex:1;min-width:0;padding:0;background:transparent;border:0;box-shadow:none}
 body.pbf-home .pbf-menu{display:flex;gap:6px;justify-content:center}
 body.pbf-home .pbf-menu a{border:0;padding:13px 0;font-size:9px}
 body.pbf-home .pbf-menu .sub-menu{display:none;position:absolute;left:0;top:100%;background:#071527;border:1px solid #32557a;padding:5px;min-width:100px}
 body.pbf-home .pbf-menu li:hover>.sub-menu,body.pbf-home .pbf-menu li:focus-within>.sub-menu{display:block}
 body.pbf-home .pbf15-brand-header .pbf15-word strong{font-size:16px}
 body.pbf-home .pbf15-brand-header .pbf15-word small{font-size:7px}
 body.pbf-home .pbf15-brand-header .pbf15-wing{width:25px;height:28px}
 body.pbf-home .pbf15-region-switch{padding:1px 3px}
 body.pbf-home .pbf15-region-switch select{max-width:55px;font-size:9px}
 body.pbf-home .header-actions .btn{font-size:9px;padding:5px 6px;min-height:26px}
}
@media(max-width:949px){
 .pbf40-faction-copy{padding-left:42%}
 .pbf40-faction-glyph{display:none!important}
}
@media(max-width:760px){
 .pbf40-section{width:calc(100% - 24px)!important;padding:13px 0 4px!important}
 .pbf40-hero{height:505px}
 .pbf40-hero-image{object-position:50% 50%}
 .pbf40-hero-content{transform:translateY(20px);gap:7px}
 .pbf15-brand-hero .pbf15-word strong{font-size:clamp(40px,9.5vw,64px)}
 .pbf15-brand-hero .pbf15-word small{font-size:clamp(15px,3.7vw,23px)}
 .pbf40-hero-actions{flex-direction:column;gap:9px;max-width:300px;width:100%}
 .pbf40-hero-actions .pbf40-action{width:100%;min-height:40px}
 .pbf40-highlights{grid-template-columns:repeat(2,1fr)}
 .pbf40-faction-row{grid-template-columns:1fr;gap:9px}
 .pbf40-faction{height:170px}
 .pbf40-faction-copy{padding-left:43%;align-items:center;}
 .pbf40-gameplay{grid-template-columns:1fr;gap:5px}
 .pbf40-game-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .pbf40-game-tabs button{min-height:35px;padding:6px 3px}
 .pbf40-game-image{height:230px}
 .pbf40-game-copy{padding:7px}
 .pbf40-game-thumbs a{height:76px}
 .pbf40-dual-showcase,.pbf40-rank-grid,.pbf40-event-row,.pbf40-bottom-grid{grid-template-columns:1fr}
 .pbf40-image-row a{height:85px!important}
 .pbf40-rank-card{min-height:170px}
 .pbf40-event-banner{min-height:170px}
 .pbf40-reward-items a{height:100px}
 .pbf40-news-featured img{height:170px}
 .pbf40-final{display:grid;grid-template-columns:1fr;justify-items:center;gap:9px;padding:17px 4%}
 .pbf40-final-characters{display:none}
 .pbf40-final>.pbf40-action{width:min(100%,300px)}
 body.pbf-home .footer-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:20px 0}
 body.pbf-home .footer-company{grid-column:1/-1}
 body.pbf-home .footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
}
@media(max-width:420px){
 .pbf40-faction-copy{padding-left:45%}
 .pbf40-faction h3{font-size:15px}
 .pbf40-faction p{font-size:10px}
 .pbf40-game-image{height:190px}
 .pbf40-hero{height:520px}
 .pbf40-reward-items a{height:85px}
 .pbf40-rank-filters{flex-wrap:wrap;justify-content:flex-start}
 body.pbf-home .footer-bottom{display:flex;flex-direction:column;gap:5px;text-align:center}
}

/* v1.6 late visual refinement from the real 1024px render. */
@media(min-width:950px){
 .pbf40-game-image{height:clamp(128px,13.8vw,205px)!important}
 .pbf40-game-tabs button{min-height:clamp(31px,3.6vw,50px)}
 .pbf40-game-thumbs a{height:clamp(42px,4.5vw,65px)}
 .pbf40-image-row a{height:clamp(66px,6.2vw,98px)!important}
 .pbf40-event-banner{min-height:clamp(115px,10.5vw,157px)}
 .pbf40-reward-items a{height:clamp(57px,7vw,97px)}
 .pbf40-news-featured img{height:clamp(90px,8.6vw,145px)}
 .pbf40-news-entry img{min-height:61px}
 .pbf40-media-main{aspect-ratio:1.95}
 .pbf40-final{min-height:clamp(86px,8.8vw,130px)}
}
.pbf40-faction-glyph{display:inline-flex!important;width:clamp(24px,2.4vw,38px);flex:0 0 auto;align-self:center!important}
.pbf16-crest{width:100%;height:auto;filter:drop-shadow(0 0 6px currentColor)}
.pbf40-human .pbf16-crest{color:#49beff}
.pbf40-alien .pbf16-crest{color:#ff3448}
.pbf40-hunter .pbf16-crest{color:#56fa67}
@media(min-width:950px) and (max-width:1150px){
 .pbf40-faction-copy{padding-left:43%;gap:5px}
 .pbf40-faction-glyph{width:22px}
 .pbf40-faction h3{font-size:14px}
 .pbf40-faction p{font-size:9px}
}
@media(max-width:949px){.pbf40-faction-glyph{display:none!important}}
/* Account access is essential on mobile. Do not hide the sole sign-in entry point. */
@media(max-width:740px){
 body.pbf-home .header-actions .account-btn{display:inline-flex;min-height:28px;font-size:9px;padding:5px 7px}
 body.pbf-home .header-actions .account-btn:nth-child(2){display:none}
 body.pbf-home .header-actions .download-top{min-height:28px;font-size:9px;padding:5px 7px}
 body.pbf-home .pbf15-brand-header .pbf15-wing{width:22px;height:27px}
 body.pbf-home .pbf15-brand-header .pbf15-word strong{font-size:15px}
 body.pbf-home .pbf15-brand-header .pbf15-word small{font-size:6px}
 body.pbf-home .header-inner{gap:5px;min-height:52px}
 body.pbf-home .menu-toggle{padding:6px}
 body.pbf-home .menu-toggle span{width:19px}
 body.pbf-home .pbf15-region-switch{display:none}
 .pbf40-faction p,.pbf40-game-copy p,.pbf40-news-entry p{font-size:12px}
 .pbf40-faction h3{font-size:17px}
 .pbf40-faction a,.pbf40-game-tabs button{font-size:11px}
 .pbf40-rank-card table{font-size:11px}
 .pbf40-rank-card th{font-size:10px}
 .pbf40-rank-card a{font-size:11px}
 .pbf40-rewards>p,.pbf40-api-note{font-size:11px}
}

/* Approved artwork refresh, within the existing homepage grid. */
.pbf40-faction.pbf40-human{background:#0a2138}
.pbf40-faction.pbf40-alien{background:#250e1b}
.pbf40-faction.pbf40-hunter{background:#0d261f}
.pbf40-faction .pbf40-faction-art{
    inset:0 auto auto 0!important;width:49%!important;height:100%!important;
    object-fit:cover!important;object-position:center 18%!important;filter:none;opacity:1
}
.pbf40-final .pbf40-final-copy{margin-inline:auto}
.pbf40-platforms strong{font-size:clamp(.74rem,1vw,.95rem)}
.pbf40-news-layout.pbf-element-news{display:block}
.pbf-elements{
    background:linear-gradient(110deg,#142939,#101c2f 52%,#201834);
    border:1px solid #305577;border-radius:5px;padding:12px 8px;text-align:center
}
.pbf-elements h3{font-size:clamp(15px,1.4vw,22px);margin:0 0 9px;letter-spacing:.08em;text-transform:uppercase}
.pbf-elements h3 a{color:#edf5ff}
.pbf-element-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0}
.pbf-element{color:#dceafa;padding:0 6px;min-width:0}
.pbf-element+.pbf-element{border-left:1px solid #29465d}
.pbf-element-fire{--element:#ff9b49}.pbf-element-water{--element:#6ad7ff}
.pbf-element-earth{--element:#f3c879}.pbf-element-air{--element:#8debdc}
.pbf-element-void{--element:#c8a0ff}
.pbf-element-link{display:grid;justify-items:center;gap:4px;color:var(--element)}
.pbf-element-link svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.pbf-element-link svg circle{fill:currentColor;fill-opacity:.08;stroke-opacity:.4;stroke-width:1}
.pbf-element strong{font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.pbf-element p{font-size:clamp(10px,.77vw,12px);line-height:1.3;margin:4px 0 0}
.pbf-element-rule{font-size:clamp(10px,.83vw,13px);line-height:1.35;color:#bad2e7;font-weight:700;margin:10px 4px 0}
.pbf-elements-detail{text-align:left;padding:clamp(16px,3vw,36px)}
.pbf-elements-detail .pbf-element-grid{grid-template-columns:1fr}
.pbf-elements-detail .pbf-element{padding:14px 0;border-left:0}
.pbf-elements-detail .pbf-element+.pbf-element{border-top:1px solid #29465d}
.pbf-elements-detail h2{color:var(--element);margin:0;scroll-margin-top:80px}
.pbf-elements-detail .pbf-element p{font-size:1rem;line-height:1.55}
.pbf-company-credit{font-size:.8rem;color:#b7cde2;display:block;margin-top:6px}
.footer-bottom span:last-child a + a{margin-left:.65em}
@media(max-width:520px){
    .pbf-element-news .pbf-element-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
    .pbf-element-news .pbf-element:nth-child(odd){border-left:0}
    .pbf-element-news .pbf-element:last-child{grid-column:1/-1}
}