/* Homepage polish: themed section headings, framed cards and the new guide / game grids.
   Loaded after the page's own <style> and after page-hero.css (which provides .ph-pre / .ph-main / .ph-rule). */

/* ================= section headings ================= */
.sh{--ph:#ff8a1f;max-width:900px!important;margin:0 auto 46px!important;text-align:center}
.sh .eyebrow{color:var(--ph)!important;margin-bottom:12px}
.sh h2{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 16px!important;font-size:16px!important;line-height:1.1;font-weight:400;color:#f7efe3}
.sh .ph-pre{font-size:clamp(13px,1.6vw,17px);letter-spacing:.36em;padding-left:.36em}
.sh .ph-main{font-size:clamp(32px,5vw,58px)}
.sh .ph-rule{width:min(380px,72%);margin:0 auto 18px}
.sh p{max-width:700px;margin:0 auto!important;font-size:17px!important;line-height:1.65;color:#cdbfae!important}

.sh-left{--ph:#7b8cff}
.sh-left .eyebrow{color:var(--ph)!important}
.sh-left h2{display:flex!important;flex-direction:column;align-items:flex-start;gap:8px;margin:4px 0 16px!important;font-size:16px!important;line-height:1.1;font-weight:400;color:#f7efe3}
.sh-left .ph-pre{font-size:clamp(13px,1.5vw,16px);letter-spacing:.32em;padding-left:0}
.sh-left .ph-pre::before{display:none}
.sh-left .ph-main{font-size:clamp(30px,4.4vw,50px)}
.sh-left .ph-rule{justify-content:flex-start;width:min(320px,80%);margin:0 0 18px}
.sh-left .ph-rule::before{display:none}
.sh-left>p{font-size:17px!important;line-height:1.65;color:#cdbfae!important}

/* ================= videos ================= */
#content{--vc:#ff5a4d}
.video-card{border-radius:14px;overflow:hidden;border-color:color-mix(in srgb,var(--vc,#ff5a4d) 30%,#2a231c)!important;
  background:linear-gradient(170deg,color-mix(in srgb,var(--vc,#ff5a4d) 7%,#171009),#100c09 60%)!important;transition:transform .28s ease,border-color .25s ease,box-shadow .3s ease!important}
.video-card:hover{transform:translateY(-5px);border-color:var(--vc,#ff5a4d)!important;box-shadow:0 22px 46px -24px color-mix(in srgb,var(--vc,#ff5a4d) 70%,transparent)}
.video-info h3{font-size:16px!important;line-height:1.4}
.video-info .summary{font-size:14px!important;color:#c9bcac!important}

/* ================= signature journeys ================= */
.series-grid{gap:24px!important}
.series-card{--c:#ff8a1f;position:relative;overflow:hidden;padding:34px 30px 30px!important;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--c) 32%,#2a231c)!important;background:linear-gradient(165deg,color-mix(in srgb,var(--c) 10%,#171009),#100c09 62%)!important;
  transition:transform .28s ease,box-shadow .3s ease,border-color .25s ease}
.series-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--c),transparent 75%)}
.series-card::after{content:attr(data-n);position:absolute;top:14px;right:20px;font-family:'Russo One',sans-serif;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--c) 34%,transparent);pointer-events:none}
.series-card:hover{transform:translateY(-5px);border-color:var(--c)!important;box-shadow:0 22px 46px -24px color-mix(in srgb,var(--c) 70%,transparent)}
.series-ico{display:grid;place-items:center;width:54px;height:54px;margin-bottom:18px;border-radius:14px;color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 45%,#2a231c);background:rgba(0,0,0,.36)}
.series-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.series-card .tag{padding:5px 13px;border-radius:999px;font-size:11.5px!important;color:var(--c)!important;border:1px solid color-mix(in srgb,var(--c) 42%,#2a231c);background:color-mix(in srgb,var(--c) 9%,transparent)}
.series-card h3{font-family:'Russo One',sans-serif!important;font-weight:400!important;font-size:27px!important;color:#f7f0e7}
.series-card>p{font-size:16px!important;line-height:1.65;color:#cbbdad!important}
.series-card li{font-size:15px!important}
.series-card li::before{background:var(--c)!important;transform:rotate(45deg)}

/* ================= guide categories ================= */
.gcat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:6px 0 10px}
.gcat{--c:#ff8a1f;position:relative;display:flex;align-items:flex-start;gap:18px;padding:24px 22px 22px;overflow:hidden;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--c) 34%,#2a231c);background:linear-gradient(165deg,color-mix(in srgb,var(--c) 11%,#171009),#100c09 66%);
  transition:transform .28s ease,border-color .25s ease,box-shadow .3s ease}
.gcat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--c),transparent 75%)}
.gcat:hover{transform:translateY(-5px);border-color:var(--c);box-shadow:0 22px 46px -24px color-mix(in srgb,var(--c) 70%,transparent)}
.gcat-badge{flex:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 50%,transparent))}
.gcat-shape{--shape:circle(50%);position:relative;display:grid;place-items:center;width:58px;height:58px;color:var(--c);clip-path:var(--shape);background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 22%,#000))}
.gcat-shape::before{content:"";position:absolute;inset:2px;clip-path:var(--shape);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 20%,#191210),#110d0a 78%)}
.gcat-shape svg{position:relative;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gcat-body{min-width:0}
.gcat-count{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.gcat-name{margin:4px 0 8px;font-family:'Russo One',sans-serif;font-size:21px;line-height:1.2;color:#f7f0e7}
.gcat-line{margin:0 0 12px;font-size:15px;line-height:1.55;color:#c9bcac}
.gcat-go{font-size:13.5px;font-weight:700;letter-spacing:.03em;color:var(--c)}
.gcat-go b{display:inline-block;transition:transform .25s ease}
.gcat:hover .gcat-go b{transform:translateX(5px)}

/* ================= addon lineup (same cards as the addons page) ================= */
.home-roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.roster-card{--t:var(--legendary);--tb:var(--legendary-bright)}
.roster-card[data-tier="rare"]{--t:var(--rare);--tb:var(--rare-bright)}
.roster-card[data-tier="epic"]{--t:var(--epic);--tb:var(--epic-bright)}
.roster-card[data-tier="uncommon"]{--t:var(--uncommon);--tb:var(--uncommon-bright)}
.roster-card[data-tier="gold"]{--t:var(--gold);--tb:var(--gold-bright)}
.roster-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:20px 18px 18px;overflow:hidden;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--t) 38%,#2a231c);background:linear-gradient(160deg,color-mix(in srgb,var(--t) 13%,#15100c),#100c09 72%);
  transition:transform .28s ease,border-color .25s ease,box-shadow .3s ease}
.roster-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--t),transparent)}
.roster-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--t) 22%,transparent),transparent)}
.roster-card:hover{transform:translateY(-5px);border-color:var(--t);box-shadow:0 20px 44px -20px color-mix(in srgb,var(--t) 65%,transparent)}
.roster-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.roster-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:var(--tb);border:1px solid color-mix(in srgb,var(--t) 48%,#2a231c);background:rgba(0,0,0,.38)}
.roster-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.roster-num{font-family:'Russo One',sans-serif;font-size:14px;letter-spacing:.16em;color:color-mix(in srgb,var(--tb) 65%,#000)}
.roster-tier{margin-top:8px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tb);position:relative;z-index:1}
.roster-name{margin:0;font-family:'Russo One',sans-serif;font-size:20px;line-height:1.2;color:#f7f0e7;position:relative;z-index:1}
.roster-line{flex:1;margin:0;font-size:14.5px;line-height:1.5;color:#cbbdad;position:relative;z-index:1}
.roster-go{margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--tb);position:relative;z-index:1}
.roster-go b{display:inline-block;transition:transform .25s ease}
.roster-card:hover .roster-go b{transform:translateX(5px)}

/* ================= game cards ================= */
.hg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hg-card{--gc:#9abce9;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:290px;padding:28px 28px 26px;overflow:hidden;isolation:isolate;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--gc) 36%,#2a231c);background:#120e0b;transition:transform .28s ease,border-color .25s ease,box-shadow .3s ease}
.hg-card:hover{transform:translateY(-5px);border-color:var(--gc);box-shadow:0 22px 50px -24px color-mix(in srgb,var(--gc) 75%,transparent)}
.hg-art{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hg-art img{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);max-width:none;object-fit:cover;filter:blur(2.5px) saturate(1.2) brightness(.7);transform:scale(1.03);transition:filter .5s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.hg-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,11,9,.92) 0%,rgba(14,11,9,.55) 48%,rgba(14,11,9,.18) 100%)}
.hg-card:hover .hg-art img{filter:blur(1.5px) saturate(1.3) brightness(.9);transform:scale(1.09)}
.hg-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1;background:linear-gradient(90deg,var(--gc),transparent 75%)}
.hg-tag{align-self:flex-start;padding:5px 13px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gc);
  border:1px solid color-mix(in srgb,var(--gc) 50%,#2a231c);background:rgba(10,8,6,.55)}
.hg-card h3{margin:0;font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.85)}
.hg-card p{margin:0;font-size:16px;line-height:1.6;color:#e2d7c8;text-shadow:0 1px 10px rgba(0,0,0,.8);max-width:46ch}
.hg-go{margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gc)}
.hg-go b{display:inline-block;transition:transform .25s ease}
.hg-card:hover .hg-go b{transform:translateX(6px)}
.community-pulse{margin-top:36px!important;padding:28px 24px!important;border:1px solid color-mix(in srgb,var(--ph,#9ad24a) 28%,#2a231c)!important;border-radius:14px;
  background:linear-gradient(170deg,color-mix(in srgb,#9ad24a 7%,#171009),#100c09 65%)}
.pulse-num{font-size:40px!important}
.pulse-label{font-size:12.5px!important}
.pulse-feed{font-size:14.5px!important}

/* ================= community + about ================= */
.community-copy li{font-size:16px!important}
.community-copy li::before{transform:rotate(45deg);background:#7b8cff!important}
.discord-card{position:relative;overflow:hidden;padding:32px!important;border-radius:14px;border:1px solid color-mix(in srgb,#7b8cff 38%,#2a231c)!important;
  background:linear-gradient(165deg,color-mix(in srgb,#7b8cff 12%,#161018),#100c09 66%)!important}
.discord-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#7b8cff,transparent 75%)}
.discord-card .server-name{font-family:'Russo One',sans-serif!important;font-weight:400!important;font-size:22px!important;color:#f7f0e7}
.discord-channels div{padding:12px 15px!important;border-radius:9px;font-size:14px!important;background:rgba(0,0,0,.28)}
.discord-channels div span:first-child{color:#aab4ff!important}
.members-line{font-size:13px!important}
.about-sigil{border-radius:14px;overflow:visible!important;border-color:color-mix(in srgb,#f0d27a 40%,#2a231c)!important;box-shadow:0 30px 70px -36px color-mix(in srgb,#f0d27a 55%,transparent)}
.about-sigil img{border-radius:13px}
.about-sigil::before{content:"";position:absolute;inset:-9px;z-index:2;pointer-events:none;
  background:linear-gradient(#f0d27a,#f0d27a) 0 0/26px 2px,linear-gradient(#f0d27a,#f0d27a) 0 0/2px 26px,linear-gradient(#f0d27a,#f0d27a) 100% 0/26px 2px,linear-gradient(#f0d27a,#f0d27a) 100% 0/2px 26px,
    linear-gradient(#f0d27a,#f0d27a) 0 100%/26px 2px,linear-gradient(#f0d27a,#f0d27a) 0 100%/2px 26px,linear-gradient(#f0d27a,#f0d27a) 100% 100%/26px 2px,linear-gradient(#f0d27a,#f0d27a) 100% 100%/2px 26px;
  background-repeat:no-repeat;opacity:.85}
.about-copy p{font-size:17px!important;line-height:1.7;color:#cdbfae!important}
.about-tags span{padding:8px 15px!important;border-radius:999px;font-size:12.5px!important;color:#eadfd0!important;border-color:color-mix(in srgb,#f0d27a 38%,#2b241d)!important;background:color-mix(in srgb,#f0d27a 8%,transparent)}

/* ================= responsive ================= */
@media(max-width:1100px){.home-roster{grid-template-columns:repeat(3,minmax(0,1fr))}.gcat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.hg-grid{grid-template-columns:1fr}.gcat-grid{grid-template-columns:1fr}.hg-card{min-height:250px;padding:24px 22px}}
@media(max-width:620px){
  .home-roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .home-roster .roster-card:last-child{grid-column:1/-1}
  .roster-card{padding:16px 14px}.roster-name{font-size:17px}.roster-line{font-size:13.5px}
  .series-card{padding:28px 22px 24px!important}.series-card::after{font-size:52px}
  .sh{margin-bottom:34px!important}
}
@media(prefers-reduced-motion:reduce){.video-card,.series-card,.gcat,.roster-card,.hg-card,.hg-art img{transition:none}}