/* single blog post */
.post-hero{background:center/cover no-repeat;border-bottom:1px solid var(--line)}
.post-hero .wrap{max-width:860px;padding-top:110px;padding-bottom:36px}
.post-hero .back{color:#B7C3DA;font-size:14px}.post-hero .back::before{content:"← "}
.post-meta{margin-top:18px;color:var(--ice);font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.post-hero h1{margin-top:12px;font:900 clamp(36px,5.4vw,64px)/.95 var(--display);text-transform:uppercase;font-style:italic}
.post-body{max-width:860px;padding-top:36px;padding-bottom:64px;font-size:17px;line-height:1.7;color:#C9D4E8}
.post-body .lede{font-size:20px;color:var(--text)}
.post-body h2{margin:40px 0 12px;font:800 28px/1.1 var(--display);text-transform:uppercase;color:var(--text)}
.post-body p{margin:12px 0}
.post-body ul,.post-body ol{margin:12px 0 12px 22px;display:grid;gap:8px}
.post-body strong{color:var(--text)}
.post-body .btn-row{margin-top:20px}
.post-body .callout-box{margin:18px 0;padding:14px 16px;border:1px solid var(--line-hi);border-left:3px solid #F5C451;border-radius:var(--r-sm);background:var(--hull);font-size:15px}
.post-body code{font:14px ui-monospace,Menlo,Consolas,monospace;background:var(--black);padding:2px 6px;border-radius:4px}
.faq{display:grid;gap:10px;margin-top:12px}
.faq div{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--hull)}
.faq dt{font-weight:700;color:var(--text)}
.faq dd{margin-top:4px;font-size:15px}

/* "Market wall" post header: a tilted wall of real skins on rarity-edged cards, MP coins, title on the dark left side */
.mw-hero{position:relative;overflow:hidden;background:radial-gradient(60% 90% at 78% 40%,#10233f 0%,#060d1a 55%,#020409 100%) center/cover no-repeat,url(/assets/img/blog/upgrader-market.jpg) center/cover no-repeat}
.mw-hero .wrap{position:relative;z-index:2}
.mw{position:absolute;inset:0;pointer-events:none}
.mw-wall{position:absolute;left:47%;top:-70px;display:grid;grid-template-columns:repeat(6,128px);gap:14px;transform:perspective(1300px) rotateY(-24deg) rotateX(6deg);transform-origin:left center}
.mw-card{position:relative;height:104px;border-radius:12px;overflow:hidden;background:radial-gradient(70% 55% at 50% 50%,color-mix(in srgb,var(--r) 30%,transparent),transparent 75%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);border-bottom:4px solid var(--r);box-shadow:0 0 40px -14px var(--r);display:grid;place-items:center}
.mw-card.hi{outline:2px solid #F5C451;box-shadow:0 0 56px -6px rgba(245,196,81,.8)}
.mw-card img{width:84%;height:74%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));opacity:0;transition:opacity .5s}
.mw-card.in img{opacity:1}
.mw-blank{width:60%;height:18%;border-radius:40% 8% 8% 40%/50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),rgba(255,255,255,.04));transform:skewX(-14deg)}
.mw-p{position:absolute;left:10px;top:8px;font:800 12px/1 var(--body);color:#F5C451;z-index:1}
.mw-coin{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#F5C451 40%,#9A6A12 100%);box-shadow:0 0 40px rgba(245,196,81,.45),inset 0 -6px 12px rgba(0,0,0,.35);z-index:1}
.mw-coin b{position:absolute;inset:0;display:grid;place-items:center;font:900 22px/1 var(--body);color:#5a3d06}
.mw-coin.c1{right:7%;bottom:8%;width:96px;height:96px;transform:rotate(-12deg)}.mw-coin.c1 b{font-size:28px}
.mw-coin.c2{right:14%;bottom:3%;width:62px;height:62px;transform:rotate(14deg);opacity:.85}.mw-coin.c2 b{font-size:17px}
.mw-coin.c3{right:3%;bottom:30%;width:44px;height:44px;opacity:.65;filter:blur(1px)}.mw-coin.c3 b{font-size:12px}
.mw-fade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#03060c 0%,rgba(3,6,12,.92) 32%,rgba(3,6,12,.3) 62%,rgba(3,6,12,.35) 100%),linear-gradient(0deg,#000 2%,rgba(0,0,0,.2) 45%,rgba(0,0,0,.45))}
@media (max-width:900px){.mw-wall{left:30%;grid-template-columns:repeat(6,120px);gap:12px}.mw-card{height:96px}.mw-fade{background:linear-gradient(90deg,rgba(3,6,12,.95),rgba(3,6,12,.6) 70%,rgba(3,6,12,.45)),linear-gradient(0deg,#000 2%,transparent 50%)}.mw-coin{display:none}}
@media (prefers-reduced-motion:reduce){.mw-card img{transition:none}}
