:root{--bg:#0B1220;--panel:#111827;--panel2:#162033;--line:#243049;--text:#F3F4F6;--body:#C9CED8;--muted:#8B95A7;--mint:#06D6A0;--yellow:#FFBE0B;--red:#ED1C24}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:Inter,'Segoe UI',Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--mint)}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
/* header: war-room table. Image comes from the post's featuredImage via --hero. */
.hero{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(11,18,32,.78) 0%,rgba(11,18,32,.45) 55%,rgba(11,18,32,.25) 100%),var(--hero,none) var(--hero-pos,center)/cover no-repeat #0B1220;border-bottom:1px solid var(--line)}
.hero--hub{background:linear-gradient(90deg,rgba(11,18,32,.86) 0%,rgba(11,18,32,.6) 55%,rgba(11,18,32,.4) 100%),var(--hero,none) var(--hero-pos,center)/cover no-repeat #0B1220}
.hero .wrap{position:relative;padding-top:96px;padding-bottom:110px}
.hero--hub .wrap{padding-bottom:96px}
.kick{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--mint);font-weight:700}
h1{text-shadow:0 2px 18px rgba(0,0,0,.6);font-family:'Playfair Display',Georgia,serif;font-weight:400;color:#fff;font-size:clamp(34px,7vw,52px);line-height:1.1;margin:14px 0 18px;letter-spacing:-.4px}
.hero--hub h1{font-size:clamp(36px,7vw,56px)}
.answer{font-size:19px;line-height:1.5;color:#fff;max-width:600px;margin:0}
.date{margin-top:22px;font-size:13px;color:var(--muted)}
.crumb{margin:0 0 22px;font-size:14px}.crumb a{color:#fff;text-decoration:none;opacity:.85;border-bottom:1px solid rgba(255,255,255,.35)}.crumb a:hover{opacity:1}
/* body */
h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;color:#fff;font-size:28px;line-height:1.2;margin:48px 0 12px}
h2:first-child{margin-top:0}
p{margin:0 0 14px}
ul,ol{padding-left:22px;margin:0 0 14px}
li{margin:0 0 6px}
li::marker{color:var(--mint)}
b,strong{color:#fff;font-weight:600}
main{padding:44px 0 20px}
.rule{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--mint);border-radius:10px;padding:16px 18px;margin:0 0 14px;color:#fff}
.lineups{display:grid;gap:14px;margin:16px 0}
.lineup{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.lineup h3{margin:0 0 10px;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--yellow)}
.row{display:flex;gap:12px;padding:6px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:none}
.row span{flex:none;width:52px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);padding-top:3px}
.row div{color:#fff;font-weight:500}
.warn{background:#2a1517;border:1px solid #5a2226;border-radius:10px;padding:12px 16px;color:#fff;margin:0 0 14px}
.note{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--muted)}
.heroes{display:flex;flex-wrap:wrap;gap:10px}
.hero-fig{margin:0;width:72px;text-align:center}
.hero-fig img{display:block;width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.hero-fig figcaption{margin-top:4px;font-size:12px;line-height:1.2;color:#fff;font-weight:500}
.dd{margin:10px 0 0;font-size:.92em;opacity:.85}
.radar{background:linear-gradient(180deg,#0f1f3d,#111827);border:1px solid #2b4a85;border-left:5px solid #4DA3FF;border-radius:12px;padding:6px 22px 18px;margin:48px 0 14px;box-shadow:0 0 0 1px rgba(77,163,255,.15),0 8px 28px rgba(77,163,255,.12)}
.radar h2{margin:16px 0 10px;color:#fff}.radar h2:before{content:"KEY GEAR";display:block;font:600 11px Inter,sans-serif;letter-spacing:.14em;color:#4DA3FF;margin-bottom:6px}.radar p{color:#e6ebf5;margin:0}.radar p+p{margin-top:10px}.radar b{color:#fff}
.radar .note{margin-top:14px;padding-top:12px;border-top:1px solid #2b4a85;font-size:inherit;line-height:inherit;color:inherit}.radar .note p{margin:0 0 8px}.radar .note ul{margin:6px 0 0;padding-left:20px;color:#e6ebf5}.radar .note li{margin:4px 0}
.more{margin-top:36px;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.more a{font-weight:600}
/* hub + post cards */
.hub-h2{font-family:Inter,sans-serif;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--yellow);margin:0 0 16px;font-weight:700}
.post{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0 0 18px;color:inherit;transition:border-color .15s}
.post:hover,.post:focus{border-color:var(--mint)}
.post img{display:block;width:100%;height:190px;object-fit:cover}
.post .body{padding:18px 20px 20px}
.meta{font-size:13px;color:var(--muted);margin:0 0 8px}
.post h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;color:#fff;font-size:26px;line-height:1.2;margin:0 0 10px}
.post p{margin:0 0 12px}
.go{color:var(--mint);font-weight:600}
.about{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--muted)}
.more-list{margin-top:36px}
footer{border-top:1px solid var(--line);padding:22px 0 40px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(min-width:640px){.lineups{grid-template-columns:repeat(3,1fr)}.hero-fig{width:52px}.hero-fig img{width:52px;height:52px;border-radius:10px}.hero-fig figcaption{font-size:11px}.row{flex-direction:column;gap:2px}.row span{width:auto}}
.hero .wrap{padding-bottom:40px}
/* language toggle (English / Español) */
.lang{position:absolute;top:18px;right:20px;z-index:3;display:flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden;background:rgba(11,18,32,.55);backdrop-filter:blur(4px);font-size:13px;font-weight:600}
.lang a{color:#fff;text-decoration:none;padding:7px 14px;opacity:.8}
.lang a:hover{opacity:1}
.lang a.on{background:#fff;color:#0B1220;opacity:1}
/* hub: two-column post grid on desktop */
@media(min-width:900px){
  .hero--hub .wrap,.wrap--hub{max-width:1040px}
  body:has(.wrap--hub) footer .wrap{max-width:1040px}
  .posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .posts .post{margin:0;display:flex;flex-direction:column}
  .posts .post .body{flex:1}
}
/* portrait placeholder for heroes without an image */
.hero-fig .ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);font-weight:700;font-size:20px}
.hero .date{color:#d5dbe8;text-shadow:0 1px 8px rgba(0,0,0,.75)}
/* simple data table */
.tbl{overflow-x:auto;margin:14px 0 18px;border:1px solid var(--line);border-radius:10px}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.tbl th{background:var(--panel2);color:#fff;text-align:left;font-weight:600;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;padding:10px 12px}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top;color:var(--body)}
.tbl td:first-child{color:#fff;font-weight:600;white-space:nowrap}
@media(max-width:640px){
  .tbl{border:none}
  .tbl thead{display:none}
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 10px}
  .tbl td{border:none;padding:3px 0;white-space:normal}
  .tbl td:first-child{font-size:16px;padding-bottom:6px}
  .tbl td:not(:first-child)::before{content:attr(data-label) ": ";color:var(--muted);font-size:12px;letter-spacing:.6px;text-transform:uppercase}
}
/* screenshot gallery */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0 8px}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.shots figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
.shots figcaption b{color:#fff}
@media(min-width:900px){.shots{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* weekly calendar */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:14px 0 16px}
.day{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 10px 12px}
.day.hot{border-color:var(--mint);background:#0f2a2a}
.day .d{margin:0;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--yellow);font-weight:700}
.day .ev{margin:4px 0 0;font-size:13px;color:#fff;font-weight:600;line-height:1.3}
.day .do{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--body)}
@media(max-width:760px){.week{grid-template-columns:1fr}.day{display:grid;grid-template-columns:48px 1fr;column-gap:10px;padding:10px 12px}.day .d{grid-row:span 2;padding-top:2px}.day .ev{margin:0}.day .do{margin:2px 0 0}}
.lineup ol{margin:4px 0 0;padding-left:20px}.lineup li{margin:4px 0;color:var(--body)}.lineup li b{color:#fff}
/* ratings + comments */
.fb{margin-top:48px;padding:22px 22px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.fb h2{font-size:22px;margin:0 0 10px}
.fb h2+ .fb-rate{margin-bottom:26px}
.fb-rate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.stars{display:flex;gap:2px}
.star{background:none;border:0;padding:2px 3px;font-size:30px;line-height:1;color:#3a4660;cursor:pointer;transition:color .12s,transform .12s}
.star.on{color:var(--yellow)}
.star:hover{transform:scale(1.12)}
.star:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}
.fb-sum{margin:0;font-size:14px;color:var(--muted)}
.fb-list{list-style:none;margin:0 0 18px;padding:0}
.fb-list li{padding:12px 0;border-top:1px solid var(--line)}
.fb-list li:first-child{border-top:0;padding-top:0}
.fb-list p{margin:0}
.fb-who{font-size:13px;color:var(--muted);margin-bottom:4px!important}
.fb-empty{color:var(--muted);font-size:15px}
.fb-form{display:grid;gap:10px}
.fb-form label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.fb-form input,.fb-form textarea{font:inherit;font-size:16px;color:#fff;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.fb-form input:focus,.fb-form textarea:focus{outline:none;border-color:var(--mint)}
.fb-form button{justify-self:start;font:inherit;font-weight:600;font-size:15px;color:#0B1220;background:var(--mint);border:0;border-radius:999px;padding:10px 20px;cursor:pointer}
.fb-form button:disabled{opacity:.6}
.fb-msg{margin:0;font-size:14px;color:#fff;min-height:1px}
.fb-rule{margin:0;font-size:12px;color:var(--muted)}
.fb .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* step figures */
.steps-fig{margin:14px 0 10px}
.steps-fig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.steps-fig figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
/* buyer quotes */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 14px}
.quote{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.qstars{color:var(--yellow);font-size:15px;letter-spacing:2px}
.quote blockquote{margin:6px 0 8px;color:#fff;font-size:17px;font-weight:600;line-height:1.35}
.quote figcaption{font-size:12px;color:var(--muted);line-height:1.4}
@media(max-width:560px){.quotes{grid-template-columns:1fr}}

/* in-game icons beside list items */
ul:has(>li>.ico){padding-left:0}
ul:has(>li>.ico)>li{list-style:none;position:relative;padding-left:70px;margin:0 0 12px}
li:has(>.ico){min-height:62px}
.ico{position:absolute;left:0;top:2px;width:56px;height:56px;border-radius:12px;border:1px solid var(--line);object-fit:cover;background:var(--panel2)}
/* faction plan cards */
.side{margin:18px 0;padding:16px 20px 6px;background:var(--panel);border:1px solid var(--line);border-left:4px solid #5aa0ff;border-radius:12px}
.side--red{border-left-color:#ef6a5c}
.side h3{margin:0 0 10px;font:700 13px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5aa0ff}
.side--red h3{color:#ef6a5c}
.side ol{margin:0;padding-left:22px}.side li{margin:0 0 10px;color:var(--body)}.side li b{color:#fff}
h3{color:#fff}

.note.disclaimer{margin-top:18px}.note.disclaimer p{margin:0}.note.disclaimer b{color:var(--body)}
.rank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0 18px}
.rank-grid div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center}
.rank-grid span{display:block;font-size:12px;color:var(--muted)}.rank-grid b{color:#fff;font-size:15px}
@media(max-width:640px){.rank-grid{grid-template-columns:repeat(2,1fr)}.rank-grid div{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:8px 12px}.rank-grid span{display:inline}}
.chest-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0 20px}
.chest-grid div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center}
.chest-grid img{display:block;margin:0 auto 6px;width:70px;height:60px;object-fit:contain}
.chest-grid span{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.chest-grid b{color:#fff;font-size:15px}
@media(max-width:640px){.chest-grid{grid-template-columns:repeat(3,1fr)}}
/* official store card: bottom of the store page, footer of every other page */
.offer-wrap{margin:0 auto 36px;width:calc(100% - 40px);max-width:340px;position:relative}
.offer{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;padding:14px 16px 14px 10px;border-radius:14px;text-decoration:none;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#3a1d6e 0%,#1b1440 55%,#0f1530 100%);border:1px solid rgba(255,190,11,.45);box-shadow:0 0 0 1px rgba(6,214,160,.18),0 10px 30px rgba(0,0,0,.5),0 0 28px rgba(255,77,141,.25);transition:transform .15s,box-shadow .15s}
.offer:hover,.offer:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(6,214,160,.5),0 14px 34px rgba(0,0,0,.55),0 0 36px rgba(255,190,11,.4)}
.offer .burst{position:absolute;width:58px;height:58px;opacity:0;pointer-events:none;fill:none;stroke-width:2.4;stroke-linecap:round;z-index:1;animation:lw-burst 4s ease-out infinite}
@keyframes lw-burst{0%{opacity:0;transform:scale(.15)}10%{opacity:1}40%{opacity:.85;transform:scale(1.1)}65%,100%{opacity:0;transform:scale(1.4)}}
.offer .giftbox{position:relative;z-index:2;flex:none;width:68px;height:68px;overflow:visible;animation:lw-bob 2.4s ease-in-out infinite}
.offer .lid{transform-box:fill-box;transform-origin:30% 100%;animation:lw-lid 2.4s ease-in-out infinite}
@keyframes lw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes lw-lid{0%,55%,100%{transform:translateY(0) rotate(0)}68%{transform:translateY(-9px) rotate(-12deg)}82%{transform:translateY(-2px) rotate(-3deg)}}
.offer .spark{opacity:0;animation:lw-spark 2.4s ease-out infinite}
.offer .s2{animation-delay:.15s}.offer .s3{animation-delay:.3s}
@keyframes lw-spark{0%,60%{opacity:0;transform:translateY(8px)}72%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.offer-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;line-height:1.25}
.offer-kick{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);font-weight:700}
.offer-copy b{font-size:15px;font-weight:700;color:#fff}
.offer .cta{font-size:13px;font-weight:600;color:var(--mint)}
@media(prefers-reduced-motion:reduce){.offer .burst,.offer .giftbox,.offer .lid,.offer .spark{animation:none}.offer .burst{opacity:.5}}
.offer-body{margin:36px 0 8px}
.offer-body .offer-wrap{margin:0;width:100%;max-width:360px}
/* footer card linking to the store guide */
.footer-card{padding-bottom:22px}
.footer-card .offer-wrap{margin:0;width:100%;max-width:400px}
.offer-thumb{position:relative;z-index:2;flex:none;width:68px;height:68px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,190,11,.55);box-shadow:0 4px 14px rgba(0,0,0,.45);animation:lw-bob 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.offer-thumb{animation:none}}
.steps-fig--small{max-width:360px}
.aff-note{flex-basis:100%;font-size:12px;line-height:1.5}
.offer-note{margin:8px 2px 0;font-size:12px;line-height:1.4;color:var(--muted)}
/* LootBar deal callouts inside the store page */
.deal{margin:24px 0;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:12px}.deal p{margin:0 0 10px;color:var(--body)}.deal p b{color:#fff}.deal-cta{display:inline-block;font-weight:700;color:var(--yellow);text-decoration:none}.deal-cta:hover{text-decoration:underline}.deal-note{margin-left:8px;font-size:13px;color:var(--muted)}
td.save,th.save{color:var(--mint);font-weight:700}
/* small screenshots (Gold Bricks guide) */
.shot-sm{max-width:240px}.shot-xs{max-width:180px}
@media(max-width:640px){.shot-sm{max-width:62%}.shot-xs{max-width:48%}}
.footer-deal .deal{margin:0 0 22px}
/* Gold Bricks guide card on the right side of the hub hero */
.hero-card .offer-wrap{margin:0 auto 32px;width:calc(100% - 40px);max-width:360px}
@media(min-width:1100px){.hero--hub{position:relative}.hero-card .offer-wrap{position:absolute;right:28px;bottom:28px;margin:0;width:340px}}
/* Gold Bricks guide, desktop: wide main column (2/3) + narrow side column (1/3) */
@media(min-width:1100px){
  .wrap--wide{max-width:1180px}
  .hero .wrap--wide h1,.hero .wrap--wide .answer{max-width:620px}
  .footer-deal.wrap--wide .deal{max-width:720px}
  .two-col{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto 1fr;column-gap:56px;align-items:start}
  .two-col .col-main{grid-column:1}.two-col .col-side{grid-column:2;grid-row:1 / span 2}
  .col-main>:first-child,.col-side>:first-child{margin-top:0}
  .col-main table{width:100%}
  .col-side .steps-fig.shot-sm{max-width:58%}
  .col-side .steps-fig.shot-xs{max-width:42%}
  .col-side table{width:100%}
  .col-side{padding-left:28px;border-left:1px solid var(--line)}
}
/* narrow side column: use the phone versions of wide blocks */
@media(min-width:1100px){
  .col-side .week{grid-template-columns:1fr}
  .col-side .day{display:grid;grid-template-columns:48px 1fr;column-gap:10px;padding:10px 12px}
  .col-side .day .d{grid-row:span 2;padding-top:2px}.col-side .day .ev{margin:0}.col-side .day .do{margin:2px 0 0}
  .col-side table{font-size:14px}
  .col-side .rank-grid{grid-template-columns:repeat(2,1fr)}
  .col-side .chest-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1100px){.col-side .lineups:not(:has(.heroes)){grid-template-columns:1fr}}
/* rating sits under the main column on two-column guides */
@media(min-width:1100px){.two-col{grid-template-rows:auto auto 1fr}.two-col .col-side{grid-row:1 / span 3}.two-col .col-fb{grid-column:1}}
.col-fb .fb{margin-top:32px}
.deal--plus p{margin:0;font-size:17px}.deal--plus b{color:var(--yellow)}
.src-h{margin:18px 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.src-list{font-size:14px}.src-list li{margin:4px 0}
/* long lists of short items: two columns on desktop */
@media(min-width:1100px){
  .col-main ul.two-up{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
  .col-side ul.two-up{display:block}
}