body{margin:0;background:#120d09;font-family:'Alegreya Sans',Georgia,sans-serif;color:#eadcc2}
a{color:#e0b04f}a:hover{color:#f3cf7e}
html{scroll-behavior:smooth}
.btn-discord{background:linear-gradient(180deg,#8b94ff 0%,#5865f2 45%,#3c45c4 100%);color:#fff;border:1px solid #aab1ff;box-shadow:0 6px 20px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.45),inset 0 -3px 0 rgba(20,25,110,0.45);text-shadow:0 1px 2px rgba(20,25,110,0.6)}
.btn-discord:hover{filter:brightness(1.1);box-shadow:0 12px 34px rgba(88,101,242,0.6),0 6px 20px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.55),inset 0 -3px 0 rgba(20,25,110,0.45)}

.mode-img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.lift:hover .mode-img{transform:scale(1.07);filter:brightness(1.08)}
.stage-wrap{position:relative;height:700px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.stage-wrap:active{cursor:grabbing}
.stage-card{position:absolute;top:10px;left:50%;width:360px;height:660px;margin-left:-180px;box-sizing:border-box;border-radius:6px;padding:14px;background:linear-gradient(180deg,#2a2017 0%,#16100b 100%);border:2px solid #8a6c44;box-shadow:0 0 0 5px #1a130d,0 0 0 6px #6b5436,0 24px 50px rgba(0,0,0,0.7);display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s,filter .55s;font-family:inherit;color:inherit;text-align:center;cursor:pointer;-webkit-user-drag:none}
.stage-card img{-webkit-user-drag:none;pointer-events:none}
.stage-card:hover{filter:brightness(1.1)}
.stage-corner{position:absolute;width:18px;height:18px;border-color:#e8b24a;border-style:solid}
.stage-nav{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0;position:absolute;top:50%;margin-top:-28px;z-index:6}

@keyframes shapeShine{0%{filter:drop-shadow(0 0 6px var(--g)) drop-shadow(0 3px 6px rgba(0,0,0,0.9));transform:scale(1)}4%{filter:brightness(1.9) drop-shadow(0 0 18px #fff) drop-shadow(0 0 26px var(--g));transform:scale(1.18)}11%{filter:drop-shadow(0 0 6px var(--g)) drop-shadow(0 3px 6px rgba(0,0,0,0.9));transform:scale(1)}100%{filter:drop-shadow(0 0 6px var(--g)) drop-shadow(0 3px 6px rgba(0,0,0,0.9));transform:scale(1)}}
@keyframes starShine{0%{filter:drop-shadow(0 0 6px var(--g)) drop-shadow(0 3px 6px rgba(0,0,0,0.9));transform:scale(1) rotate(0)}6%{filter:brightness(2.3) drop-shadow(0 0 22px #fff) drop-shadow(0 0 44px #ffd36b);transform:scale(1.32) rotate(8deg)}24%{filter:brightness(2.1) drop-shadow(0 0 26px #fff) drop-shadow(0 0 52px #ffd36b);transform:scale(1.3) rotate(-4deg)}34%{filter:drop-shadow(0 0 6px var(--g)) drop-shadow(0 3px 6px rgba(0,0,0,0.9));transform:scale(1) rotate(0)}100%{filter:drop-shadow(0 0 6px var(--g)) drop-shadow(0 3px 6px rgba(0,0,0,0.9));transform:scale(1) rotate(0)}}
@keyframes arrowFlow{0%{opacity:.35;transform:translateX(0);filter:none}4%{opacity:1;transform:translateX(7px);filter:drop-shadow(0 0 8px #ffd36b)}11%{opacity:.35;transform:translateX(0);filter:none}100%{opacity:.35;transform:translateX(0);filter:none}}
.shape-shine{animation:shapeShine 8s ease-in-out infinite}
.star-shine{animation:starShine 8s ease-in-out infinite}
.chain-arrow{animation:arrowFlow 8s ease-in-out infinite !important}
.ste-spawn{background-image:linear-gradient(180deg,rgba(12,8,5,0) 40%,rgba(12,8,5,0.9) 100%),url(../img/lobby-spawn.jpg)}
.ste-match{background-image:linear-gradient(180deg,rgba(12,8,5,0) 40%,rgba(12,8,5,0.9) 100%),url(../img/lobby-matchmaking.jpg)}
@media (prefers-reduced-motion: reduce){.shape-shine,.star-shine,.chain-arrow{animation:none !important}}

.dd{position:relative;display:flex;align-items:center}
.dd-btn{background:none;border:0;padding:0;font:inherit;font-size:17px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:44px}
.dd-btn svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.dd:hover .dd-btn svg,.dd:focus-within .dd-btn svg{transform:rotate(180deg)}
.dd:hover .dd-btn,.dd:focus-within .dd-btn{color:#fbe3a0}
.dd-menu{position:absolute;top:100%;left:50%;padding-top:14px;transform:translate(-50%,10px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .25s;z-index:20}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd-panel{width:300px;padding:8px;border-radius:12px;background:linear-gradient(180deg,#2c2118 0%,#17110c 100%);border:1px solid #6b5436;box-shadow:0 20px 50px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,230,180,0.12);display:flex;flex-direction:column;gap:4px}
.dd-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:8px;text-decoration:none;color:#f4e8d2;transition:background .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.dd-item:hover{background:linear-gradient(90deg,rgba(232,178,74,0.18),rgba(232,178,74,0.04));transform:translateX(4px)}
.dd-ic{width:40px;height:40px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#3a2c1f,#1f1812);border:1px solid #5a4630}
.dd-t{display:block;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:16px}
.dd-s{display:block;font-size:14px;color:#b7a488}
.nav-active{color:#fbe3a0}
.nav-active::after{transform:scaleX(1)}
.tab-pill{padding:10px 20px;border-radius:999px;text-decoration:none;font-weight:700;font-size:16px;color:#e2d3b6;border:1px solid #6b5436;background:linear-gradient(180deg,rgba(58,42,26,0.85),rgba(18,12,8,0.9));transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,color .25s,box-shadow .25s}
.tab-pill:hover{transform:translateY(-2px);border-color:#f0c56a;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,0.5)}
.tab-on{background:linear-gradient(180deg,#fbe3a0 0%,#e8b24a 45%,#c07e22 100%);color:#2a1606;border-color:#fbe7b0}
.tab-on:hover{color:#2a1606}
.page-hero{background-color:#120d09;background-size:cover;background-position:center 40%}
.ph-traps{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/maze-corridor.jpg)}
.ph-chars{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.3) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/hero.jpg)}
.ph-zones{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/maze-chamber.jpg)}

.panel-img{box-shadow:0 10px 26px rgba(0,0,0,0.5);transition:box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.lift-soft:hover .panel-img{box-shadow:0 16px 40px rgba(0,0,0,0.6),0 0 0 2px rgba(232,178,74,0.55);transform:rotate(-1deg)}
@keyframes chaserBreath{0%,100%{filter:brightness(1.7) contrast(1.15)}50%{filter:brightness(2.1) contrast(1.2)}}
.chaser-img{animation:chaserBreath 4s ease-in-out infinite;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lift:hover .chaser-img{transform:scale(1.06)}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:700;border-radius:8px;cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,filter .28s,border-color .28s,color .28s}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,0.45),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .65s ease;pointer-events:none}
.btn:hover::after{left:135%}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(0.96);transition-duration:.08s}
.btn:focus-visible{outline:2px solid #f7d98a;outline-offset:3px}
.btn-gold{background:linear-gradient(180deg,#fbe3a0 0%,#e8b24a 42%,#c07e22 78%,#9a5f16 100%);color:#2a1606;border:1px solid #fbe7b0;box-shadow:0 6px 20px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.65),inset 0 -3px 0 rgba(90,50,10,0.45);text-shadow:0 1px 0 rgba(255,240,200,0.55)}
.btn-gold:hover{color:#fff;text-shadow:0 1px 2px rgba(60,30,5,0.9),0 0 10px rgba(90,45,5,0.6);filter:brightness(1.08) saturate(1.1);box-shadow:0 12px 34px rgba(232,178,74,0.55),0 6px 20px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.75),inset 0 -3px 0 rgba(90,50,10,0.45)}
.btn-ghost{background:linear-gradient(180deg,rgba(70,50,30,0.9) 0%,rgba(30,21,14,0.92) 55%,rgba(14,9,6,0.95) 100%);color:#f4e8d2;border:1px solid #a07c47;box-shadow:0 6px 20px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,230,180,0.18)}
.btn-ghost:hover{color:#fff;border-color:#f0c56a;box-shadow:0 12px 30px rgba(240,197,106,0.28),0 6px 20px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,230,180,0.25)}
.nav-link{position:relative;color:#d8c7a8;text-decoration:none;transition:color .25s}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(232,178,74,0),#e8b24a,rgba(232,178,74,0));transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav-link:hover{color:#fbe3a0}
.nav-link:hover::after{transform:scaleX(1)}
.nav-icon{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
a:hover .nav-icon{transform:rotate(-6deg) scale(1.08);filter:drop-shadow(0 0 10px rgba(232,178,74,0.6))}
.char-btn{background-image:linear-gradient(180deg,rgba(255,235,190,0.06),rgba(0,0,0,0.25));transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s,filter .25s}
.char-btn:hover{transform:translateY(-4px);filter:brightness(1.12);box-shadow:0 12px 26px rgba(0,0,0,0.55)}
.char-btn:active{transform:translateY(0) scale(0.96);transition-duration:.08s}
.lift{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.lift:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,0.6);border-color:#a07c47 !important}
.lift-soft{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lift-soft:hover{transform:translateY(-6px)}
.chain-node{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.chain-node:hover{transform:translateY(-6px) scale(1.06)}
@keyframes steUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes steLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes steRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes arrowNudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(6px);opacity:1}}
.chain-arrow{margin-top:0;animation:arrowNudge 1.6s ease-in-out infinite}
.hero-in{opacity:0;animation:steUp .9s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
@media (prefers-reduced-motion: reduce){.hero-in,.reveal,.reveal-l,.reveal-r,.chain-arrow{animation:none;opacity:1;transform:none}}

.ste-hero{background-color:#120d09;background-image:linear-gradient(180deg,rgba(13,9,6,0.55) 0%,rgba(13,9,6,0) 16%,rgba(13,9,6,0) 40%,rgba(18,13,9,0.82) 72%,#120d09 100%),url(../img/hero.jpg);background-size:cover;background-position:center 25%}
.ste-shot{background-color:#1f1812;background-size:cover;background-position:center;transition:transform .3s}
.ste-maze1{background-image:linear-gradient(180deg,rgba(12,8,5,0) 40%,rgba(12,8,5,0.9) 100%),url(../img/maze-corridor.jpg)}
.ste-maze2{background-image:linear-gradient(180deg,rgba(12,8,5,0) 40%,rgba(12,8,5,0.9) 100%),url(../img/maze-chamber.jpg)}
.ste-bridge{background-image:linear-gradient(180deg,rgba(12,8,5,0) 40%,rgba(12,8,5,0.9) 100%),url(../img/overworld-river.jpg)}
.ste-camp{background-image:linear-gradient(180deg,rgba(12,8,5,0) 40%,rgba(12,8,5,0.9) 100%),url(../img/overworld-campfire.jpg)}
.ste-footer{background-color:#0d0906;background-image:linear-gradient(180deg,#120d09 0%,rgba(13,9,6,0.55) 30%,rgba(13,9,6,0.7) 65%,#0d0906 100%),url(../img/maze-corridor.jpg);background-size:cover;background-position:center 40%}
.ste-chamber{background-color:#120d09;background-image:linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 16%,rgba(18,13,9,0) 68%,rgba(18,13,9,0.85) 90%,#17110c 100%),linear-gradient(90deg,rgba(12,8,5,0.94) 0%,rgba(12,8,5,0.72) 34%,rgba(12,8,5,0) 60%),url(../img/seven-shapes-chamber.jpg);background-size:cover;background-position:center}

/* ---------- scroll reveal (IntersectionObserver) ---------- */
.js .reveal,.js .reveal-l,.js .reveal-r{opacity:0;transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal{transform:translateY(40px)}
.js .reveal-l{transform:translateX(-60px)}
.js .reveal-r{transform:translateX(60px)}
.js .reveal.in,.js .reveal-l.in,.js .reveal-r.in{opacity:1;transform:none}
:focus-visible{outline:2px solid #f7d98a;outline-offset:3px}
img{max-width:100%}
/* ---------- mobile nav ---------- */
.nav-toggle{display:none;background:none;border:1px solid #6b5436;border-radius:8px;width:46px;height:46px;align-items:center;justify-content:center;color:#f4e8d2;cursor:pointer}
@media (max-width: 1080px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch !important;gap:0 !important;padding:12px 20px 20px;background:rgba(13,9,6,0.97);border-bottom:1px solid #3a2c1f;display:none !important}
  .nav-open .nav-links{display:flex !important}
  .nav-links > a,.nav-links .dd-btn{padding:14px 4px;border-bottom:1px solid #2a2017}
  .nav-links .nav-link::after{display:none}
  .nav-links .btn{margin-top:14px}
  .dd{flex-direction:column;align-items:stretch}
  .dd-btn{justify-content:space-between;width:100%}
  .dd-menu{position:static;transform:none;opacity:1;visibility:visible;padding-top:4px;display:none}
  .dd.open .dd-menu{display:block}
  .dd-panel{width:auto;box-shadow:none}
}
/* ---------- responsive ---------- */
@media (max-width: 1080px){
  [style*="grid-template-columns: repeat(4"],[style*="grid-template-columns: repeat(5"],[style*="grid-template-columns: repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [style*="grid-template-columns: repeat(12"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [style*="grid-column: span"]{grid-column:auto !important}
  [style*="grid-row: span 2"]{grid-row:auto !important;grid-column:1 / -1 !important}
  .char-layout{grid-template-columns:1fr !important}
  .char-layout > div:last-child{position:static !important}
  .chain{flex-wrap:wrap;justify-content:center !important;row-gap:20px}
  .world-head{flex-direction:column;align-items:flex-start !important}
}
@media (max-width: 720px){
  section > div,footer > div,nav{padding-left:20px !important;padding-right:20px !important}
  section > div{padding-top:64px !important;padding-bottom:64px !important}
  #top > div{padding-bottom:40px !important}
  [style*="grid-template-columns: repeat(2"],[style*="grid-template-columns: repeat(4"],[style*="grid-template-columns: repeat(5"],[style*="grid-template-columns: repeat(3"],[style*="grid-template-columns: repeat(12"]{grid-template-columns:1fr !important}
  .char-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .stats > div{border-right:0 !important}
  h1 img{width:92% !important}
  h1{font-size:44px !important}
  h2{font-size:32px !important;line-height:1.15 !important}
  h3{font-size:28px !important}
  .hero-btns{flex-direction:column;width:100%}
  .hero-btns .btn{width:100%;box-sizing:border-box}
  #top{min-height:720px !important}
  .chain-arrow{display:none}
  .chain-node{min-width:88px !important}
  .ste-shot{height:300px !important}
  .stage-wrap{height:600px}
  .stage-card{width:290px;height:560px;margin-left:-145px;padding:12px}
  .stage-nav{top:auto !important;bottom:-8px;margin-top:0 !important}
  .stage-nav[aria-label="Previous stage"]{left:calc(50% - 70px) !important}
  .stage-nav[aria-label="Next stage"]{right:calc(50% - 70px) !important}
  .footer-bar{flex-direction:column;gap:16px;text-align:center}
  .brand-text{font-size:16px !important;letter-spacing:2px !important}
  .page-hero{min-height:420px !important}
}
@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .reveal-l,.js .reveal-r{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
section[id]{scroll-margin-top:76px}
@media (max-width: 720px){
  #top > div{padding-top:120px !important}
  #top p{font-size:18px !important}
  .ste-chamber{background-image:linear-gradient(180deg,rgba(12,8,5,0.82),rgba(12,8,5,0.7) 60%,rgba(12,8,5,0.9)),url(../img/seven-shapes-chamber.jpg) !important}
  .stage-wrap{height:690px !important}
  .stage-nav{bottom:0 !important}
}
@media (max-width: 720px){
  .ste-hero{background-image:linear-gradient(180deg,rgba(13,9,6,0.55) 0%,rgba(13,9,6,0.35) 25%,rgba(13,9,6,0.55) 50%,rgba(18,13,9,0.9) 78%,#120d09 100%),url(../img/hero.jpg) !important;background-position:center top !important}
}
/* ---------- global scale: everything at 90% on tablet/desktop ---------- */
@media (min-width: 721px){
  .site{zoom:0.9}
}
/* hero eyebrow without background */
@media (max-width: 720px){
  #top .hero-eyebrow{white-space:normal !important;text-align:center;justify-content:center;font-size:11px !important;letter-spacing:2.5px !important;padding:0 !important;gap:10px !important}
}
@media (max-width: 380px){
  #top .hero-eyebrow span{display:none}
}
#top > div{padding-top:130px !important}
@media (min-width: 721px) and (max-width: 1080px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
/* ---------- content width: 95% of the screen on tablet/desktop ---------- */
@media (min-width: 721px){
  nav,
  section > div,
  footer > div{max-width:95% !important;width:95% !important;box-sizing:border-box}
  .stage-wrap{max-width:none !important;width:auto !important}
}
/* ---------- hero image starts below the navbar (not under it) ---------- */
#top,.page-hero{margin-top:0 !important}
#top{background-position:center top !important}
#top > div{padding-top:56px !important}
.page-hero > div{padding-top:72px !important}

/* ---------- dark gradient button (Open Codex) ---------- */
.btn-dark{background:linear-gradient(180deg,#3a322b 0%,#1a1511 50%,#070504 100%);color:#fff;border:1px solid #5a4a3a;box-shadow:0 6px 20px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.14)}
.btn-dark:hover{color:#fff;border-color:#a07c47;box-shadow:0 12px 30px rgba(0,0,0,0.65),0 0 0 1px rgba(232,178,74,0.25),inset 0 1px 0 rgba(255,255,255,0.2)}
/* ---------- gradient border (light brown -> dark brown) ---------- */
.ste-shot,.gborder{position:relative;border:0 !important}
.ste-shot::before,.gborder::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(160deg,#e6c08a 0%,#b0834f 30%,#5c3f24 65%,#1e140b 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;z-index:3;transition:filter .35s}
.ste-shot:hover::before,.gborder:hover::before{filter:brightness(1.35) saturate(1.15)}
/* ---------- codex overview ---------- */
.codex-img{background-size:cover;background-position:center}
.ci-traps{background-image:linear-gradient(180deg,rgba(12,8,5,0.1) 30%,rgba(12,8,5,0.85) 100%),url(../img/maze-corridor.jpg)}
.ci-chars{background-image:linear-gradient(180deg,rgba(12,8,5,0.1) 30%,rgba(12,8,5,0.85) 100%),url(../img/hero.jpg);background-position:center 20%}
.ci-zones{background-image:linear-gradient(180deg,rgba(12,8,5,0.1) 30%,rgba(12,8,5,0.85) 100%),url(../img/maze-chamber.jpg)}
.codex-card .codex-cta svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.codex-card:hover .codex-cta{color:#fbe3a0}
.codex-card:hover .codex-cta svg{transform:translateX(5px)}
@media (max-width: 720px){
  .shape-btns{flex-direction:column}
  .shape-btns .btn{width:100%;box-sizing:border-box}
  .codex-img{height:160px !important}
}

/* ---------- NPCs page + traps feature ---------- */
.ph-npcs{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/lobby-spawn.jpg)}
.ci-npcs{background-image:linear-gradient(180deg,rgba(12,8,5,0.1) 30%,rgba(12,8,5,0.85) 100%),url(../img/lobby-spawn.jpg)}
@media (max-width: 1080px){
  .chaser-feature{grid-template-columns:1fr !important}
  .npc-feature{grid-template-columns:1fr !important;text-align:center;padding:32px 24px !important}
  .npc-feature > div:last-child > div:first-child{align-self:center !important}
}
@media (max-width: 720px){
  .npc-feature span[style*="190px"]{width:130px !important;height:130px !important;font-size:60px !important}
}

/* ---------- preview slots (drop images into assets/img/<folder>/<slug>.jpg) ---------- */
.pv{position:relative;overflow:hidden;box-sizing:border-box;background:#15100b repeating-linear-gradient(135deg,rgba(255,235,190,0.035) 0 10px,rgba(0,0,0,0) 10px 20px);border-bottom:1px solid #3a2c1f;display:flex;align-items:center;justify-content:center}
.pv-ph{display:flex;flex-direction:column;align-items:center;gap:6px;color:#6f5c44;font-size:12px;letter-spacing:3px;font-weight:700;text-transform:uppercase}
.pv-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lift:hover .pv-img{transform:scale(1.06)}

/* ---------- codex tabs on home ---------- */
button.tab-pill{font-family:inherit;cursor:pointer}
.codex-panel{display:flex;flex-direction:column;gap:20px;animation:panelIn .45s cubic-bezier(.2,.8,.2,1)}
.codex-panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width: 1080px){
  .codex-panel > div:first-child{grid-template-columns:1fr !important}
}
@media (max-width: 720px){
  .codex-panel [style*="repeat(4"],.codex-panel [style*="repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* ---------- trailer ---------- */
.trailer-frame{position:relative}
@media (max-width: 1080px){
  .trailer-grid{grid-template-columns:1fr !important;gap:28px !important}
}

/* ---------- typed build status ---------- */
.live-dot{width:9px;height:9px;border-radius:50%;background:#7bdc4a;box-shadow:0 0 0 0 rgba(123,220,74,0.6);animation:livePulse 1.8s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(123,220,74,0.6)}80%,100%{box-shadow:0 0 0 9px rgba(123,220,74,0)}}
.type-caret{display:inline-block;width:9px;height:1.1em;margin-left:3px;vertical-align:-2px;background:#f7d98a;animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
@media (max-width: 720px){.typeline{font-size:13px !important;gap:8px !important}}
@media (prefers-reduced-motion: reduce){.live-dot,.type-caret{animation:none}}

/* ---------- gold gradient text (hero eyebrow) ---------- */
.gold-text{background:linear-gradient(180deg,#fff6cf 0%,#ffd866 40%,#ffb12e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0.5px rgba(40,18,0,0.9);text-shadow:none;filter:drop-shadow(0 0 1.5px #000) drop-shadow(0 0 4px #000) drop-shadow(0 0 12px rgba(0,0,0,0.95)) drop-shadow(0 0 22px rgba(0,0,0,0.8))}

/* ---------- seamless hero -> trailer (maze) blend ---------- */
.hero-trail-wrap{position:relative;background-color:#140e09;background-image:linear-gradient(180deg,rgba(20,14,9,0.35) 0%,rgba(20,14,9,0.55) 40%,rgba(18,13,9,0.7) 75%,#120d09 100%),url(../img/maze-corridor.jpg);background-size:cover;background-position:center 30%}
#top{background:none !important;position:relative}
#top::before{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(13,9,6,0.5) 0%,rgba(13,9,6,0) 14%,rgba(13,9,6,0) 55%,rgba(18,13,9,0.35) 100%),url(../img/hero.jpg);background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0) 100%);pointer-events:none}
#top > div{position:relative;z-index:1}
#trailer{background:none !important}
@media (max-width: 720px){
  #top::before{background-image:linear-gradient(180deg,rgba(13,9,6,0.55) 0%,rgba(13,9,6,0.35) 25%,rgba(13,9,6,0.55) 60%,rgba(18,13,9,0.4) 100%),url(../img/hero.jpg)}
}
/* ---------- no divider lines between sections ---------- */
section,.page-hero{border-bottom:0 !important;border-top:0 !important}
section[style*="background: #17110c"]{background:linear-gradient(180deg,#120d09 0%,#17110c 18%,#17110c 82%,#120d09 100%) !important}

/* ---------- trailer -> seven shapes: tighter, blended ---------- */
.hero-trail-wrap{background-image:linear-gradient(180deg,rgba(20,14,9,0.35) 0%,rgba(20,14,9,0.55) 40%,rgba(18,13,9,0.66) 80%,rgba(18,13,9,0.8) 100%),url(../img/maze-corridor.jpg) !important}
.ste-chamber{background-image:linear-gradient(180deg,rgba(18,13,9,0.8) 0%,rgba(18,13,9,0.35) 9%,rgba(18,13,9,0) 20%,rgba(18,13,9,0) 68%,rgba(18,13,9,0.85) 90%,#17110c 100%),linear-gradient(90deg,rgba(12,8,5,0.94) 0%,rgba(12,8,5,0.72) 34%,rgba(12,8,5,0) 60%),url(../img/seven-shapes-chamber.jpg) !important}
.hero-trail-wrap::after{content:"";position:absolute;left:0;right:0;bottom:-70px;height:140px;background:linear-gradient(180deg,rgba(18,13,9,0) 0%,rgba(18,13,9,0.55) 50%,rgba(18,13,9,0) 100%);pointer-events:none;z-index:2}
@media (max-width: 720px){
  .ste-chamber{background-image:linear-gradient(180deg,rgba(12,8,5,0.8),rgba(12,8,5,0.7) 60%,rgba(12,8,5,0.9)),url(../img/seven-shapes-chamber.jpg) !important}
  #trailer > div{padding-bottom:40px !important}
  #shapes > div{padding-top:48px !important}
}

/* ---------- Explore section: STE key art background ---------- */
.ste-explore-bg{background-color:#120d09;background-image:linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0.45) 16%,rgba(18,13,9,0.3) 50%,rgba(18,13,9,0.55) 82%,#120d09 100%),url(../img/lobby-matchmaking.jpg);background-size:cover;background-position:center 45%;background-repeat:no-repeat}

/* ---------- Explore section: spawn area background ---------- */
.ste-world-bg{background-color:#120d09;background-image:linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0.55) 12%,rgba(18,13,9,0.6) 50%,rgba(18,13,9,0.75) 85%,#120d09 100%),url(../img/lobby-spawn.jpg);background-size:cover;background-position:center;background-repeat:no-repeat}
/* ---------- seven shapes -> explore: seamless seam ---------- */
.ste-chamber{position:relative;background-image:linear-gradient(180deg,rgba(18,13,9,0.8) 0%,rgba(18,13,9,0.35) 9%,rgba(18,13,9,0) 20%,rgba(18,13,9,0) 70%,rgba(18,13,9,0.55) 88%,rgba(18,13,9,0.78) 100%),linear-gradient(90deg,rgba(12,8,5,0.94) 0%,rgba(12,8,5,0.72) 34%,rgba(12,8,5,0) 60%),url(../img/seven-shapes-chamber.jpg) !important}
.ste-world-bg{background-image:linear-gradient(180deg,rgba(18,13,9,0.78) 0%,rgba(18,13,9,0.6) 8%,rgba(18,13,9,0.58) 50%,rgba(18,13,9,0.75) 85%,#120d09 100%),url(../img/lobby-spawn.jpg) !important}
.ste-chamber::after{content:"";position:absolute;left:0;right:0;bottom:-90px;height:180px;background:linear-gradient(180deg,rgba(18,13,9,0) 0%,rgba(18,13,9,0.6) 50%,rgba(18,13,9,0) 100%);pointer-events:none;z-index:2}
@media (max-width: 720px){
  .ste-chamber{background-image:linear-gradient(180deg,rgba(12,8,5,0.8),rgba(12,8,5,0.7) 60%,rgba(12,8,5,0.82)),url(../img/seven-shapes-chamber.jpg) !important}
}

/* ---------- explore -> stages: tighter seam ---------- */
.ste-world-bg{background-image:linear-gradient(180deg,rgba(18,13,9,0.78) 0%,rgba(18,13,9,0.6) 8%,rgba(18,13,9,0.58) 50%,rgba(18,13,9,0.72) 88%,rgba(18,13,9,0.82) 100%),url(../img/lobby-spawn.jpg) !important}
#stages-section.ste-explore-bg{background-image:linear-gradient(180deg,rgba(18,13,9,0.82) 0%,rgba(18,13,9,0.45) 14%,rgba(18,13,9,0.3) 50%,rgba(18,13,9,0.55) 82%,#120d09 100%),url(../img/lobby-matchmaking.jpg) !important}
@media (max-width: 720px){ #world > div{padding-bottom:28px !important} #stages-section > div{padding-top:24px !important} }

.ste-world-bg{position:relative}
.ste-world-bg::after{content:"";position:absolute;left:0;right:0;bottom:-110px;height:220px;background:linear-gradient(180deg,rgba(18,13,9,0) 0%,rgba(18,13,9,0.55) 35%,rgba(18,13,9,0.62) 50%,rgba(18,13,9,0.55) 65%,rgba(18,13,9,0) 100%);pointer-events:none;z-index:2}
#stages-section > div{position:relative;z-index:3}

/* ---------- items ---------- */
.ph-items{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/maze-chamber.jpg)}
@media (max-width: 1080px){ .item-feature{grid-template-columns:1fr !important} .item-feature .pv{border-right:0 !important;border-bottom:1px solid #3a2c1f !important} }

.ph-skins{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.3) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/hero.jpg)}
.ph-bundles{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/lobby-spawn.jpg)}
.codex-tabs{row-gap:10px}

.ph-crates{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/lobby-spawn.jpg)}
@media (max-width: 1080px){ #crate-list [style*="repeat(5"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
@media (max-width: 720px){ #crate-list [style*="repeat(5"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
.codex-panel[data-panel="crates"] [style*="repeat(2"] .pv{aspect-ratio:16 / 9 !important}

/* ---------- rarity styling (mirrors in-game RarityPalette + TitleStyler) ---------- */
.rchip{display:inline-block;letter-spacing:2px;font-weight:700;border-radius:999px;padding:4px 10px;border:1px solid;line-height:1.2}
.rtext{display:inline-block}
.r-common{border-color:#aaaaaa}.r-common .rtext{color:#aaaaaa}
.r-uncommon{border-color:#50c878}.r-uncommon .rtext{color:#50c878}
.r-rare{border-color:#5096e1}
.r-rare .rtext{background:linear-gradient(90deg,#3c82dc 0%,#82c8ff 50%,#3c82dc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.r-epic{border-color:#aa5ae6}
.r-epic .rtext{background:linear-gradient(90deg,#8c46dc 0%,#dc8cff 50%,#8c46dc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* animated sweep: rest colour with a 30% highlight band travelling left -> right */
.r-legendary,.r-mythic{position:relative}
.r-legendary{border-color:#b48228;animation:strokeLeg 5s linear infinite}
.r-mythic{border-color:#b41e3c;animation:strokeMyth 3s linear infinite}
.r-legendary .rtext{background:linear-gradient(90deg,#ffd764 0%,#ffd764 35%,#ffe68c 39%,#fff5be 43%,#fffce6 47%,#ffffff 50%,#fffce6 53%,#fff5be 57%,#ffe68c 61%,#ffd764 65%,#ffd764 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sweepLeg 5s linear infinite}
.r-mythic .rtext{background:linear-gradient(90deg,#ff466e 0%,#ff466e 35%,#ff82a0 39%,#ffb4c8 43%,#ffe1eb 47%,#ffffff 50%,#ffe1eb 53%,#ffb4c8 57%,#ff82a0 61%,#ff466e 65%,#ff466e 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sweepMyth 3s linear infinite}
/* Legendary: sweep takes 3s, then rests 2s (period 5s). Mythic: continuous 3s shimmer */
@keyframes sweepLeg{0%{background-position:100% 0}60%{background-position:0% 0}60.01%,100%{background-position:100% 0}}
@keyframes sweepMyth{0%{background-position:100% 0}100%{background-position:0% 0}}
@keyframes strokeLeg{0%,60%,100%{border-color:#b48228;box-shadow:none}30%{border-color:#ffdc64;box-shadow:0 0 8px rgba(255,220,100,0.55)}}
@keyframes strokeMyth{0%,100%{border-color:#b41e3c;box-shadow:none}50%{border-color:#ff6482;box-shadow:0 0 10px rgba(255,100,130,0.6)}}
@media (prefers-reduced-motion: reduce){.r-legendary,.r-mythic,.r-legendary .rtext,.r-mythic .rtext{animation:none}}

/* ---------- rarity labels: in-game look (Fondamento, no border, UIStroke-like glow) ---------- */
.rchip{border:0 !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;animation:none !important;background:none !important;font-family:'Fondamento',Georgia,serif !important;font-weight:700;letter-spacing:1.5px;font-size:15px !important;line-height:1.1}
.r-legendary .rtext{animation:sweepLegG 5s linear infinite}
.r-mythic .rtext{animation:sweepMythG 3s linear infinite}
@keyframes sweepLegG{0%{background-position:100% 0;filter:drop-shadow(0 0 0 rgba(180,130,40,0.3))}30%{filter:drop-shadow(0 0 2px rgba(255,220,100,0.95)) drop-shadow(0 0 5px rgba(255,220,100,0.5))}60%{background-position:0% 0;filter:drop-shadow(0 0 0 rgba(180,130,40,0.3))}60.01%,100%{background-position:100% 0;filter:drop-shadow(0 0 0 rgba(180,130,40,0.3))}}
@keyframes sweepMythG{0%{background-position:100% 0;filter:drop-shadow(0 0 1px rgba(180,30,60,0.6))}50%{filter:drop-shadow(0 0 2.5px rgba(255,100,130,1)) drop-shadow(0 0 6px rgba(255,100,130,0.55))}100%{background-position:0% 0;filter:drop-shadow(0 0 1px rgba(180,30,60,0.6))}}
@media (prefers-reduced-motion: reduce){.r-legendary .rtext,.r-mythic .rtext{animation:none}}

/* ---------- shop ---------- */
.ste-shop-bg{background:linear-gradient(180deg,#120d09 0%,#17110c 20%,#17110c 80%,#120d09 100%)}
.shop-price{display:inline-flex;align-items:center;gap:6px;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:20px;color:#7bdc4a}
.shop-price .rbx{font-family:'Alegreya Sans',sans-serif;font-size:13px;font-weight:700;color:#0f2a08;background:linear-gradient(180deg,#9ff07a,#4fae2a);border-radius:5px;padding:2px 6px}
@media (max-width: 1080px){ #shop [style*="repeat(5"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
@media (max-width: 720px){ #shop [style*="repeat(4"],#shop [style*="repeat(5"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important} #shop [style*="repeat(2"]{grid-template-columns:1fr !important} }

/* ---------- in-game Robux Shop replica ---------- */
.gs-window{position:relative;border-radius:6px;padding:10px;background:#1c160f;border:2px solid #8a7650;box-shadow:0 0 0 1px #2a2014,0 0 0 4px #5e4f35,0 0 0 5px #1a130c,0 30px 70px rgba(0,0,0,0.7)}
.gs-window::before{content:"";position:absolute;inset:6px;border:1px solid rgba(190,165,115,0.45);border-radius:3px;pointer-events:none}
.gs-head{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 6px;background:linear-gradient(180deg,#2e2517,#241c12);border-bottom:1px solid #4a3d29}
.gs-heading{font-family:'Fondamento',Georgia,serif;font-size:44px;letter-spacing:2px;color:#c9b894;text-shadow:0 2px 0 #120d08}
.gs-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-family:'Fondamento',Georgia,serif;font-size:30px;color:#d6c6a4;background:linear-gradient(180deg,#6e1e1e,#4a1212);border:2px solid #8a7650;box-shadow:inset 0 0 0 1px #2a0c0c}
.gs-scroll{max-height:820px;overflow-y:auto;padding:22px 20px 26px;background:#2b2216 radial-gradient(circle at 20% 30%,rgba(255,235,190,0.04),rgba(0,0,0,0) 40%) ,repeating-linear-gradient(45deg,rgba(0,0,0,0.05) 0 2px,rgba(0,0,0,0) 2px 7px);scrollbar-color:#8a7650 #1c160f;scrollbar-width:thin}
.gs-scroll::-webkit-scrollbar{width:10px}.gs-scroll::-webkit-scrollbar-track{background:#1c160f}.gs-scroll::-webkit-scrollbar-thumb{background:#8a7650;border-radius:4px}
.gs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px;grid-auto-flow:dense}
.gs-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#43351f 0%,#3a2e1c 55%,#33281a 100%);border:2px solid #a5916c;box-shadow:inset 0 0 0 3px #3a2e1c,inset 0 0 0 4px rgba(165,145,108,0.35),0 6px 16px rgba(0,0,0,0.45);min-height:250px;padding:0 0 28px}
.gs-wide{grid-column:span 2}
.gs-tall{grid-row:span 2}
.gs-title{margin:10px 8px 0;padding:6px 10px 8px;text-align:center;font-family:'Fondamento',Georgia,serif;font-size:21px;color:#e3d7bd;background:linear-gradient(180deg,rgba(0,0,0,0.22),rgba(0,0,0,0.08));border-bottom:1px solid rgba(0,0,0,0.35);box-shadow:0 1px 0 rgba(255,235,190,0.08)}
.gs-body{flex-grow:1;display:flex;align-items:center;justify-content:center;padding:12px 14px 8px}
.gs-img{position:relative;width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.gs-img-tall{aspect-ratio:auto;height:100%;min-height:420px}
.gs-img-skin{aspect-ratio:3/4}
.gs-ph{color:rgba(227,215,189,0.25)}
.gs-contain{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gs-card:hover .gs-contain{transform:scale(1.05)}
.gs-price{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);min-width:44%;padding:6px 22px;text-align:center;text-decoration:none;font-family:'Fondamento',Georgia,serif;font-size:22px;color:#e6dcc4;white-space:nowrap;background:linear-gradient(180deg,#2a7447 0%,#1d5a33 45%,#15452a 100%);border:2px solid #b9a37a;box-shadow:0 0 0 1px #1a130c,inset 0 0 0 1px rgba(0,0,0,0.5),0 4px 10px rgba(0,0,0,0.5);transition:filter .2s,transform .2s}
.gs-price::before,.gs-price::after{content:"";position:absolute;top:50%;width:6px;height:10px;margin-top:-5px;background:#b9a37a}
.gs-price::before{left:-8px}.gs-price::after{right:-8px}
.gs-price:hover{filter:brightness(1.18);color:#fff;transform:translateX(-50%) translateY(-2px)}
.gs-strike{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:'Fondamento',Georgia,serif;font-size:20px;color:#e3d7bd;text-decoration:line-through;text-decoration-color:#d0302e;text-decoration-thickness:2px;text-shadow:0 1px 3px #000;z-index:2}
.gs-badge{position:absolute;z-index:3;font-family:'Fondamento',Georgia,serif;font-size:16px;letter-spacing:1px;color:#f1d58a;padding:3px 18px;background:linear-gradient(180deg,#a3262a,#7a1417);border:2px solid #c9a24f;box-shadow:0 0 0 1px #3a0a0a,0 3px 8px rgba(0,0,0,0.5);transform:rotate(6deg)}
.gs-badge::before,.gs-badge::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2px;background:#e3c173}
.gs-badge::before{left:6px}.gs-badge::after{right:6px}
.gs-badge-right{top:-14px;right:-10px}
.gs-badge-edge{top:-16px;right:-60px;transform:rotate(4deg)}
.gs-ribbon{position:absolute;top:0;left:0;width:110px;height:110px;overflow:hidden;z-index:2;pointer-events:none}
.gs-ribbon span{position:absolute;top:26px;left:-34px;width:150px;padding:6px 0;text-align:center;transform:rotate(-45deg);font-family:'Fondamento',Georgia,serif;font-size:19px;color:#f0d9b0;background:linear-gradient(180deg,#a3262a,#7a1417);box-shadow:0 3px 8px rgba(0,0,0,0.5)}
.gs-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;padding:0 28px;box-sizing:border-box}
.gs-tile{display:flex;flex-direction:column;align-items:center;gap:8px}
.gs-tile-img{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:2px solid #a5916c;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,225,150,0.10) 0deg 10deg,rgba(0,0,0,0) 10deg 20deg),radial-gradient(circle,#6a5433 0%,#3f3120 75%)}
.gs-tile-name{font-family:'Fondamento',Georgia,serif;font-size:15px;color:#e3d7bd;text-align:center}
.gs-titletext{font-family:'Montserrat','Alegreya Sans',sans-serif;font-weight:800;font-size:26px}
.gs-og{color:#e0365a;text-shadow:0 0 8px rgba(224,54,90,0.55),0 0 2px #5a0c1a}
.gs-beta{color:#d7a843;text-shadow:0 0 6px rgba(0,0,0,0.6)}
.gs-passcard{min-height:230px}
.gs-pass{display:flex;align-items:center;gap:24px;width:100%}
.gs-pass-img{position:relative;flex-shrink:0;width:150px;aspect-ratio:1/1;border:2px solid #a5916c;display:flex;align-items:center;justify-content:center;background:#3f3120}
.gs-pass-text{flex-grow:1;text-align:right;font-family:'Fondamento',Georgia,serif;font-size:23px;line-height:1.5;color:#e3d7bd}
.gs-side{display:flex;flex-direction:column;gap:34px}
.gs-mini{min-height:0;flex:1}
.gs-daily{display:flex;flex-direction:column;align-items:center;gap:6px;width:60%}
.gs-daily-name{font-family:'Fondamento',Georgia,serif;font-size:24px;color:#e3d7bd}
.gs-code{font-family:'Fondamento',Georgia,serif;font-size:40px;color:rgba(227,215,189,0.45)}
.gs-skin{min-height:520px}
@media (max-width: 1080px){
  .gs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-tall{grid-row:auto}
  .gs-img-tall{min-height:320px}
  .gs-heading{font-size:34px}
}
@media (max-width: 720px){
  .gs-scroll{max-height:none;padding:18px 12px 24px}
  .gs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}
  .gs-tiles{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 6px}
  .gs-pass{flex-direction:column;gap:12px}.gs-pass-text{text-align:center;font-size:17px}
  .gs-title{font-size:16px}.gs-price{font-size:18px;padding:5px 12px}
  .gs-badge-edge{right:10px}
  .gs-skin{min-height:0}
  .gs-heading{font-size:28px}
}
.gs-daily{width:auto}.gs-daily .gs-tile-img{width:120px}
.gs-mini .gs-body{padding:10px 14px 14px}

.npc-av{background-size:cover;background-position:center;background-color:#120d09}
/* ---------- NPC card names: never overflow the card ---------- */
#npc-list .npc-av,#npc-list span[style*="width: 60px"]{width:clamp(42px,3.6vw,60px) !important;height:clamp(42px,3.6vw,60px) !important}
#npc-list div[style*="gap: 2px"]{min-width:0;flex:1}
#npc-list div[style*="font-size: 23px"]{font-size:clamp(17px,1.4vw,23px) !important;line-height:1.15;overflow-wrap:break-word;hyphens:auto}
#npc-list div[style*="gap: 16px"]{gap:12px !important}
@media (max-width: 1080px){ #npc-list div[style*="font-size: 23px"]{font-size:21px !important} #npc-list .npc-av,#npc-list span[style*="width: 60px"]{width:52px !important;height:52px !important} }
/* ---------- all Codex page banners use the NPCs banner image ---------- */
.ph-traps,.ph-chars,.ph-npcs,.ph-items,.ph-skins,.ph-crates{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/lobby-spawn.jpg) !important}

/* ---------- spinning 3D model previews ---------- */
.pv-model{position:absolute;inset:0;width:100%;height:100%;background:transparent;--poster-color:transparent;--progress-bar-color:rgba(232,178,74,0.6)}
.pv-3d{background:radial-gradient(circle at 50% 45%,#3a2c1f 0%,#1a130c 75%) !important}
.pv-3d .pv-ph{opacity:0.35}

/* ---------- skill stats (characters) ---------- */
.skill-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 10px;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(165,145,108,0.3)}
.skill-stat{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:6px;background:rgba(0,0,0,0.22);border:1px solid rgba(165,145,108,0.18)}
.ss-l{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#9c8a6e;font-weight:700}
.ss-v{font-family:Cinzel,Georgia,serif;font-size:16px;font-weight:700}

/* ---------- agent-select roster (Valorant-style) ---------- */
.ag-section{background:linear-gradient(180deg,#120d09 0%,#17110c 15%,#17110c 85%,#120d09 100%)}
.ag-wrap{max-width:1200px;margin:0 auto;padding:96px 32px;display:flex;flex-direction:column;gap:28px}
.ag-filters{display:flex;gap:10px;flex-wrap:wrap}
.ag-filter{font-family:inherit;cursor:pointer;padding:9px 18px;border-radius:999px;border:1px solid #6b5436;background:linear-gradient(180deg,rgba(58,42,26,0.85),rgba(18,12,8,0.9));color:#e2d3b6;font-weight:700;font-size:15px;letter-spacing:1px;transition:all .25s}
.ag-filter:hover{border-color:#f0c56a;color:#fff}
.ag-filter.on{background:linear-gradient(180deg,#fbe3a0 0%,#e8b24a 45%,#c07e22 100%);color:#2a1606;border-color:#fbe7b0}
.ag-stage{--c:#3fc7a8;position:relative;display:grid;grid-template-columns:220px minmax(0,1.05fr) minmax(0,1fr);gap:28px;min-height:720px;padding:28px;border-radius:16px;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 45% 55%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%),linear-gradient(160deg,#241a12,#110c08);border:1px solid #3a2c1f;transition:background .6s}
.ag-list{display:flex;flex-direction:column;gap:2px;max-height:664px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#6b5436 transparent}
.ag-name{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:9px 14px 9px 18px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;border-radius:6px;transition:background .25s}
.ag-name::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--c);transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ag-name-t{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:22px;letter-spacing:2px;text-transform:uppercase;color:rgba(234,220,194,0.38);transition:color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.ag-name-r{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(183,164,136,0.45);font-weight:700}
.ag-name:hover .ag-name-t{color:rgba(234,220,194,0.8);transform:translateX(4px)}
.ag-name.on{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,transparent),transparent)}
.ag-name.on::before{transform:scaleY(1)}
.ag-name.on .ag-name-t{color:var(--c);transform:translateX(6px)}
.ag-name.on .ag-name-r{color:#cdbb9c}
.ag-name:focus-visible{outline:2px solid #f7d98a;outline-offset:-2px}
.ag-hero{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:620px}
.ag-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Cinzel Decorative',Cinzel,Georgia,serif;font-weight:900;font-size:clamp(90px,11vw,170px);letter-spacing:4px;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--c) 45%,transparent);writing-mode:vertical-rl;transform:rotate(180deg);pointer-events:none;user-select:none;opacity:.8}
.ag-portrait{position:relative;width:88%;height:100%;min-height:600px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px dashed rgba(165,145,108,0.25)}
.ag-portrait .pv-ph{color:rgba(227,215,189,0.3)}
.ag-portrait-img{position:absolute;inset:0;background-size:contain !important;background-repeat:no-repeat;background-position:center bottom !important}
.ag-info{display:flex;flex-direction:column;gap:12px;align-self:center;min-width:0}
.ag-role{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:4px;font-weight:700;color:#cdbb9c}
.ag-role-dot{width:10px;height:10px;transform:rotate(45deg);background:var(--c)}
.ag-title{margin:0;font-family:'Cinzel Decorative',Cinzel,Georgia,serif;font-weight:900;font-size:clamp(48px,5vw,76px);line-height:.95;color:#fbf1dc;text-shadow:0 4px 30px color-mix(in srgb,var(--c) 45%,transparent)}
.ag-elem{font-size:15px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:var(--c)}
.ag-bio{margin:0;font-size:17px;line-height:1.55;color:#cdbb9c}
.ag-abil-h{margin-top:10px;font-size:13px;letter-spacing:4px;font-weight:700;color:#9c8a6e}
.ag-abils{display:flex;gap:14px}
.ag-abil{position:relative;width:74px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-family:inherit;background:rgba(0,0,0,0.3);border:2px solid rgba(165,145,108,0.35);border-radius:10px;color:#cdbb9c;transition:all .25s}
.ag-abil span{font-family:Cinzel,Georgia,serif;font-size:24px;font-weight:900;line-height:1}
.ag-abil em{font-style:normal;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;opacity:.8}
.ag-abil:hover{border-color:var(--c);color:#fff;transform:translateY(-3px)}
.ag-abil.on{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 16%,rgba(0,0,0,0.3));box-shadow:0 0 22px color-mix(in srgb,var(--c) 40%,transparent)}
.ag-ability{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:12px;background:rgba(0,0,0,0.28);border:1px solid rgba(165,145,108,0.22);border-top:3px solid var(--c)}
.ag-ab-slot{font-size:12px;letter-spacing:3px;font-weight:700;color:var(--c)}
.ag-ab-name{font-family:Cinzel,Georgia,serif;font-size:26px;font-weight:700;color:#fbf1dc}
.ag-ab-desc{margin:0;font-size:16px;line-height:1.55;color:#cdbb9c}
.ag-ability .ss-v{color:var(--c)}
.ag-video{position:relative;aspect-ratio:16/9;margin-top:6px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0f0b08 repeating-linear-gradient(135deg,rgba(255,235,190,0.03) 0 10px,rgba(0,0,0,0) 10px 20px);border:1px solid rgba(165,145,108,0.2)}
.ag-video .pv-img{background-size:cover}
@keyframes agIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes agHeroIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.ag-info.swap{animation:agIn .5s cubic-bezier(.2,.8,.2,1)}
.ag-hero.swap{animation:agHeroIn .55s cubic-bezier(.2,.8,.2,1)}
.ag-ability.swap{animation:agIn .35s cubic-bezier(.2,.8,.2,1)}
@media (max-width: 1080px){
  .ag-stage{grid-template-columns:1fr;padding:18px;min-height:0}
  .ag-list{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;padding:0 0 8px}
  .ag-name{flex-shrink:0;padding:8px 14px}
  .ag-name::before{left:10px;right:10px;top:auto;bottom:0;width:auto;height:3px;transform:scaleX(0)}
  .ag-name.on::before{transform:scaleX(1)}
  .ag-name.on .ag-name-t,.ag-name:hover .ag-name-t{transform:none}
  .ag-hero{min-height:420px}.ag-portrait{min-height:400px;width:100%}
  .ag-watermark{writing-mode:horizontal-tb;transform:none;font-size:clamp(60px,14vw,120px);align-items:flex-start}
}
@media (max-width: 720px){ .ag-wrap{padding:64px 20px} .ag-hero{min-height:340px} .ag-portrait{min-height:320px} .ag-abil{width:64px;height:64px} }
@media (prefers-reduced-motion: reduce){ .ag-info.swap,.ag-hero.swap,.ag-ability.swap{animation:none} }
@media (max-width: 720px){ .ag-ability .skill-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- roster v2: 3-per-row tiles + 9:16 portrait ---------- */
.ag-stage{grid-template-columns:330px minmax(260px,380px) minmax(0,1fr) !important;align-items:start}
.ag-list{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px !important;max-height:none !important;overflow:visible !important;padding:0 !important;align-content:start}
.ag-name{align-items:center !important;gap:6px !important;padding:8px 6px 10px !important;border-radius:10px !important;background:rgba(0,0,0,0.25) !important;border:1px solid rgba(165,145,108,0.18) !important;text-align:center !important;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s !important}
.ag-name::before{display:none}
.ag-tile-img{position:relative;width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 30%,#1a130c),#0f0a07 80%)}
.ag-tile-init{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:30px;color:var(--c);opacity:.85}
.ag-tile-pic{position:absolute;inset:0;background-size:cover;background-position:center top}
.ag-name-t{font-size:14px !important;letter-spacing:1.5px !important;color:rgba(234,220,194,0.6) !important;transform:none !important}
.ag-name-r{font-size:9px !important;letter-spacing:1.5px !important}
.ag-name:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 60%,transparent) !important}
.ag-name:hover .ag-name-t{color:#f4e8d2 !important}
.ag-name.on{border-color:var(--c) !important;background:color-mix(in srgb,var(--c) 18%,rgba(0,0,0,0.25)) !important;box-shadow:0 0 20px color-mix(in srgb,var(--c) 35%,transparent)}
.ag-name.on .ag-name-t{color:var(--c) !important}
.ag-hero{min-height:0 !important;align-items:flex-start !important}
.ag-portrait{width:100% !important;height:auto !important;min-height:0 !important;aspect-ratio:9/16}
.ag-watermark{font-size:clamp(80px,9vw,150px) !important}
@media (max-width: 1280px){ .ag-stage{grid-template-columns:280px minmax(220px,320px) minmax(0,1fr) !important} }
@media (max-width: 1080px){
  .ag-stage{grid-template-columns:1fr !important}
  .ag-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ag-name{flex-shrink:1}
  .ag-hero{justify-content:center !important}
  .ag-portrait{width:min(360px,80%) !important;margin:0 auto}
}
@media (max-width: 520px){ .ag-list{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* ---------- roster v3: bigger tiles, list scrolls, no gap under portrait, 2-col stats ---------- */
.ag-stage{grid-template-columns:clamp(300px,29vw,440px) clamp(260px,24vw,380px) minmax(0,1fr) !important;align-items:stretch !important;min-height:0 !important}
.ag-list{height:0 !important;min-height:100% !important;overflow-y:auto !important;overflow-x:hidden !important;padding-right:8px !important;gap:10px !important;scrollbar-width:thin;scrollbar-color:#8a7650 transparent}
.ag-list::-webkit-scrollbar{width:8px}.ag-list::-webkit-scrollbar-thumb{background:#8a7650;border-radius:4px}
.ag-name{padding:10px 8px 12px !important;gap:8px !important}
.ag-name-t{font-size:16px !important}
.ag-name-r{font-size:10px !important}
.ag-tile-init{font-size:40px}
.ag-hero{align-self:start}
.ag-portrait{border-style:solid !important;border-color:rgba(165,145,108,0.22) !important;background:rgba(0,0,0,0.18)}
.ag-info{height:0 !important;min-height:100% !important;overflow-y:auto;align-self:stretch !important;justify-content:flex-start;gap:10px !important;padding-right:4px;scrollbar-width:thin;scrollbar-color:#8a7650 transparent}
.ag-title{font-size:clamp(40px,4vw,64px) !important}
.ag-ability{padding:14px 16px !important;gap:6px !important}
.ag-ability .skill-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px 8px !important;margin-top:6px !important;padding-top:8px !important}
.ag-ability .skill-stat{padding:5px 9px}
.ag-ability .ss-v{font-size:15px}
.ag-video{margin-top:4px !important}
@media (max-width: 1080px){
  .ag-stage{grid-template-columns:1fr !important}
  .ag-list{height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important}
  .ag-info{height:auto !important;min-height:0 !important;overflow:visible}
}
.ag-ability{flex:1 1 auto;min-height:0}
.ag-video{aspect-ratio:auto !important;flex:1 1 0;min-height:90px}
.ag-bio{font-size:15px !important;line-height:1.45 !important}
.ag-abil{width:64px !important;height:64px !important}
.ag-abil-h{margin-top:4px !important}
@media (max-width: 1080px){ .ag-video{aspect-ratio:16/9 !important;flex:none} }

/* ---------- turntable video previews ---------- */
.pv-vid{background:#15100b !important}
.pv-vid .pv-ph{display:none}
.pv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lift:hover .pv-video,.gs-card:hover .pv-video{transform:scale(1.06)}
.pv-video{object-fit:contain !important;background:#15100b}

/* ---------- turntable videos inside the Robux Shop replica ---------- */
.gs-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gs-card:hover .gs-vid{transform:scale(1.05)}
.gs-img:has(.gs-vid) .gs-ph,.gs-tile-img:has(.gs-vid) .gs-ph{display:none}

/* ---------- rig videos in the shop replica ---------- */
.gs-img-skin .gs-vid{object-position:center bottom}
.gs-trio{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.gs-trio .gs-vid{position:relative;inset:auto;width:100%;height:100%;object-position:center bottom}
.gs-img:has(.gs-trio) .gs-ph{display:none}

/* ---------- Strongest Bundle: big overlapping trio like the in-game card ---------- */
.gs-trio{display:block !important}
.gs-trio .gs-vid{position:absolute !important;top:0;bottom:0;height:100% !important;width:auto !important;aspect-ratio:556/928;object-fit:contain;object-position:center bottom}
.gs-trio .gs-vid:nth-child(1){left:2%;z-index:1}
.gs-trio .gs-vid:nth-child(2){left:50%;transform:translateX(-50%);z-index:2}
.gs-trio .gs-vid:nth-child(3){right:2%;z-index:1}
.gs-card:hover .gs-trio .gs-vid:nth-child(2){transform:translateX(-50%) scale(1.03)}
.gs-img-tall{min-height:500px !important}
.gs-tall .gs-body{padding:4px 6px 0 !important;align-items:stretch}
@media (max-width: 720px){ .gs-img-tall{min-height:300px !important} }
/* ---------- Robux Shop section: in-game shop area background ---------- */
.ste-shop-bg{background-color:#120d09 !important;background-image:linear-gradient(180deg,rgba(18,13,9,0.95) 0%,rgba(18,13,9,0.55) 14%,rgba(18,13,9,0.5) 50%,rgba(18,13,9,0.7) 86%,#120d09 100%),url(../img/shop-bg.jpg) !important;background-size:cover !important;background-position:center 40% !important}

/* ---------- The Codex section: overworld river at sunset ---------- */
.ste-codex-bg{background-color:#120d09 !important;background-image:linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0.6) 14%,rgba(18,13,9,0.55) 50%,rgba(18,13,9,0.72) 86%,#120d09 100%),url(../img/codex-bg.jpg) !important;background-size:cover !important;background-position:center 35% !important}

/* ---------- Game Modes (moved under Stages) ---------- */
.ste-modes-bg{background-color:#120d09 !important;background-image:linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0.55) 14%,rgba(18,13,9,0.5) 50%,rgba(18,13,9,0.78) 86%,#120d09 100%),url(../img/modes-bg.jpg) !important;background-size:cover !important;background-position:center 30% !important}
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.mode-card{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#15100b;box-shadow:0 24px 50px rgba(0,0,0,0.5)}
.mode-card .mode-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.mode-card:hover .mode-img{transform:scale(1.07)}
.mode-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,5,0) 30%,rgba(12,8,5,0.72) 62%,rgba(12,8,5,0.96) 100%)}
.mode-body{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mode-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2a1606;background:linear-gradient(180deg,#fbe3a0 0%,#e8b24a 55%,#c07e22 100%);box-shadow:0 0 0 3px rgba(18,13,9,0.8),0 0 24px rgba(232,178,74,0.45)}
.mode-name{font-family:Cinzel,Georgia,serif;font-size:30px;font-weight:700;line-height:1.1;color:#fbf1dc;text-shadow:0 3px 14px #000}
.mode-chip{font-size:12px;letter-spacing:2.5px;font-weight:700;color:#f7d98a;background:rgba(224,169,63,0.14);border:1px solid rgba(224,169,63,0.55);border-radius:999px;padding:6px 14px}
.mode-desc{margin:4px 0 0;font-size:16px;line-height:1.55;color:#e2d3b6;max-width:320px}
@media (max-width: 1080px){ .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 720px){ .mode-grid{grid-template-columns:1fr} .mode-card{aspect-ratio:4/5} .mode-name{font-size:26px} }

/* ---------- Game Modes cards: 16:9 artwork on top, centred text below ---------- */
.mode-card{aspect-ratio:auto !important;display:flex;flex-direction:column;background:linear-gradient(180deg,#2a2017,#15100b) !important}
.mode-card .mode-img{position:relative !important;inset:auto !important;aspect-ratio:16/9;height:auto !important}
.mode-card:hover .mode-img{transform:scale(1.05)}
.mode-body{position:relative !important;padding:22px 24px 26px !important;flex-grow:1;background:linear-gradient(180deg,#221a12,#15100b)}
.mode-name{font-size:28px !important;text-shadow:none !important}

/* ---------- locked (coming soon) game modes ---------- */
.mode-media{position:relative;overflow:hidden;aspect-ratio:16/9}
.mode-media .mode-img{width:100%;height:100%}
.mode-locked .mode-img{filter:brightness(0.42) saturate(0.6)}
.mode-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.mode-lock img{width:64px;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.8))}
.mode-lock span{font-size:13px;letter-spacing:3px;font-weight:700;color:#f7d98a;text-shadow:0 2px 8px #000}
.mode-locked .mode-name,.mode-locked .mode-desc{opacity:.75}

/* ---------- footer social icons ---------- */
.foot-ic{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#e2d3b6;background:rgba(0,0,0,0.35);border:1px solid rgba(165,145,108,0.35);transition:all .25s}
.foot-ic:hover{color:#2a1606;background:linear-gradient(180deg,#fbe3a0,#e8b24a 55%,#c07e22);border-color:#fbe7b0;transform:translateY(-3px);box-shadow:0 6px 18px rgba(232,178,74,0.35)}
.foot-ic:hover svg rect{fill:#e8b24a}
.foot-ic[title="Join our Discord"]:hover{color:#fff;background:#5865F2;border-color:#8b94ff;box-shadow:0 6px 18px rgba(88,101,242,0.45)}

/* ---------- /codes page ---------- */
.ph-codes{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/shop-bg.jpg)}
.code-count{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:rgba(0,0,0,0.45);border:1px solid rgba(123,220,74,0.45);color:#c9f5b0;font-weight:700;font-size:15px}
.code-dot{width:9px;height:9px;border-radius:50%;background:#7bdc4a;box-shadow:0 0 10px #7bdc4a}
.code-panel{border-radius:14px;padding:30px 32px;background:linear-gradient(160deg,#261d15,#15100b);display:flex;flex-direction:column;gap:12px}
.code-panel p{margin:0;font-size:17px;line-height:1.6;color:#cdbb9c}
.code-eyebrow{font-size:14px;letter-spacing:4px;font-weight:700;color:#d9a441}
.code-h{margin:0;font-family:Cinzel,Georgia,serif;font-size:30px;color:#f4e8d2}
.code-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.code-list li{position:relative;padding-left:22px;font-size:16px;line-height:1.55;color:#cdbb9c}
.code-list li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;transform:rotate(45deg);background:#e8b24a}
.code-list strong{color:#f4e8d2}.code-list a{color:#e8b24a;font-weight:700;text-decoration:none;margin-left:4px}.code-list a:hover{text-decoration:underline}
.code-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.code-step{position:relative;padding:26px 22px 22px;border-radius:12px;background:rgba(0,0,0,0.28);border:1px solid rgba(165,145,108,0.25);display:flex;flex-direction:column;gap:8px;text-align:center;align-items:center}
.code-step p{margin:0;font-size:15px;line-height:1.5;color:#b7a488}
.code-num{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Cinzel,Georgia,serif;font-weight:900;font-size:20px;color:#2a1606;background:linear-gradient(180deg,#fbe3a0,#e8b24a 55%,#c07e22)}
.code-step-t{font-family:Cinzel,Georgia,serif;font-size:19px;font-weight:700;color:#f4e8d2}
.code-table{border-radius:14px;overflow:hidden;border:1px solid #4a3a28;background:linear-gradient(180deg,#221a12,#15100b)}
.code-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1.1fr) 150px;gap:16px;align-items:center;padding:18px 24px;border-top:1px solid rgba(165,145,108,0.16)}
.code-head{border-top:0;background:rgba(0,0,0,0.3);font-size:12px;letter-spacing:3px;font-weight:700;color:#9c8a6e;text-transform:uppercase;padding:14px 24px}
.code-row > span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.code-chip{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:inherit;padding:9px 14px;border-radius:8px;border:1px dashed #b0834f;background:rgba(232,178,74,0.08);color:#f7d98a;transition:all .2s}
.code-chip:hover:not([disabled]){background:rgba(232,178,74,0.18);border-style:solid}
.code-txt{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;font-weight:700;letter-spacing:1.5px}
.code-copy{font-size:11px;letter-spacing:2px;font-weight:700;color:#cdbb9c;text-transform:uppercase}
.code-chip.copied .code-copy{color:#7bdc4a}
.code-chip[disabled]{cursor:default;opacity:.55;text-decoration:line-through}
.code-note{font-size:13px;color:#9c8a6e}
.code-reward{font-size:16px;font-weight:700;color:#e2d3b6}
.code-period{font-size:15px;color:#cdbb9c}
.code-status{display:inline-block;font-size:11px;letter-spacing:2px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid}
.st-active{color:#7bdc4a;border-color:rgba(123,220,74,0.55);background:rgba(123,220,74,0.1)}
.st-ending{color:#ffb12e;border-color:rgba(255,177,46,0.55);background:rgba(255,177,46,0.1)}
.st-upcoming{color:#8fb8ff;border-color:rgba(143,184,255,0.5);background:rgba(143,184,255,0.08)}
.st-expired{color:#9c8a6e;border-color:rgba(156,138,110,0.4)}
.code-expired .code-reward,.code-expired .code-period{opacity:.55}
@media (max-width: 1080px){ .code-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .code-info{grid-template-columns:1fr !important} }
@media (max-width: 720px){
  .code-head{display:none}
  .code-row{grid-template-columns:1fr;gap:8px;padding:18px}
  .code-steps{grid-template-columns:1fr}
}
/* ---------- Codex cards: same gradient frame as the Explore cards ---------- */
.codex-panel a.lift,
#traps-list .reveal.lift, #item-list .reveal.lift, #skin-list .reveal.lift, #crate-list .reveal.lift, #npc-list .reveal.lift{position:relative;border:0 !important}
.codex-panel a.lift::before,
#traps-list .reveal.lift::before, #item-list .reveal.lift::before, #skin-list .reveal.lift::before, #crate-list .reveal.lift::before, #npc-list .reveal.lift::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(160deg,#e6c08a 0%,#b0834f 30%,#5c3f24 65%,#1e140b 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;z-index:3;transition:filter .35s}
.codex-panel a.lift:hover::before,
#traps-list .reveal.lift:hover::before, #item-list .reveal.lift:hover::before, #skin-list .reveal.lift:hover::before, #crate-list .reveal.lift:hover::before, #npc-list .reveal.lift:hover::before{filter:brightness(1.35) saturate(1.15)}
.codex-panel a.lift, #traps-list .reveal.lift, #item-list .reveal.lift, #skin-list .reveal.lift, #crate-list .reveal.lift{border-radius:12px !important}

.pv-ph span{text-align:center;line-height:1.3}
/* ---------- mobile: paired buttons stay on ONE row, two equal columns ---------- */
@media (max-width: 720px){
  .hero-btns,.shape-btns{flex-direction:row !important;width:100%;gap:10px !important}
  .hero-btns .btn,.shape-btns .btn{flex:1 1 0;width:50% !important;min-width:0;box-sizing:border-box;padding:13px 10px !important;font-size:15px !important;white-space:nowrap}
  .hero-btns .btn svg,.shape-btns .btn svg{width:16px;height:16px;flex-shrink:0}
}
@media (max-width: 380px){
  .hero-btns .btn,.shape-btns .btn{font-size:13px !important;padding:12px 6px !important;gap:6px}
}
@media (max-width: 720px){
  .hero-btns .btn,.shape-btns .btn{white-space:normal !important;text-align:center;line-height:1.2}
}

/* ---------- hero: patch notes button ---------- */
.btn-grey{color:#e8dcc4;background:linear-gradient(180deg,#5d5a55 0%,#3f3c38 55%,#2e2c29 100%);border:1px solid #807a70;box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 6px 16px rgba(0,0,0,0.45)}
.btn-grey:hover{filter:brightness(1.15);transform:translateY(-2px);color:#fff}
.patch-btn{align-self:center;margin-top:18px;font-size:16px;padding:12px 26px}
@media (max-width: 720px){ .patch-btn{font-size:14px;padding:11px 20px} }

/* ---------- mobile: Seven Shapes keeps its arrows ---------- */
@media (max-width: 720px){
  .chain{flex-wrap:wrap !important;justify-content:center !important;row-gap:14px !important;gap:4px !important;padding:0 !important}
  .chain-arrow{display:block !important;width:18px !important;height:44px !important;align-self:flex-start;margin-top:4px}
  .chain-node{min-width:64px !important;gap:6px !important}
  .chain-node > div:first-child{width:52px !important;height:52px !important}
  .chain-node svg.shape-shine,.chain-node svg.star-shine{width:40px !important;height:40px !important}
  .chain-node > div:last-child{font-size:12px !important}
}

/* ---------- mobile portrait: sharp section backgrounds (no huge upscaling) ---------- */
@media (max-width: 720px) and (orientation: portrait){
  .hero-trail-wrap,.ste-chamber,.ste-world-bg,#stages-section.ste-explore-bg,.ste-modes-bg,.ste-codex-bg,.ste-shop-bg,.ste-footer{
    background-size:100% 100%,100% min(100vh,860px),auto min(100vh,860px) !important;
    background-position:center,center 35%,center 35% !important;background-repeat:no-repeat !important;background-color:#120d09 !important}
  .hero-trail-wrap{background-image:linear-gradient(180deg,rgba(18,13,9,0.55),rgba(18,13,9,0.65)),linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 16%,rgba(18,13,9,0) 84%,#120d09 100%),url(../img/maze-corridor.jpg) !important}
  .ste-chamber{background-image:linear-gradient(180deg,rgba(12,8,5,0.62),rgba(12,8,5,0.72)),linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 16%,rgba(18,13,9,0) 84%,#120d09 100%),url(../img/seven-shapes-chamber.jpg) !important}
  .ste-world-bg{background-image:linear-gradient(180deg,rgba(18,13,9,0.55),rgba(18,13,9,0.6)),linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 16%,rgba(18,13,9,0) 84%,#120d09 100%),url(../img/lobby-spawn.jpg) !important}
  #stages-section.ste-explore-bg{background-image:linear-gradient(180deg,rgba(18,13,9,0.4),rgba(18,13,9,0.5)),linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 16%,rgba(18,13,9,0) 84%,#120d09 100%),url(../img/lobby-matchmaking.jpg) !important}
  .ste-modes-bg{background-image:linear-gradient(180deg,rgba(18,13,9,0.5),rgba(18,13,9,0.6)),linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 16%,rgba(18,13,9,0) 84%,#120d09 100%),url(../img/modes-bg.jpg) !important}
  .ste-codex-bg{background-image:linear-gradient(180deg,rgba(18,13,9,0.5),rgba(18,13,9,0.6)),linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 16%,rgba(18,13,9,0) 84%,#120d09 100%),url(../img/codex-bg.jpg) !important}
  .ste-shop-bg{background-image:linear-gradient(180deg,rgba(18,13,9,0.5),rgba(18,13,9,0.55)),linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 16%,rgba(18,13,9,0) 84%,#120d09 100%),url(../img/shop-bg.jpg) !important}
  .ste-footer{background-image:linear-gradient(180deg,rgba(13,9,6,0.55),rgba(13,9,6,0.7)),linear-gradient(180deg,#120d09 0%,rgba(18,13,9,0) 20%,rgba(18,13,9,0) 80%,#0d0906 100%),url(../img/maze-corridor.jpg) !important}
}
/* ---------- /patch-notes ---------- */
.ph-patch{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/hero.jpg);background-position:center 30%}
.pn-card{border-radius:14px;padding:30px 34px 32px;background:linear-gradient(160deg,#261d15,#15100b 70%);display:flex;flex-direction:column;gap:22px}
.pn-latest{background:linear-gradient(160deg,#33261a,#17110c 70%);box-shadow:0 20px 50px rgba(0,0,0,0.45)}
.pn-head{display:flex;flex-direction:column;gap:10px}
.pn-badge{font-size:11px;letter-spacing:2.5px;font-weight:700;color:#f7d98a;border:1px solid rgba(224,169,63,0.55);background:rgba(224,169,63,0.12);border-radius:999px;padding:5px 12px}
.pn-badge-new{color:#2a1606;background:linear-gradient(180deg,#fbe3a0,#c07e22);border-color:#fbe7b0}
.pn-date{font-size:14px;color:#9c8a6e}
.pn-title{margin:0;font-family:Cinzel,Georgia,serif;font-size:34px;color:#fbf1dc}
.pn-sum{margin:0;font-size:17px;line-height:1.6;color:#cdbb9c}
.pn-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pn-block{padding:16px 18px;border-radius:10px;background:rgba(0,0,0,0.25);border:1px solid rgba(165,145,108,0.18);border-left:3px solid var(--c)}
.pn-block-h{font-size:12px;letter-spacing:3px;font-weight:700;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.pn-block ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pn-block li{position:relative;padding-left:16px;font-size:15px;line-height:1.5;color:#e2d3b6}
.pn-block li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;transform:rotate(45deg);background:var(--c)}
@media (max-width: 720px){ .pn-blocks{grid-template-columns:1fr} .pn-card{padding:24px 20px} .pn-title{font-size:26px} }
/* ---------- mobile nav v2: compact floating panel, right-aligned ---------- */
@media (max-width: 1080px){
  .nav-toggle{position:relative;z-index:12;transition:background .25s,border-color .25s}
  .nav-open .nav-toggle{background:rgba(232,178,74,0.14);border-color:#e8b24a}
  .nav-toggle .ic-close{display:none}
  .nav-open .nav-toggle .ic-open{display:none}
  .nav-open .nav-toggle .ic-close{display:block}
  .nav-links{display:flex !important;position:absolute !important;top:68px !important;left:auto !important;right:16px !important;width:min(300px,calc(100% - 32px));max-height:calc(100vh - 90px);overflow-y:auto;
    flex-direction:column;align-items:flex-end !important;gap:0 !important;padding:10px 16px 16px !important;border-radius:14px;
    background:linear-gradient(180deg,rgba(44,33,24,0.98) 0%,rgba(18,13,9,0.98) 100%) !important;border:1px solid #6b5436 !important;
    box-shadow:0 24px 60px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,230,180,0.12);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.2,1),visibility .22s}
  .nav-open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links > a,.nav-links .dd-btn{width:100%;justify-content:flex-end;text-align:right;padding:13px 2px !important;border-bottom:1px solid rgba(107,84,54,0.35) !important;font-size:17px}
  .nav-links > a.btn{border-bottom:0 !important}
  .nav-links .btn{width:50% !important;min-width:140px;justify-content:center;margin-top:14px !important;padding:11px 16px !important;font-size:16px !important;align-self:flex-end}
  .dd{width:100%;flex-direction:column;align-items:flex-end}
  .dd-btn{flex-direction:row-reverse;gap:8px !important}
  .dd-menu,.dd:hover .dd-menu,.dd:focus-within .dd-menu{position:static !important;transform:none !important;left:auto !important;padding-top:0;width:100%;opacity:1;visibility:visible;display:none;transition:none}
  .dd.open .dd-menu{display:block}
  .dd:hover .dd-btn svg,.dd:focus-within .dd-btn svg{transform:none}
  .dd.open .dd-btn svg{transform:rotate(180deg)}
  .dd.open .dd-btn{color:#fbe3a0}
  .dd-panel{width:auto !important;padding:6px 0 8px !important;background:none !important;border:0 !important;box-shadow:none !important;gap:2px}
  .dd-item{flex-direction:row-reverse;justify-content:flex-start;text-align:right;padding:9px 6px !important;gap:12px}
  .dd-item:hover{transform:translateX(-4px)}
  .dd-ic{width:32px;height:32px}
  .dd-ic svg{width:18px;height:18px}
  .dd-t{font-size:15px}
  .dd-s{display:none}
}
@media (max-width: 1080px){ .nav-links .dd-btn{justify-content:flex-start !important} }
/* ---------- mobile nav: panel only as wide as the Play Now button ---------- */
@media (max-width: 1080px){
  .nav-links{width:max-content !important;min-width:170px;max-width:calc(100% - 32px);padding:8px 14px 14px !important}
  .nav-links .btn{width:100% !important;min-width:0 !important;align-self:stretch}
  .nav-links > a,.nav-links .dd-btn{padding:11px 2px !important;font-size:16px}
}
.ag-name[hidden]{display:none !important}
/* ability box must grow with its content (was shrinking, so stats spilled out of the frame) */
.ag-ability{flex:1 0 auto !important;min-height:auto !important}
.ag-video{flex:1 1 auto !important;min-height:110px !important}

/* ---------- Game Modes on tablet: 2 on top, the 3rd centred below ---------- */
@media (max-width: 1080px) and (min-width: 721px){
  .mode-grid{display:flex !important;flex-wrap:wrap;justify-content:center;gap:26px}
  .mode-grid > .mode-card{flex:0 0 calc(50% - 13px);max-width:calc(50% - 13px)}
}
/* ---------- mobile Stages: arrows sit on the left/right of the active card ---------- */
@media (max-width: 720px){
  .stage-wrap{height:600px !important}
  .stage-nav{top:50% !important;bottom:auto !important;margin-top:-22px !important;width:44px !important;height:44px !important;z-index:12 !important;
    background:rgba(13,9,6,0.82) !important;backdrop-filter:blur(4px);box-shadow:0 6px 18px rgba(0,0,0,0.6)}
  .stage-nav[aria-label="Previous stage"]{left:max(6px,calc(50% - 167px)) !important;right:auto !important}
  .stage-nav[aria-label="Next stage"]{right:max(6px,calc(50% - 167px)) !important;left:auto !important}
}
@media (max-width: 720px){
  .stage-nav[aria-label="Previous stage"]{left:max(4px,calc(50% - 192px)) !important}
  .stage-nav[aria-label="Next stage"]{right:max(4px,calc(50% - 192px)) !important}
}
/* ---------- section eyebrows (THE SEVEN SHAPES, OFFICIAL TRAILER, ...): bigger + thin dark halo like the hero eyebrow ---------- */
section div[style*="letter-spacing: 4px"][style*="color: #d9a441"],section .code-eyebrow{font-size:21px !important;letter-spacing:5px !important;text-shadow:none !important;
  filter:drop-shadow(0 0 1.5px #000) drop-shadow(0 0 4px #000) drop-shadow(0 0 12px rgba(0,0,0,0.95)) drop-shadow(0 0 22px rgba(0,0,0,0.8))}
@media (max-width: 720px){ section div[style*="letter-spacing: 4px"][style*="color: #d9a441"],section .code-eyebrow{font-size:17px !important;letter-spacing:4px !important} }
/* ---------- hero tagline: readable on the bright key art ---------- */
#top p.hero-in{color:#fff6e4 !important;font-weight:500;text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,0.95),0 0 14px rgba(0,0,0,0.9),0 0 28px rgba(0,0,0,0.75),0 2px 3px #000 !important;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(10,7,4,0.55),rgba(10,7,4,0) 75%);padding:6px 18px;border-radius:40px}
#top p.hero-in{background:radial-gradient(ellipse 62% 80% at 50% 50%,rgba(10,7,4,0.78) 0%,rgba(10,7,4,0.55) 55%,rgba(10,7,4,0) 85%) !important;padding:10px 26px !important}

/* ---------- hero stats v2 ---------- */
.stats-v2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;max-width:820px;margin-top:6px}
.stat-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(40,30,20,0.82),rgba(12,8,5,0.9));backdrop-filter:blur(6px);box-shadow:0 14px 30px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,230,180,0.08);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.stat-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(160deg,#e6c08a 0%,#b0834f 35%,#5c3f24 70%,#1e140b 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.stat-card:hover{transform:translateY(-3px)}
.stat-ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#f7d98a;background:radial-gradient(circle at 50% 35%,rgba(232,178,74,0.28),rgba(232,178,74,0.06));border:1px solid rgba(232,178,74,0.45);margin-bottom:4px}
.stat-num{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:38px;line-height:1;background:linear-gradient(180deg,#fff3c4 0%,#f7d98a 40%,#e0a93f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.8))}
.stat-lbl{font-size:13px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:#cdbb9c}
.stat-danger .stat-ic{color:#ff8a78;background:radial-gradient(circle at 50% 35%,rgba(224,99,79,0.3),rgba(224,99,79,0.06));border-color:rgba(224,99,79,0.55)}
.stat-danger .stat-num{background:linear-gradient(180deg,#ffd0c7 0%,#ff8a78 45%,#d0453a 100%);-webkit-background-clip:text;background-clip:text}
@media (max-width: 720px){
  .stats-v2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px}
  .stat-card{padding:12px 8px}
  .stat-num{font-size:32px}.stat-lbl{font-size:11px;letter-spacing:1.5px}
}

.stats-v2{grid-template-columns:repeat(3,minmax(0,1fr));max-width:640px}
@media (max-width: 720px){ .stats-v2{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px} .stat-lbl{font-size:10px;letter-spacing:1px} .stat-num{font-size:28px} .stat-ic{width:32px;height:32px} }
.stats-v2{margin-left:auto !important;margin-right:auto !important;align-self:center !important;justify-self:center}
.stats.stats-v2{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
/* ---------- /invite ---------- */
.ph-invite{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/overworld-campfire.jpg);background-position:center 55%}
.ref-code{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 28px;border-radius:14px;background:linear-gradient(135deg,#33261a,#17110c 70%)}
.ref-label{font-size:13px;letter-spacing:3px;font-weight:700;color:#d9a441}
.ref-hint{font-size:16px;color:#cdbb9c}.ref-hint strong{color:#f4e8d2}
.ref-chip .code-txt{font-size:24px;letter-spacing:3px}
.ref-list{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ref-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:rgba(0,0,0,0.25);border:1px solid rgba(165,145,108,0.2)}
.ref-dot{width:8px;height:8px;transform:rotate(45deg);background:#e8b24a;flex-shrink:0}
.ref-name{flex:1;font-size:16px;font-weight:700;color:#f4e8d2}
.ref-track{display:flex;flex-direction:column;gap:10px;margin-top:6px;position:relative}
.ref-step{display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:10px;background:rgba(0,0,0,0.25);border:1px solid rgba(165,145,108,0.2)}
.ref-count{width:64px;height:64px;flex-shrink:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(232,178,74,0.3),rgba(232,178,74,0.05));border:1px solid rgba(232,178,74,0.55)}
.ref-count span{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:24px;line-height:1;color:#f7d98a}
.ref-count small{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#cdbb9c}
.ref-reward{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ref-faq{border-radius:12px;background:linear-gradient(180deg,#221a12,#15100b);border:1px solid #4a3a28;padding:0 22px}
.ref-faq summary{cursor:pointer;list-style:none;padding:18px 0;font-family:Cinzel,Georgia,serif;font-size:19px;font-weight:700;color:#f4e8d2;display:flex;justify-content:space-between;align-items:center}
.ref-faq summary::-webkit-details-marker{display:none}
.ref-faq summary::after{content:"+";font-size:26px;color:#e8b24a;transition:transform .25s}
.ref-faq[open] summary::after{transform:rotate(45deg)}
.ref-faq p{margin:0 0 18px;font-size:16px;line-height:1.6;color:#cdbb9c}
@media (max-width: 1080px){ .ref-grid{grid-template-columns:1fr !important} }
@media (max-width: 720px){ .code-steps[style*="repeat(3"]{grid-template-columns:1fr !important} .ref-chip .code-txt{font-size:19px} }

/* ---------- footer CTA: Play + Invite a Friend side by side ---------- */
.foot-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.foot-cta .btn{display:inline-flex;align-items:center;gap:10px}
@media (max-width: 720px){ .foot-cta{flex-wrap:nowrap;width:100%;gap:10px} .foot-cta .btn{flex:1 1 0;justify-content:center;font-size:15px !important;padding:14px 10px !important;white-space:normal;text-align:center;line-height:1.2} }

/* ---------- Invite button: tell players it pays out ---------- */
.invite-btn{position:relative;overflow:visible !important}
.invite-badge{position:absolute;top:-11px;right:-10px;font-size:11px;letter-spacing:1.5px;font-weight:800;color:#2a1606;padding:4px 9px;border-radius:999px;
  background:linear-gradient(180deg,#fbe3a0,#e8b24a 55%,#c07e22);box-shadow:0 0 0 2px #120d09,0 4px 12px rgba(232,178,74,0.45);animation:badgePulse 2.4s ease-in-out infinite;white-space:nowrap}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.invite-note{margin:-6px auto 0;max-width:560px;text-align:center;font-size:16px;line-height:1.5;color:#cdbb9c;text-shadow:0 2px 8px #000}
.invite-note strong{color:#f7d98a}
@media (max-width: 720px){ .invite-badge{font-size:9px;top:-9px;right:-4px;padding:3px 7px} .invite-note{font-size:14px;padding:0 16px} }
@media (prefers-reduced-motion: reduce){ .invite-badge{animation:none} }

/* shine stays inside the button; the badge now sits on a wrapper instead */
.invite-btn{overflow:hidden !important}
.invite-wrap{position:relative;display:inline-flex}
.invite-wrap .invite-badge{z-index:2;pointer-events:none}
@media (max-width: 720px){ .foot-cta .invite-wrap{flex:1 1 0} .foot-cta .invite-wrap .btn{width:100%} }
@media (max-width: 720px){ .foot-cta > .btn,.foot-cta > .invite-wrap{flex:1 1 0 !important;min-width:0} .foot-cta .invite-wrap .btn{flex:1 1 auto;width:100% !important} }
.foot-cta .btn,.foot-cta .invite-wrap{box-sizing:border-box}
.foot-cta > .btn,.foot-cta > .invite-wrap,.foot-cta .invite-btn{box-sizing:border-box !important}
@media (max-width: 720px){ .foot-cta > .btn,.foot-cta > .invite-wrap{flex:0 0 calc(50% - 5px) !important;width:calc(50% - 5px) !important} }
/* ---------- /invite: working code generator ---------- */
.ref-gen{display:flex;flex-direction:column;gap:16px;padding:26px 28px;border-radius:14px;background:linear-gradient(135deg,#33261a,#17110c 70%)}
.ref-form{display:flex;gap:12px;flex-wrap:wrap}
.ref-form input{flex:1 1 240px;min-width:0;font:inherit;font-size:18px;padding:14px 16px;border-radius:10px;border:1px solid #6b5436;background:rgba(0,0,0,0.4);color:#f4e8d2;outline:none;transition:border-color .2s,box-shadow .2s}
.ref-form input:focus{border-color:#e8b24a;box-shadow:0 0 0 3px rgba(232,178,74,0.2)}
.ref-form .btn{flex:0 0 auto}
.ref-msg{min-height:0;font-size:15px;color:#ff9d8a}
.ref-msg.ok{color:#9ff07a}
.ref-result{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px;border-radius:12px;background:rgba(0,0,0,0.3);border:1px solid rgba(165,145,108,0.25);animation:agIn .45s cubic-bezier(.2,.8,.2,1)}
.ref-result[hidden]{display:none}
.ref-av{width:72px;height:72px;flex-shrink:0;border-radius:50%;background:#1f1812 center/cover no-repeat;border:2px solid #e8b24a;display:flex;align-items:center;justify-content:center;font-size:28px;color:#e8b24a}
.ref-inv-name{font-family:Cinzel,Georgia,serif;font-size:22px;font-weight:700;color:#fbf1dc}
.ref-inv-name span{font-family:'Alegreya Sans',sans-serif;font-size:15px;font-weight:500;color:#9c8a6e}
.ref-progress{font-size:15px;color:#cdbb9c}
.ref-progress b{color:#f7d98a}
.ref-bar{height:8px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;margin-top:6px;max-width:320px}
.ref-bar i{display:block;height:100%;background:linear-gradient(90deg,#c07e22,#fbe3a0)}
.ref-share{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.ref-share-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ref-share-row .btn{font-size:14px;padding:9px 14px}
.ref-invited{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 28px;border-radius:14px;background:linear-gradient(135deg,#1f3320,#15100b 70%)}
@media (max-width: 720px){ .ref-share{align-items:stretch;width:100%} .ref-share-row{justify-content:stretch} .ref-share-row .btn{flex:1 1 0;justify-content:center} .ref-form .btn{flex:1 1 100%;justify-content:center} }
/* ---------- /invite v2 (Affiliate tiers) ---------- */
.ref-instant{display:flex;align-items:stretch;justify-content:center;gap:18px;flex-wrap:wrap}
.ref-instant-card{flex:1 1 280px;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:24px;border-radius:14px;background:linear-gradient(160deg,#2c2016,#15100b 70%)}
.ref-big{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:30px;background:linear-gradient(180deg,#fff3c4,#f7d98a 45%,#e0a93f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ref-plus{align-self:center;font-family:Cinzel,Georgia,serif;font-size:40px;color:#e8b24a}
.ref-tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ref-tier{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px 14px 20px;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,#1f1812),#120d09);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 14px 30px rgba(0,0,0,0.45)}
.ref-tier::after{content:"";position:absolute;left:50%;top:0;width:60%;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--c),transparent)}
.ref-tier-gem{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c);background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 35%,transparent),transparent 75%);border:1px solid color-mix(in srgb,var(--c) 60%,transparent)}
.ref-tier-name{font-family:Cinzel,Georgia,serif;font-size:22px;font-weight:700;color:var(--c)}
.ref-tier-min{font-size:13px;letter-spacing:1px;color:#cdbb9c;text-transform:uppercase}.ref-tier-min b{font-size:16px;color:#f4e8d2}
.ref-tier-reward{font-size:15px;font-weight:700;color:#f7d98a}
.ref-tier-perks{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:14px;color:#e2d3b6}
.ref-tier-perks li.robux{color:#9ff07a;font-weight:700}
.ref-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ref-rule{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:rgba(0,0,0,0.28);border:1px solid rgba(165,145,108,0.22)}
.ref-rule-ic{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2a1606;background:linear-gradient(180deg,#9ff07a,#4fae2a)}
.ref-rule-t{font-family:Cinzel,Georgia,serif;font-size:17px;font-weight:700;color:#f4e8d2}
.ref-rule-d{font-size:15px;line-height:1.45;color:#cdbb9c;margin-top:2px}
@media (max-width: 1080px){ .ref-tiers{grid-template-columns:repeat(3,minmax(0,1fr))} .ref-rules{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 720px){ .ref-tiers{grid-template-columns:repeat(2,minmax(0,1fr))} .ref-rules{grid-template-columns:1fr} .ref-plus{display:none} .ref-big{font-size:24px} }
.ref-invited .btn{padding:12px 20px !important;font-size:16px !important;min-height:46px;display:inline-flex;align-items:center;justify-content:center}
/* ---------- /invite v3: invite stats + referral titles ---------- */
.ref-stats{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 360px}
.ref-stats[hidden]{display:none}
.ref-stat{flex:1 1 100px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-radius:10px;background:rgba(0,0,0,0.3);border:1px solid rgba(232,178,74,0.35);text-align:center}
.ref-stat span{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:28px;line-height:1.1;background:linear-gradient(180deg,#fff3c4,#f7d98a 45%,#e0a93f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ref-stat small{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#cdbb9c}
.ref-stat-dim{border-color:rgba(165,145,108,0.25)}.ref-stat-dim span{background:none;color:#cdbb9c;-webkit-text-fill-color:#cdbb9c}
.ref-titles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ref-title{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:20px 14px;border-radius:14px;background:linear-gradient(180deg,#261d15,#120d09);border:1px solid rgba(165,145,108,0.3)}
.ref-title-need{display:flex;align-items:baseline;gap:6px}
.ref-title-need b{font-family:Cinzel,Georgia,serif;font-size:30px;color:#f4e8d2}
.ref-title-need small{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#9c8a6e}
.ref-title-name{font-family:Cinzel,Georgia,serif;font-size:20px;font-weight:700;color:#fbf1dc}
.ref-title-hint{font-size:14px;color:#b7a488;line-height:1.4}
.r-exclusive .rtext{background:linear-gradient(90deg,#c8c8d2 0%,#ffffff 50%,#c8c8d2 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sweepMyth 3s linear infinite}
@media (max-width: 1080px){ .ref-titles{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- trailer: autoplay (muted) + sound toggle ---------- */
.trailer-unmute{position:absolute;top:14px;right:14px;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:#fbf1dc;background:rgba(13,9,6,0.75);border:1px solid rgba(232,178,74,0.6);backdrop-filter:blur(4px);box-shadow:0 6px 18px rgba(0,0,0,0.5);transition:all .25s;animation:badgePulse 2.4s ease-in-out infinite}
.trailer-unmute:hover{background:rgba(232,178,74,0.25)}
.trailer-unmute.on{animation:none;opacity:.75}
.trailer-unmute.on svg path:nth-child(2){d:path("M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14")}
@media (max-width: 720px){ .trailer-unmute{top:10px;right:10px;font-size:12px;padding:7px 11px} }

/* ---------- Invite leaderboard ---------- */
.lb-search{max-width:640px;width:100%;margin:0 auto}
.lb-found{display:flex;flex-direction:column;gap:10px;max-width:820px;width:100%;margin:0 auto}
.lb-found[hidden]{display:none}
.lb-found p{margin:0;text-align:center;font-size:15px;color:#cdbb9c}.lb-found p b{color:#f7d98a}
.lb-err{text-align:center;color:#ff9d8a;font-size:15px}
.lb-podium{display:flex;justify-content:center;align-items:flex-end;gap:18px;flex-wrap:wrap}
.lb-pod{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:180px;padding:18px 12px 16px;border-radius:14px;background:linear-gradient(180deg,#2c2016,#120d09);border:1px solid rgba(165,145,108,0.3)}
.lb-pod b{font-family:Cinzel,Georgia,serif;font-size:17px;color:#fbf1dc;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-pod small{font-size:12px;color:#9c8a6e}
.lb-pod-av{position:relative;margin-bottom:6px}
.lb-pod .lb-av{width:74px;height:74px;font-size:28px}
.lb-pod-n{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);min-width:26px;height:26px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:Cinzel,Georgia,serif;font-weight:900;font-size:14px;color:#2a1606;background:#cdbb9c;box-shadow:0 0 0 3px #120d09}
.lb-pod-inv{margin-top:4px;font-family:Cinzel,Georgia,serif;font-weight:900;font-size:24px;color:#f7d98a}.lb-pod-inv span{font-size:12px;font-family:inherit;color:#cdbb9c;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.lb-pod-1{order:2;width:210px;padding-top:26px;border-color:#e8b24a;box-shadow:0 0 30px rgba(232,178,74,0.25)}
.lb-pod-1 .lb-av{width:92px;height:92px;border-color:#fbe3a0}
.lb-pod-1 .lb-pod-n{background:linear-gradient(180deg,#fbe3a0,#c07e22)}
.lb-pod-2 .lb-pod-n{background:linear-gradient(180deg,#f1f1f1,#9aa3ad)}
.lb-pod-3 .lb-pod-n{background:linear-gradient(180deg,#f0b98a,#9a5a2c)}
.lb-pod-2{order:1}.lb-pod-3{order:3}
.lb-table{border-radius:14px;overflow:hidden;border:1px solid #4a3a28;background:linear-gradient(180deg,#221a12,#15100b)}
.lb-row{display:grid;grid-template-columns:70px minmax(0,1fr) 120px 90px;gap:12px;align-items:center;padding:12px 20px;border-top:1px solid rgba(165,145,108,0.14)}
.lb-head{border-top:0;background:rgba(0,0,0,0.3);font-size:12px;letter-spacing:3px;font-weight:700;color:#9c8a6e;text-transform:uppercase;padding:12px 20px}
.lb-rank{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:18px;color:#cdbb9c}
.lb-gold .lb-rank{color:#f7d98a}.lb-silver .lb-rank{color:#d7dde3}.lb-bronze .lb-rank{color:#e3a778}
.lb-player{display:flex;align-items:center;gap:12px;min-width:0}
.lb-player > span:last-child{display:flex;flex-direction:column;min-width:0}
.lb-player b{font-size:16px;color:#f4e8d2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-player small{font-size:13px;color:#9c8a6e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-av{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:#2a2017 center/cover no-repeat;border:2px solid rgba(232,178,74,0.55);display:flex;align-items:center;justify-content:center;font-family:Cinzel,Georgia,serif;font-weight:700;color:#e8b24a}
.lb-tier{display:inline-block;font-size:12px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;color:var(--c);padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent)}
.lb-tier-none{--c:#6b5a45}
.lb-inv{text-align:right}.lb-inv b{font-family:Cinzel,Georgia,serif;font-size:20px;color:#f7d98a}
.lb-hi{background:rgba(232,178,74,0.14);box-shadow:inset 3px 0 0 #e8b24a}
.lb-empty{padding:28px 20px;text-align:center;color:#9c8a6e;font-size:15px}
@media (max-width: 720px){
  .lb-row{grid-template-columns:48px minmax(0,1fr) 56px;padding:10px 12px;gap:8px}
  .lb-row > span:nth-child(3){display:none}
  .lb-pod{width:30%;min-width:0;padding:12px 6px}.lb-pod-1{width:34%}
  .lb-pod .lb-av{width:54px;height:54px}.lb-pod-1 .lb-av{width:64px;height:64px}
  .lb-pod b{font-size:13px}.lb-pod-inv{font-size:18px}
  .lb-podium{gap:8px;flex-wrap:nowrap}
}

/* ---------- FAQ slide animation ---------- */
.ref-faq-body{overflow:hidden}
.ref-faq summary::after{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ref-faq[open] summary::after{transform:none}
.ref-faq.is-open summary::after{transform:rotate(45deg)}
.ref-faq{transition:border-color .3s,background .3s}
.ref-faq.is-open{border-color:#8a6a3e;background:linear-gradient(180deg,#2a2017,#15100b)}

/* ---------- leaderboard refresh timer ---------- */
.lb-refresh{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto;padding:10px 18px;border-radius:999px;font-size:15px;color:#cdbb9c;background:rgba(0,0,0,0.35);border:1px solid rgba(165,145,108,0.3);width:fit-content;max-width:100%;text-align:center}
.lb-refresh svg{color:#e8b24a;flex-shrink:0;animation:lbSpin 6s linear infinite}
.lb-refresh b{color:#f4e8d2}
.lb-count{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;color:#f7d98a !important;min-width:5ch;display:inline-block;text-align:left}
.lb-refresh.soon{border-color:#e8b24a;box-shadow:0 0 18px rgba(232,178,74,0.3)}
.lb-refresh.soon .lb-count{color:#9ff07a !important}
@keyframes lbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .lb-refresh svg{animation:none} }
@media (max-width: 720px){ .lb-refresh{font-size:13px;border-radius:14px} }
/* ---------- every remaining card: the same gold -> dark-brown gradient frame ---------- */
.lb-table,.lb-pod,.code-step,.code-table,.ref-tier,.ref-title,.ref-rule,.ref-result,.ref-faq,.pn-block,.ag-name,.ag-ability,.ag-stage,.lb-refresh,.ref-stat,.stats-v2 .stat-card{
  position:relative;border-color:transparent !important;border-style:solid}
.lb-table::before,.lb-pod::before,.code-step::before,.code-table::before,.ref-tier::before,.ref-title::before,.ref-rule::before,.ref-result::before,.ref-faq::before,.pn-block::before,.ag-name::before,.ag-ability::before,.ag-stage::before,.lb-refresh::before,.ref-stat::before{
  content:"" !important;display:block !important;position:absolute !important;inset:0 !important;width:auto !important;height:auto !important;transform:none !important;border-radius:inherit;padding:1.5px;
  background:linear-gradient(160deg,#e6c08a 0%,#b0834f 30%,#5c3f24 65%,#1e140b 100%) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  pointer-events:none;z-index:3;transition:filter .35s}
.lb-pod:hover::before,.code-step:hover::before,.ref-tier:hover::before,.ref-title:hover::before,.ref-rule:hover::before,.ref-faq:hover::before,.ag-name:hover::before{filter:brightness(1.35) saturate(1.15)}
/* highlighted states keep a brighter frame */
.lb-pod-1::before,.ag-name.on::before,.ref-faq.is-open::before{filter:brightness(1.5) saturate(1.2)}
.ag-name.on::before{padding:2px}
/* the tier colour stays as the top accent line */
.ref-tier::after{height:3px !important;z-index:4}
/* border-left accents are replaced by the frame, keep the colour as an inner stripe */
.pn-block{border-left:0 !important;box-shadow:inset 3px 0 0 var(--c)}
.lb-hi{box-shadow:inset 3px 0 0 #e8b24a}
.ag-ability{box-shadow:inset 0 3px 0 var(--c)}

.lb-av{position:relative;overflow:hidden}
.lb-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2a2017;border-radius:50%}

/* ---------- referral titles: the title itself carries the rarity colour/animation (like TitleStyler in game) ---------- */
.ref-title-name.rchip{font-family:'Fondamento',Cinzel,Georgia,serif !important;font-size:26px !important;font-weight:700;letter-spacing:.5px;line-height:1.2;padding:0 !important;text-transform:none !important;border:0 !important;background:none !important}
.ref-title-name.rchip .rtext{letter-spacing:.5px}
.ref-title-rar{font-size:11px;letter-spacing:2.5px;font-weight:700;opacity:.85}
.ref-title-rar.r-epic{color:#aa5ae6}.ref-title-rar.r-legendary{color:#ffd764}.ref-title-rar.r-mythic{color:#ff466e}.ref-title-rar.r-exclusive{color:#e6e6ee}

/* ---------- referral titles driven by the TitleStyler port ---------- */
.ref-title-name[data-title-rar]{font-family:'Fondamento',Cinzel,Georgia,serif;font-size:26px;font-weight:700;line-height:1.25;letter-spacing:.5px}
.ref-title-name .ttext{display:inline-block;padding:2px 6px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ref-title-rar.rar-epic{color:#aa5ae6}.ref-title-rar.rar-legendary{color:#ffd764}.ref-title-rar.rar-mythic{color:#ff466e}.ref-title-rar.rar-exclusive{color:#e6e6ee}

/* ---------- /codex/titles ---------- */
.ph-titles{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/lobby-spawn.jpg) !important}
.tt-filters{display:flex;gap:10px;flex-wrap:wrap}
.tt-filters .ag-filter span{opacity:.6;font-size:13px;margin-left:4px}
.tt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tt-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;border-radius:14px;background:linear-gradient(180deg,#221a12,#130e09)}
.tt-card[hidden]{display:none}
.tt-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(160deg,#e6c08a 0%,#b0834f 30%,#5c3f24 65%,#1e140b 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;transition:filter .35s}
.tt-card:hover::before{filter:brightness(1.35) saturate(1.15)}
.tt-stage{display:flex;align-items:center;justify-content:center;min-height:78px;border-radius:10px;background:radial-gradient(ellipse at 50% 60%,rgba(0,0,0,0.55),rgba(0,0,0,0.25));border:1px solid rgba(165,145,108,0.16);padding:8px}
.tt-name{font-family:'Fondamento',Cinzel,Georgia,serif;font-size:27px;font-weight:700;line-height:1.2;text-align:center;letter-spacing:.4px}
.tt-name .ttext{display:inline-block;padding:2px 6px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tt-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tt-rar{font-size:11px;letter-spacing:2.5px;font-weight:800}
.rar-common{color:#aaaaaa}.rar-uncommon{color:#50c878}.rar-rare{color:#5096e1}.rar-epic{color:#aa5ae6}.rar-legendary{color:#ffd764}.rar-mythic{color:#ff466e}.rar-exclusive{color:#d2dcf0}
.tt-method{font-size:11px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;color:#cdbb9c;padding:4px 10px;border-radius:999px;border:1px solid rgba(165,145,108,0.35);background:rgba(0,0,0,0.25)}
.tt-hint{margin:0;font-style:italic;font-size:15px;color:#e2d3b6}
.tt-desc{margin:0;font-size:14px;line-height:1.5;color:#b7a488;flex:1}
.tt-how{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:700;color:#f7d98a;padding-top:10px;border-top:1px dashed rgba(165,145,108,0.3)}
.tt-how svg{flex-shrink:0;margin-top:2px}
@media (max-width: 1080px){ .tt-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 720px){ .tt-grid{grid-template-columns:1fr} .tt-name{font-size:24px} }

/* ---------- home Codex tab: Titles ---------- */
.tt-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px}
.tt-home .tt-card{text-decoration:none;color:inherit}
.tt-feature{justify-content:flex-start;gap:14px;padding:22px;background:linear-gradient(160deg,#2b2233,#140f0c 70%) !important}
.tt-stage-big{min-height:220px;background:radial-gradient(ellipse at 50% 55%,rgba(210,220,240,0.12),rgba(0,0,0,0.45) 70%)}
.tt-stage-big .tt-name{font-size:52px}
.tt-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-content:start}
.tt-mini{padding:14px 14px 14px;gap:8px}
.tt-mini .tt-stage{min-height:70px}
.tt-mini .tt-name{font-size:21px}
.tt-mini .tt-hint{font-size:14px}
.tt-mini .tt-how{font-size:13px;padding-top:8px}
@media (max-width: 1080px){ .tt-home{grid-template-columns:1fr} .tt-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 720px){ .tt-stage-big .tt-name{font-size:40px} .tt-stage-big{min-height:150px} }

/* ---------- hero first impression: scroll parallax, cursor drift, embers, scroll cue ---------- */
#top{--hs:0;--mx:0;--my:0;overflow:hidden}
#top::before{transform:translate3d(calc(var(--mx) * -14px),calc(var(--my) * -10px + var(--hs) * 90px),0) scale(calc(1.04 + var(--hs) * .12));filter:brightness(calc(1 - var(--hs) * .45)) saturate(calc(1 - var(--hs) * .25));transform-origin:50% 40%;will-change:transform}
.hero-content{position:relative;z-index:2;transform:translate3d(calc(var(--mx) * 6px),calc(var(--hs) * -110px),0);opacity:calc(1 - var(--hs) * 1.25);will-change:transform,opacity}
.hero-embers{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:calc(1 - var(--hs) * .8)}
.hero-scroll{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#f7d98a;opacity:calc(1 - var(--hs) * 4);transition:color .25s}
.hero-scroll:hover{color:#fff3c4}
.hero-scroll-t{font-size:11px;letter-spacing:4px;font-weight:800;text-shadow:0 0 2px #000,0 0 10px #000}
.hero-mouse{width:24px;height:38px;border:2px solid currentColor;border-radius:14px;position:relative;box-shadow:0 0 14px rgba(232,178,74,0.35),inset 0 0 8px rgba(0,0,0,0.6);background:rgba(13,9,6,0.35)}
.hero-mouse i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:currentColor;animation:mouseWheel 1.8s cubic-bezier(.6,0,.4,1) infinite}
.hero-chev{display:flex;flex-direction:column;align-items:center;margin-top:-2px}
.hero-chev b{display:block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;animation:chevDrop 1.8s ease-in-out infinite}
.hero-chev b:nth-child(2){animation-delay:.18s}
@keyframes mouseWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes chevDrop{0%,100%{opacity:.15;transform:translateY(-3px) rotate(45deg)}50%{opacity:1;transform:translateY(3px) rotate(45deg)}}
/* main CTA: breathing glow + a shine every few seconds */
.hero-cta{position:relative;overflow:hidden;animation:ctaGlow 2.8s ease-in-out infinite}
.hero-cta::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.65),transparent);transform:skewX(-18deg);animation:ctaShine 4.2s ease-in-out infinite;pointer-events:none}
@keyframes ctaGlow{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,0.5),0 0 0 0 rgba(232,178,74,0.0)}50%{box-shadow:0 6px 20px rgba(0,0,0,0.5),0 0 28px 4px rgba(232,178,74,0.45)}}
@keyframes ctaShine{0%,55%{left:-60%}80%,100%{left:130%}}
@media (max-width: 720px){ .hero-scroll{bottom:12px} .hero-scroll-t{font-size:10px;letter-spacing:3px} }
@media (prefers-reduced-motion: reduce){
  #top::before,.hero-content{transform:none !important}
  .hero-embers{display:none}
  .hero-mouse i,.hero-chev b,.hero-cta,.hero-cta::after{animation:none}
}
.hero-content{padding-bottom:128px !important} @media (max-width: 720px){ .hero-content{padding-bottom:104px !important} }
#top .hero-content{padding-bottom:128px !important} @media (max-width: 720px){ #top .hero-content{padding-bottom:112px !important} }

/* ---------- hero: live Roblox stats ---------- */
.stats.stats-v2.stats-live{grid-template-columns:repeat(4,minmax(0,1fr)) !important;max-width:820px}
.stat-live .stat-ic{color:#9ff07a;background:radial-gradient(circle at 50% 35%,rgba(123,220,74,0.3),rgba(123,220,74,0.06));border-color:rgba(123,220,74,0.55)}
.stat-live .stat-num{background:linear-gradient(180deg,#e9ffd9 0%,#9ff07a 45%,#4fae2a 100%);-webkit-background-clip:text;background-clip:text}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#7bdc4a;margin-right:6px;vertical-align:1px;box-shadow:0 0 0 0 rgba(123,220,74,0.7);animation:livePulse 1.8s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(123,220,74,0.7)}70%{box-shadow:0 0 0 8px rgba(123,220,74,0)}100%{box-shadow:0 0 0 0 rgba(123,220,74,0)}}
.stat-num.bump{animation:statBump .6s ease-out}
@keyframes statBump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@media (max-width: 720px){ .stats.stats-v2.stats-live{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
@media (prefers-reduced-motion: reduce){ .live-dot{animation:none} }

/* ---------- /leaderboard ---------- */
.ph-lb{background-image:linear-gradient(180deg,rgba(13,9,6,0.6) 0%,rgba(13,9,6,0.35) 40%,rgba(18,13,9,0.9) 85%,#120d09 100%),url(../img/lobby-matchmaking.jpg);background-position:center 45%}
.glb-season{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 24px;border-radius:14px;background:linear-gradient(135deg,#33261a,#17110c 70%)}
.glb-season::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(160deg,#e6c08a 0%,#b0834f 30%,#5c3f24 65%,#1e140b 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.glb-season-l{display:flex;align-items:center;gap:12px;font-size:16px;color:#cdbb9c;flex-wrap:wrap}
.glb-season-badge{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:15px;letter-spacing:2px;color:#2a1606;padding:6px 14px;border-radius:999px;background:linear-gradient(180deg,#fbe3a0,#e8b24a 55%,#c07e22)}
.glb-season-t{display:flex;gap:8px}
.glb-season-t span{display:flex;align-items:baseline;gap:2px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,0.35);border:1px solid rgba(232,178,74,0.3);font-size:12px;color:#9c8a6e;text-transform:uppercase}
.glb-season-t b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;color:#f7d98a}
.glb-tabs{display:flex;gap:8px;flex-wrap:wrap}
.glb-tab{font-family:inherit;cursor:pointer;padding:10px 18px;border-radius:999px;border:1px solid #6b5436;background:linear-gradient(180deg,rgba(58,42,26,0.85),rgba(18,12,8,0.9));color:#e2d3b6;font-weight:700;font-size:15px;transition:all .25s}
.glb-tab:hover{border-color:#f0c56a;color:#fff}
.glb-tab.on{background:linear-gradient(180deg,#fbe3a0 0%,#e8b24a 45%,#c07e22 100%);color:#2a1606;border-color:#fbe7b0}
.glb-desc{margin:0;font-size:16px;color:#b7a488}
.glb-row{grid-template-columns:70px minmax(0,1fr) 0 150px}
.lb-table .lb-row.lb-head{grid-template-columns:70px minmax(0,1fr) 0 150px}
.glb-unit{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9c8a6e}
.glb-swap{animation:agIn .35s cubic-bezier(.2,.8,.2,1)}
@media (max-width: 720px){ .glb-row,.lb-table .lb-row.lb-head{grid-template-columns:48px minmax(0,1fr) 0 96px} .glb-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px} .glb-tab{flex-shrink:0;font-size:14px;padding:8px 14px} .glb-season-t b{font-size:16px} }

.glb-tab-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.glb-tab-link svg{opacity:.8}

.glb-rank{display:inline-block;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:15px;color:var(--c);padding:5px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 14%,transparent);white-space:nowrap}
.lb-pod-inv .glb-rank{font-size:14px}

/* ---------- Highest Rank: coming soon ---------- */
.glb-soon{margin-left:8px;font-size:10px;letter-spacing:1.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,0.35);color:#f7d98a;border:1px solid rgba(232,178,74,0.5);vertical-align:1px}
.glb-tab.on .glb-soon{background:rgba(42,22,6,0.25);color:#2a1606;border-color:rgba(42,22,6,0.4)}
.glb-soon-panel{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:48px 24px 44px;background:radial-gradient(ellipse at 50% 20%,rgba(232,178,74,0.12),transparent 60%)}
.glb-soon-lock{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#f7d98a;border:1px solid rgba(232,178,74,0.55);background:rgba(0,0,0,0.35);box-shadow:0 0 30px rgba(232,178,74,0.2)}
.glb-soon-t{font-family:'Cinzel Decorative',Cinzel,Georgia,serif;font-weight:700;font-size:30px;color:#fbf1dc}
.glb-soon-panel p{margin:0;max-width:520px;font-size:16px;line-height:1.55;color:#cdbb9c}.glb-soon-panel p b{color:#f4e8d2}
.glb-ladder{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px;filter:saturate(.75)}
.glb-ladder i{width:14px;height:1px;background:rgba(165,145,108,0.5)}

/* ---------- season rewards ---------- */
.glb-prizes{position:relative;display:flex;flex-direction:column;gap:18px;padding:28px 24px 22px;border-radius:16px;background:radial-gradient(ellipse at 50% 0%,rgba(232,178,74,0.16),transparent 60%),linear-gradient(180deg,#261d15,#120d09)}
.glb-prizes::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(160deg,#e6c08a 0%,#b0834f 30%,#5c3f24 65%,#1e140b 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.glb-prizes-h{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.glb-prizes-h p{margin:0;font-size:16px;color:#cdbb9c;max-width:560px}.glb-prizes-h p b{color:#f7d98a}
.glb-prize-row{display:flex;justify-content:center;align-items:flex-end;gap:16px;flex-wrap:wrap}
.glb-prize{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:230px;padding:18px 14px 16px;border-radius:14px;background:linear-gradient(180deg,#2c2016,#140f0b);text-align:center}
.glb-prize::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--pf,linear-gradient(160deg,#e6c08a,#5c3f24));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.glb-prize-1{--pf:linear-gradient(160deg,#fff3c4,#e8b24a 45%,#8a5a1c);width:260px;padding-top:24px;box-shadow:0 0 40px rgba(232,178,74,0.28)}
.glb-prize-2{--pf:linear-gradient(160deg,#ffffff,#b8c0c8 45%,#5f666d)}
.glb-prize-3{--pf:linear-gradient(160deg,#f5c9a0,#b0703f 45%,#5a3219)}
.glb-prize-place{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:22px;color:#fbf1dc}
.glb-prize-1 .glb-prize-place{font-size:28px;color:#fbe3a0}
.glb-prize-robux{display:flex;align-items:center;gap:8px;color:#9ff07a}
.glb-prize-robux span{font-family:Cinzel,Georgia,serif;font-weight:900;font-size:30px;line-height:1;background:linear-gradient(180deg,#e9ffd9,#9ff07a 45%,#4fae2a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.glb-prize-1 .glb-prize-robux span{font-size:38px}
.glb-prize-robux small{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#b7e59d;font-weight:700}
.glb-prize-plus{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#9c8a6e;font-weight:700}
.glb-prize-title{font-size:22px !important}
.glb-prize-more{text-align:center;font-size:15px;color:#cdbb9c}
.glb-prize-more .tt-name{font-size:18px}
.glb-pod-prize{margin-top:4px;font-size:12px;font-weight:800;letter-spacing:1px;color:#2a1606;background:linear-gradient(180deg,#e9ffd9,#7bdc4a);padding:3px 10px;border-radius:999px}
@media (max-width: 720px){ .glb-prize-row{flex-wrap:nowrap;gap:8px} .glb-prize,.glb-prize-1{width:33%;padding:12px 6px} .glb-prize-robux{flex-direction:column;gap:2px} .glb-prize-robux svg{display:none} .glb-prize-robux span{font-size:20px} .glb-prize-1 .glb-prize-robux span{font-size:24px} .glb-prize-title{font-size:15px !important} .glb-prize-place{font-size:18px} }

/* ---------- Player ID column ---------- */
.lb-pid a{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;color:#cdbb9c;text-decoration:none;border-bottom:1px dashed rgba(205,187,156,0.4);transition:color .2s,border-color .2s}
.lb-pid a:hover{color:#f7d98a;border-color:#f7d98a}
.glb-row,#boards .lb-head{grid-template-columns:70px minmax(0,1fr) 150px 150px !important}
[data-lb-table] .lb-row,[data-lb-rows] .lb-row,.lb-found .lb-row:not(.glb-row){grid-template-columns:70px minmax(0,1fr) 140px 120px 90px}
#leaderboard [data-lb-table] .lb-row.lb-head{grid-template-columns:70px minmax(0,1fr) 140px 120px 90px !important}
@media (max-width: 720px){
  .glb-row,#boards .lb-head{grid-template-columns:44px minmax(0,1fr) 92px 80px !important}
  #leaderboard [data-lb-table] .lb-row,#leaderboard .lb-found .lb-row,#leaderboard [data-lb-table] .lb-row.lb-head{grid-template-columns:44px minmax(0,1fr) 92px 50px !important}
  #leaderboard .lb-row > span:nth-child(4){display:none}
  .lb-pid a{font-size:11px}
}

/* ---------- Robux icon ---------- */
.rbx-ic{display:inline-block;width:1em;height:auto;vertical-align:-0.12em;margin-right:.3em;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5))}
.glb-prize-robux .rbx-ic{width:30px;margin:0}
.glb-prize-1 .glb-prize-robux .rbx-ic{width:38px}
.glb-prize-robux{color:#f7d98a}
.glb-prize-robux span{background:linear-gradient(180deg,#fff3c4 0%,#f0d58c 40%,#b8924a 100%) !important;-webkit-background-clip:text !important;background-clip:text !important}
.glb-prize-robux small{color:#e6cf93}
.glb-pod-prize{display:inline-flex;align-items:center;color:#2a1606;background:linear-gradient(180deg,#fff3c4,#e8c27a 60%,#c9a052) !important}
.glb-pod-prize .rbx-ic{width:13px;margin-right:4px;filter:none}
@media (max-width: 720px){ .glb-prize-robux .rbx-ic{width:22px;display:block} .glb-prize-1 .glb-prize-robux .rbx-ic{width:26px} }

.rbx-ic{display:inline-block;width:1em;height:1.08em;background:url(../img/robux.png) center/contain no-repeat;vertical-align:-0.16em;margin-right:.3em;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5))}
.glb-prize-robux .rbx-ic{width:30px;height:32px;margin:0}
.glb-prize-1 .glb-prize-robux .rbx-ic{width:38px;height:41px}
.glb-pod-prize .rbx-ic{width:13px;height:14px;margin-right:4px;filter:none}
@media (max-width: 720px){ .glb-prize-robux .rbx-ic{width:22px;height:24px} .glb-prize-1 .glb-prize-robux .rbx-ic{width:26px;height:28px} }
.glb-prize-robux .rbx-ic{background:url(../img/robux.png) center/contain no-repeat !important;-webkit-background-clip:border-box !important;background-clip:border-box !important}
/* hero art must fade out into the section below — don't clip it at the hero's bottom edge */
#top{overflow:visible !important;overflow-x:clip !important}
#top::before{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,0.55) 78%,rgba(0,0,0,0) 100%) !important;mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,0.55) 78%,rgba(0,0,0,0) 100%) !important;transform-origin:50% 0 !important;z-index:0}
.hero-trail-wrap{overflow-x:clip}
#trailer{position:relative;z-index:1}
/* ---------- leaderboards on phones ---------- */
.lb-pid-m{display:none}
@media (max-width: 720px){
  /* tabs wrap into rows instead of scrolling off-screen */
  .glb-tabs{flex-wrap:wrap !important;overflow:visible !important;gap:6px;justify-content:center}
  .glb-tab{flex:1 1 calc(50% - 6px) !important;justify-content:center;text-align:center;font-size:13px !important;padding:9px 8px !important;display:inline-flex;align-items:center}
  .glb-tab-link{flex-basis:100% !important}
  .glb-desc{text-align:center;font-size:14px}
  /* table: Player ID moves under the username, so names get the full width */
  .lb-pid{display:none !important}
  .lb-pid-m{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px !important;color:#8f7c62 !important;letter-spacing:.5px}
  .glb-row,#boards .lb-head{grid-template-columns:40px minmax(0,1fr) 78px !important;padding:10px 12px !important;gap:8px !important}
  #boards .lb-head > span:nth-child(3){display:none}
  #leaderboard [data-lb-table] .lb-row,#leaderboard .lb-found .lb-row,#leaderboard [data-lb-table] .lb-row.lb-head{grid-template-columns:40px minmax(0,1fr) 54px !important;padding:10px 12px !important;gap:8px !important}
  #leaderboard .lb-row > span:nth-child(3),#leaderboard .lb-row > span:nth-child(4){display:none}
  #leaderboard .lb-head > span:nth-child(3),#leaderboard .lb-head > span:nth-child(4){display:none}
  .lb-av{width:36px;height:36px}
  .lb-player{gap:10px}
  .lb-player b{font-size:14px}
  .lb-player small{font-size:12px}
  .lb-rank{font-size:15px}
  .lb-inv b{font-size:17px}
  .glb-rank{font-size:12px;padding:4px 8px}
  /* refresh bar + season card */
  .lb-refresh{flex-direction:column;gap:4px;width:100%;box-sizing:border-box}
  .glb-season{padding:14px 14px;justify-content:center}
  .glb-season-l{justify-content:center;width:100%;font-size:14px}
  .glb-season-t{width:100%;justify-content:center}
  .glb-season-t span{flex:1;justify-content:center;padding:6px 4px}
  /* prize cards: keep the three side by side and readable */
  .glb-prizes{padding:22px 12px 18px}
  .glb-prizes-h .code-h{font-size:26px !important}
  .glb-prizes-h p{font-size:14px}
  .glb-prize-plus{font-size:9px;letter-spacing:1.5px}
  .glb-prize-more{font-size:13px}
}
@media (max-width: 380px){
  .glb-row,#boards .lb-head{grid-template-columns:34px minmax(0,1fr) 70px !important;padding:9px 10px !important}
  .glb-prize-robux span{font-size:17px !important}.glb-prize-1 .glb-prize-robux span{font-size:20px !important}
  .glb-prize-title{font-size:13px !important}
}

@media (max-width: 720px){
  .lb-search{flex-wrap:nowrap !important;gap:8px !important}
  .lb-search input{font-size:15px;padding:12px 12px;min-width:0}
  .lb-search .btn{flex:0 0 auto !important;min-height:46px;padding:0 16px !important;font-size:14px !important}
  .lb-head{font-size:10px !important;letter-spacing:1.5px !important}
  .lb-pod b{font-size:12px}.lb-pod small{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lb-pod-inv{font-size:16px}.lb-pod-inv span{font-size:9px}
  .glb-pod-prize{font-size:10px;padding:2px 7px}
  .glb-unit{font-size:9px}
}

/* ---------- phones: keep the Player ID column ---------- */
@media (max-width: 720px){
  .ph-lb{min-height:380px !important}
  .ph-lb > div{padding-bottom:24px !important}
  .glb-wrap{padding:10px 16px 72px !important;gap:18px !important}
  .lb-pid{display:block !important}
  .lb-pid-m{display:none !important}
  .lb-pid a{font-size:10.5px;letter-spacing:-.2px}
  .glb-row,#boards .lb-head{grid-template-columns:30px minmax(0,1fr) 70px 58px !important;padding:10px 10px !important;gap:6px !important}
  #boards .lb-head > span:nth-child(3){display:block !important}
  #leaderboard [data-lb-table] .lb-row,#leaderboard .lb-found .lb-row,#leaderboard [data-lb-table] .lb-row.lb-head{grid-template-columns:30px minmax(0,1fr) 70px 40px !important;padding:10px 10px !important;gap:6px !important}
  #leaderboard .lb-row > span:nth-child(3),#leaderboard .lb-head > span:nth-child(3){display:block !important}
  .lb-av{width:32px;height:32px;font-size:13px}
  .lb-player{gap:8px}
  .lb-player b{font-size:13px}
  .lb-player small{font-size:11px}
  .lb-rank{font-size:13px}
  .lb-inv b{font-size:15px}
  .lb-head{font-size:9px !important;letter-spacing:1px !important}
}
@media (max-width: 370px){
  .glb-row,#boards .lb-head{grid-template-columns:26px minmax(0,1fr) 64px 50px !important;padding:9px 8px !important}
  #leaderboard [data-lb-table] .lb-row,#leaderboard .lb-found .lb-row,#leaderboard [data-lb-table] .lb-row.lb-head{grid-template-columns:26px minmax(0,1fr) 64px 34px !important;padding:9px 8px !important}
  .lb-av{width:28px;height:28px}
  .lb-pid a{font-size:10px}
}

/* ---------- season history ---------- */
.sh-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sh-panel[hidden]{display:none}
.sh-panel{display:flex;flex-direction:column;gap:14px}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sh-title{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:22px;color:#fbf1dc}
.sh-sub{font-size:13px;color:#9c8a6e;margin-top:2px}
.sh-csv{display:inline-flex;align-items:center;gap:8px;font-size:14px !important;padding:10px 16px !important}
.sh-row{grid-template-columns:70px minmax(0,1fr) 130px 90px 170px !important}
.sh-prize{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.sh-prize small{font-size:12px;color:#d2dcf0}
@media (max-width: 720px){
  .sh-row{grid-template-columns:30px minmax(0,1fr) 66px 40px 74px !important;padding:10px 8px !important;gap:6px !important}
  .sh-title{font-size:18px}
  .sh-csv{width:100%;justify-content:center}
  .sh-prize small{font-size:9px}
  .sh-prize .glb-pod-prize{font-size:9px;padding:2px 5px}
}

/* patch notes: long lists take the full width in two columns; short blocks don't stretch */
.pn-blocks{align-items:start}
.pn-block.pn-many{grid-column:1 / -1}
.pn-block.pn-many ul{display:block;columns:2;column-gap:32px}
.pn-block.pn-many li{break-inside:avoid;margin-bottom:9px}
@media (max-width: 720px){ .pn-block.pn-many ul{columns:1} }
/* ---------- status effects ---------- */
.fx-ic{display:inline-block;width:22px;height:22px;flex-shrink:0;background:center/contain no-repeat}
.fx-haste{background-image:url(../img/status/haste.png)}
.fx-slow{background-image:url(../img/status/slow.png)}
.fx-stun{background-image:url(../img/status/stun.png)}
.fx-purified{background-image:url(../img/status/purified.png)}
.fx-transform{background-image:url(../img/status/transform.png)}
.fx-row{display:flex;flex-wrap:wrap;gap:6px}
.fx-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;font-size:12px;line-height:1;background:color-mix(in srgb,var(--c) 14%,rgba(0,0,0,0.35));border:1px solid color-mix(in srgb,var(--c) 55%,transparent);color:#f4e8d2}
.fx-chip b{font-weight:800;letter-spacing:.5px;color:var(--c);text-transform:uppercase;font-size:11px}
.fx-chip i{font-style:normal;color:#e2d3b6;opacity:.85}
.fx-legend{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 20px;border-radius:14px;background:linear-gradient(180deg,#221a12,#130e09)}
.fx-legend::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(160deg,#e6c08a 0%,#b0834f 30%,#5c3f24 65%,#1e140b 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.fx-legend-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fx-legend-h p{margin:0;font-size:15px;color:#b7a488}
.fx-legend-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.fx-legend-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,0.28);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.fx-legend-item .fx-ic{width:40px;height:40px}
.fx-legend-item b{display:block;font-family:Cinzel,Georgia,serif;font-size:16px;color:var(--c)}
.fx-legend-item span{font-size:13px;line-height:1.35;color:#cdbb9c}

/* character abilities: status effects */
.ag-ability [data-f="abfx"]{margin:2px 0 4px}
.ag-abil{position:relative}
.ag-abil-fx{position:absolute;top:-8px;right:-8px;display:flex;gap:1px}
.ag-abil-fx .fx-ic{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8))}

.ref-faq-body{overflow:hidden;transition:height .38s cubic-bezier(.2,.8,.2,1),opacity .3s ease;will-change:height}
/* ---------- FAQ: no gradient flicker while the item grows/shrinks ---------- */
.ref-faq,.ref-faq.is-open{background:linear-gradient(180deg,#221a12,#15100b) !important;transition:none !important;isolation:isolate}
/* the gold frame: its own GPU layer, no filter changes (filters on a masked, resizing box repaint every frame) */
.ref-faq::before{transform:translateZ(0);backface-visibility:hidden;transition:none !important;filter:none !important}
.ref-faq.is-open::before,.ref-faq:hover::before{filter:none !important}
/* highlight for the open item fades in on a separate layer instead of swapping the gradient */
.ref-faq::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(180deg,rgba(232,178,74,0.10),rgba(232,178,74,0) 70%);box-shadow:inset 0 0 0 1px rgba(251,227,160,0.28);transform:translateZ(0)}
.ref-faq.is-open::after,.ref-faq:hover::after{opacity:1}
.ref-faq > summary,.ref-faq > .ref-faq-body{position:relative;z-index:1}

/* How it works: when the 3 steps wrap to 2 columns, centre the third card */
@media (max-width: 1080px) and (min-width: 721px){
  #how .code-steps{display:flex !important;flex-wrap:wrap;justify-content:center}
  #how .code-steps > .code-step{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px);box-sizing:border-box}
}
/* Affiliate tiers: when they wrap, the last row is centred */
@media (max-width: 1080px){
  .ref-tiers{display:flex !important;flex-wrap:wrap;justify-content:center}
  .ref-tiers > .ref-tier{flex:0 0 calc(33.333% - 10px);max-width:calc(33.333% - 10px);box-sizing:border-box}
}
@media (max-width: 720px){
  .ref-tiers > .ref-tier{flex:0 0 calc(50% - 7px);max-width:calc(50% - 7px)}
}

/* ---------- empty leaderboard ---------- */
.lb-empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:44px 24px 42px;background:radial-gradient(ellipse at 50% 15%,rgba(232,178,74,0.12),transparent 60%)}
.lb-empty-ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#f7d98a;border:1px solid rgba(232,178,74,0.5);background:rgba(0,0,0,0.35);box-shadow:0 0 26px rgba(232,178,74,0.18)}
.lb-empty-t{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:24px;color:#fbf1dc}
.lb-empty-state p{margin:0;max-width:460px;font-size:15px;line-height:1.55;color:#b7a488}
@media (max-width: 720px){ .lb-empty-t{font-size:19px} .lb-empty-state{padding:32px 16px} }

/* search hint */
.lb-search-hint{margin:-8px auto 0;max-width:640px;width:100%;text-align:center;font-size:13px;line-height:1.5;color:#9c8a6e}
.lb-search-hint b{color:#e2d3b6;font-weight:700}
.lb-search-hint code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#f7d98a;background:rgba(0,0,0,0.35);border:1px solid rgba(232,178,74,0.25);border-radius:5px;padding:1px 5px}
/* season reward cards: gentle float, staggered */
@keyframes prizeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.glb-prize{animation:prizeFloat 3.6s ease-in-out infinite;will-change:transform}
.glb-prize-2{animation-delay:-1.2s}
.glb-prize-1{animation-delay:0s;animation-duration:3.2s}
.glb-prize-3{animation-delay:-2.4s}
.glb-prize-1{box-shadow:0 0 40px rgba(232,178,74,0.28),0 18px 30px rgba(0,0,0,0.35)}
@media (prefers-reduced-motion: reduce){ .glb-prize{animation:none} }

/* navbar: Discord next to Play Now */
.nav-discord{display:inline-flex;align-items:center;gap:8px}
@media (min-width: 1081px) and (max-width: 1280px){ .nav-discord span{display:none} .nav-discord{padding:12px 13px !important} }
@media (max-width: 1080px){
  .nav-links .nav-discord{width:100% !important;min-width:0 !important;justify-content:center;margin-top:14px !important;padding:11px 14px !important;font-size:15px !important;align-self:stretch}
  .nav-links .nav-discord + .btn{margin-top:8px !important}
  .nav-links .nav-discord span{display:inline}
}
/* mobile menu: Play Now first, Join Community under it */
@media (max-width: 1080px){
  .nav-links > a.btn-gold{order:10;margin-top:14px !important}
  .nav-links > a.nav-discord{order:11;margin-top:8px !important}
}
/* ---------- navbar brand: game icon in a glowing gold ring + the real wordmark ---------- */
.brand{position:relative}
.brand-badge{position:relative;width:48px;height:48px;border-radius:12px;padding:2px;flex-shrink:0;background:linear-gradient(160deg,#fff3c4,#e8b24a 40%,#7a4f1c);box-shadow:0 0 0 1px rgba(0,0,0,0.6),0 0 16px rgba(232,178,74,0.35);transition:box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.brand-badge img{display:block;width:100% !important;height:100% !important;border-radius:10px !important;object-fit:cover}
.brand-badge::after{content:"";position:absolute;inset:2px;border-radius:10px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,0.45) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;animation:brandShine 5s ease-in-out infinite;pointer-events:none}
@keyframes brandShine{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
.brand-logo{height:54px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.85)) drop-shadow(0 0 10px rgba(232,178,74,0.18));transition:filter .35s,transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:left center}
.brand:hover .brand-badge{box-shadow:0 0 0 1px rgba(0,0,0,0.6),0 0 24px rgba(232,178,74,0.6);transform:rotate(-4deg) scale(1.04)}
.brand:hover .brand-logo{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.85)) drop-shadow(0 0 16px rgba(232,178,74,0.45));transform:scale(1.04)}
.brand-text{display:none !important}
@media (max-width: 720px){ .brand-badge{width:42px;height:42px;border-radius:11px} .brand-logo{height:46px} .brand{gap:10px !important} }
@media (prefers-reduced-motion: reduce){ .brand-badge::after{animation:none} }
/* brand hover: keep both pieces on their own GPU layer all the time and use the same transform
   function list in both states — no re-rasterisation "snap" when the hover transition ends */
.brand-badge{transform:translateZ(0) rotate(0deg) scale(1);will-change:transform;backface-visibility:hidden;transition:box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-badge{transform:translateZ(0) rotate(-4deg) scale(1.04)}
.brand-logo{transform:translateZ(0) scale(1);will-change:transform,filter;backface-visibility:hidden;transition:filter .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-logo{transform:translateZ(0) scale(1.04)}
/* navbar: use the full width — brand hugs the left edge, Play Now the right edge */
#site-header > nav{max-width:none !important;width:auto !important;margin:0 !important;padding:0 28px !important}
@media (max-width: 1080px){ #site-header > nav{padding:0 18px !important} }
@media (max-width: 720px){ #site-header > nav{padding:0 14px !important} }

/* ---------- leaderboard search: loading state ---------- */
@keyframes lbSpin{to{transform:rotate(360deg)}}
@keyframes lbShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.lb-spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:lbSpin .7s linear infinite;vertical-align:-2px}
.lb-search .btn.is-busy{display:inline-flex;align-items:center;gap:8px;opacity:.9;cursor:progress}
.lb-found.lb-loading p{color:#b7a488}
.lb-skel{display:grid;grid-template-columns:44px minmax(0,1fr) 80px;gap:14px;align-items:center;padding:14px 18px;border-radius:12px;border:1px solid rgba(232,178,74,0.2);background:rgba(0,0,0,0.25)}
.lb-skel span,.lb-skel i{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,0.05) 25%,rgba(255,236,190,0.14) 50%,rgba(255,255,255,0.05) 75%);background-size:200% 100%;animation:lbShimmer 1.2s ease-in-out infinite}
.lb-skel-av{width:40px;height:40px;border-radius:50% !important}
.lb-skel-l{background:none !important;animation:none !important;display:flex !important;flex-direction:column;gap:6px}
.lb-skel-l i{height:12px;width:55%}.lb-skel-l i + i{width:35%;height:10px}
.lb-skel-v{height:22px;justify-self:end;width:56px}
@media (prefers-reduced-motion: reduce){ .lb-spin,.lb-skel span,.lb-skel i{animation-duration:2.5s} }

.lb-results .lb-row + .lb-row{border-top:1px solid rgba(232,178,74,0.14)}
/* ---------- search result: Profile button ---------- */
.lb-res{display:flex;align-items:center;gap:10px;padding-right:12px}
.lb-res + .lb-res{border-top:1px solid rgba(232,178,74,0.14)}
.lb-res > .lb-row{flex:1;min-width:0;border:0 !important}
.pf-open{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font:700 13px/1 inherit;font-family:inherit;letter-spacing:.5px;color:#e8f3f1;cursor:pointer;padding:9px 14px;border-radius:8px;border:1px solid #a89a74;background:linear-gradient(180deg,#2f5560,#1a3036);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 2px 6px rgba(0,0,0,0.4);transition:filter .2s,transform .2s}
.pf-open:hover{filter:brightness(1.18);transform:translateY(-1px)}
.pf-open.pf-none{background:none;border-color:transparent;box-shadow:none;color:#6d5f4a;cursor:default;width:88px;justify-content:center}
@media (max-width: 720px){ .pf-open span{display:none} .pf-open{padding:9px 10px} .lb-res{padding-right:8px;gap:6px} .pf-open.pf-none{width:38px} }

/* ---------- player profile popup — styled after the in-game "Profile Setting" window ---------- */
html.pf-lock-scroll{overflow:hidden}
.pf-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(6,4,2,0.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.pf-overlay.open{opacity:1}
.pf-overlay[hidden]{display:none}
.pf-win{position:relative;width:min(1000px,100%);max-height:calc(100vh - 36px);display:flex;flex-direction:column;border-radius:6px;color:#d9ccb0;font-family:Cinzel,Georgia,serif;
  background:radial-gradient(ellipse at 30% 0%,rgba(255,235,190,0.07),transparent 55%),radial-gradient(ellipse at 80% 100%,rgba(0,0,0,0.45),transparent 60%),repeating-linear-gradient(97deg,rgba(255,255,255,0.012) 0 2px,transparent 2px 5px),linear-gradient(180deg,#3a3126,#2a231b 45%,#221c15);
  border:2px solid #8c7651;box-shadow:0 0 0 1px #1a130c,0 0 0 5px #3d3222,0 0 0 6px #9c8660,0 30px 80px rgba(0,0,0,0.75),inset 0 0 60px rgba(0,0,0,0.55);transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pf-overlay.open .pf-win{transform:none}
.pf-top{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 4px}
.pf-h1{font-size:36px;letter-spacing:4px;text-transform:uppercase;color:#cbbd9c;text-shadow:0 2px 0 #000}
.pf-x{width:40px;height:40px;border-radius:4px;border:2px solid #9c6a55;background:linear-gradient(180deg,#6a2626,#3d1414);color:#f0d6c8;font-size:20px;cursor:pointer;box-shadow:inset 0 0 8px rgba(0,0,0,0.6)}
.pf-x:hover{filter:brightness(1.25)}
.pf-tabs{display:flex;gap:12px;padding:6px 18px 12px;flex-wrap:wrap}
.pf-tab{flex:1;min-width:120px;padding:10px 8px;font-family:Cinzel,Georgia,serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#c9d6d3;cursor:pointer;border-radius:3px;border:1px solid #8c7a55;
  background:linear-gradient(180deg,#2c4f58,#1b333a);box-shadow:inset 0 0 10px rgba(0,0,0,0.55),0 0 0 2px #2a2117}
.pf-tab:hover{filter:brightness(1.15)}
.pf-tab.on{color:#fff;border-color:#e6d6a8;background:linear-gradient(180deg,#3c6f7b,#23444d);box-shadow:inset 0 0 8px rgba(0,0,0,0.35),0 0 0 2px #2a2117,0 0 14px rgba(120,200,210,0.25)}
.pf-body{overflow-y:auto;padding:4px 22px 22px;min-height:360px}
.pf-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:320px;font-size:18px;color:#b8a888}
.pf-h2{display:flex;align-items:baseline;justify-content:center;gap:16px;position:relative;margin:10px 0 12px;font-size:26px;letter-spacing:2px;text-transform:uppercase;color:#e3d6b8}
.pf-h2::after{content:"";position:absolute;left:50%;bottom:-6px;width:min(480px,70%);height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#b9a57c,transparent)}
.pf-h2 em{position:absolute;right:0;font-style:normal;font-size:18px;color:#cbbd9c;letter-spacing:1px;text-transform:none}
.pf-card{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:center;max-width:720px;margin:0 auto 18px;padding:10px;border:2px solid #7f6d4c;background:rgba(0,0,0,0.25);box-shadow:inset 0 0 20px rgba(0,0,0,0.5)}
.pf-av{position:relative;width:120px;height:120px;border:2px solid #6c5c40;background:linear-gradient(180deg,#8a8378,#4c463d)}
.pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-lv{position:absolute;right:6px;bottom:4px;font-size:13px;color:#fff;text-shadow:0 1px 2px #000}
.pf-name{font-size:21px;color:#e6dac0;background:rgba(0,0,0,0.25);padding:3px 8px}
.pf-title{font-size:19px;padding:4px 8px}
.pf-title .ttext,.pf-tt-name .ttext,.pf-prev-name .ttext{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pf-counts{display:flex;gap:26px;flex-wrap:wrap;padding:6px 8px 0;font-size:20px;color:#d9ccb0}
.pf-counts b{font-weight:400}
.pf-rank{align-self:start;padding:6px 8px;font-size:26px;letter-spacing:1px;color:#8d877c}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;max-width:960px;margin:0 auto 18px}
.pf-cell{display:flex;justify-content:space-between;gap:10px;padding:12px 10px;border-top:2px solid #8a7a5c;border-bottom:2px solid #8a7a5c;background:rgba(0,0,0,0.28);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5)}
.pf-cell span{font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:#c2b597}
.pf-cell b{font-weight:400;font-size:17px;color:#e6dac0;white-space:nowrap}
.pf-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-panel{padding:12px 16px 16px;border:2px solid #6f5f43;background:rgba(0,0,0,0.3);box-shadow:inset 0 0 20px rgba(0,0,0,0.5)}
.pf-panel.pf-dim{opacity:.7}
.pf-h3{font-size:22px;letter-spacing:1px;text-transform:uppercase;color:#d8cbae;padding-bottom:6px;margin-bottom:10px;border-bottom:1px solid #6f5f43}
.pf-status{margin:0;font-size:20px;color:#9d917a}
.pf-soon{margin:0;text-align:center;font-size:18px;letter-spacing:1px;text-transform:uppercase;color:#d8cbae}
.pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;padding:14px 22px;border:2px solid #7f6d4c;background:rgba(0,0,0,0.22);box-shadow:inset 0 0 26px rgba(0,0,0,0.55)}
.pf-col .pf-h3{font-size:24px;border-bottom:2px solid #7c6b4c}
.pf-li{display:flex;justify-content:space-between;gap:12px;padding:11px 10px;border-bottom:1px solid rgba(160,140,100,0.3)}
.pf-li span{font-size:16px;text-transform:uppercase;letter-spacing:.5px;color:#cbbd9c}
.pf-li b{font-weight:400;font-size:17px;color:#e6dac0;text-align:right}
.pf-tt{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;border:2px solid #7f6d4c;background:rgba(0,0,0,0.22);box-shadow:inset 0 0 26px rgba(0,0,0,0.55)}
.pf-tt-list{padding:10px 14px 14px;border-right:1px solid #6f5f43}
.pf-tt-head{display:flex;align-items:baseline;justify-content:space-between;padding:4px 4px 8px;margin-bottom:8px;border-bottom:1px solid #6f5f43;font-size:24px;text-transform:uppercase;color:#d8cbae}
.pf-tt-head em{font-style:normal;color:#8d8270}
.pf-tt-head.pf-c{justify-content:center}
.pf-tt-scroll{max-height:380px;overflow-y:auto;padding-right:6px}
.pf-tt-item{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;text-align:left;margin-bottom:8px;padding:9px 12px;font-family:inherit;color:inherit;cursor:pointer;border:0;border-top:2px solid #8a7a5c;border-bottom:2px solid #8a7a5c;background:rgba(0,0,0,0.3)}
.pf-tt-item:hover,.pf-tt-item.sel{background:rgba(120,95,55,0.28)}
.pf-tt-item.locked{opacity:.45}
.pf-tt-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-tt-name{font-size:18px;color:#d0c3a6}
.pf-tt-l small{font-family:Georgia,serif;font-size:13px;color:#a2957c}
.pf-tt-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.pf-tt-r em{font-style:normal;font-size:15px;letter-spacing:1px}
.pf-eq{font-style:normal;font-size:12px;color:#5ad27a}
.pf-lock{font-style:normal;font-size:11px;color:#8d8270}
.pf-tt-prev{padding:10px 16px 16px}
.pf-prev-empty{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;padding:40px 10px}
.pf-prev-empty b{font-weight:400;font-size:22px;color:#b8aa8c}
.pf-prev-empty span{font-size:26px;line-height:1.35;color:#a79a80}
.pf-prev-body{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:40px 10px}
.pf-prev-name{font-size:30px}
.pf-prev-rar{font-size:16px;letter-spacing:2px}
.pf-prev-body p{margin:0;font-family:Georgia,serif;font-size:16px;color:#b8aa8c}
.pf-prev-state{margin-top:8px;padding:4px 14px;border:1px solid #8a7a5c;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#d8cbae}
@media (max-width: 760px){
  .pf-overlay{padding:8px}
  .pf-h1{font-size:26px}
  .pf-tabs{gap:6px;padding:4px 10px 10px}.pf-tab{min-width:0;font-size:11px;padding:9px 4px}
  .pf-body{padding:4px 12px 16px}
  .pf-h2{font-size:20px}.pf-h2 em{position:static;font-size:13px}
  .pf-card{grid-template-columns:84px minmax(0,1fr);gap:10px}.pf-av{width:84px;height:84px}.pf-rank{grid-column:1 / -1;font-size:18px;padding:0 4px}
  .pf-name{font-size:16px}.pf-title{font-size:15px}.pf-counts{gap:12px;font-size:14px}
  .pf-grid{grid-template-columns:1fr 1fr;gap:8px}.pf-cell{padding:9px 8px}.pf-cell span{font-size:11px}.pf-cell b{font-size:13px}
  .pf-duo,.pf-cols,.pf-tt{grid-template-columns:1fr}
  .pf-cols{padding:10px 12px}.pf-li span{font-size:13px}.pf-li b{font-size:14px}
  .pf-tt-list{border-right:0;border-bottom:1px solid #6f5f43}.pf-prev-empty span{font-size:18px}
}
/* hero Play button shine: cover the full height (the base .btn::after sets height:100%) and sweep all the way across */
.hero-cta::after{top:-30% !important;bottom:auto !important;height:160% !important;width:42% !important;left:-75%;transition:none !important;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.18) 30%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0.18) 70%,rgba(255,255,255,0) 100%) !important;animation:ctaShine2 4.2s ease-in-out infinite !important}
@keyframes ctaShine2{0%,52%{left:-75%}82%,100%{left:135%}}
.hero-cta:hover::after{left:auto}
@media (prefers-reduced-motion: reduce){ .hero-cta::after{animation:none !important} }
/* hero Play button: shine sweeps on hover only — same as the other buttons (e.g. Join Community) */
.hero-cta::after{animation:none !important;top:0 !important;height:100% !important;width:45% !important;left:-70% !important;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,0.45),rgba(255,255,255,0)) !important;transform:skewX(-20deg);transition:left .65s ease !important}
.hero-cta:hover::after{left:135% !important}
/* mobile hero: text stays readable longer while scrolling (fades later and moves up less) */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference){
  .hero-content{
    transform:translate3d(0,calc(var(--hs) * -40px),0) !important;
    opacity:calc(1.6 - var(--hs) * 1.6) !important;
  }
  #top::before{
    transform:translate3d(calc(var(--mx) * -14px),calc(var(--my) * -10px + var(--hs) * 40px),0) scale(calc(1.04 + var(--hs) * .06)) !important;
  }
}