/* Game artwork carries the decoration; controls stay clear and quiet. */
.hero-modes{display:flex;gap:20px;max-width:440px;margin:-5px 0 28px}
.hero-modes a{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;padding:9px 8px 8px;border:1px solid #36405a;border-radius:14px;background:#12182c80;transition:background .3s,border-color .3s}
.hero-modes img{width:170px;aspect-ratio:2.4;object-fit:contain;transition:transform .4s var(--ease-out)}
.hero-modes span{font-size:.7rem;color:var(--muted);text-align:center;margin-top:7px;line-height:1.5}
.hero-modes a:hover{border-color:var(--gold);background:#20243f}
.hero-modes a:hover img{transform:translateY(-3px) scale(1.04)}
.modes-section{padding-block:80px 95px;scroll-margin-top:30px}
.modes-heading{text-align:center;margin-bottom:36px}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.mode-card{min-width:0;position:relative;isolation:isolate;border:1px solid #3c4b71;border-radius:22px;background:radial-gradient(ellipse at 50% 37%,#18678540,transparent 65%),#11182f;overflow:hidden;scroll-margin-top:30px}
.mode-siege{border-color:#715335;background:radial-gradient(ellipse at 50% 37%,#b9691638,transparent 65%),#201725}
.mode-card-heading{text-align:center;padding:25px 20px 22px}
.mode-access{display:inline-block;border:1px solid #55d8ff40;border-radius:30px;padding:4px 12px;font-size:.75rem;color:var(--cyan);font-weight:650;line-height:1.6}
.mode-siege .mode-access{color:var(--gold);border-color:#ffce3240}
.mode-logo{width:300px;aspect-ratio:2.4;object-fit:contain;margin:20px auto 13px;filter:drop-shadow(0 8px 15px #0006)}
.mode-card-heading>p{margin:0;font:700 1.6rem/1.2 Fredoka,sans-serif}
.mode-screenshot{width:55%;max-width:250px;height:auto;margin:0 auto;border:1px solid #6e85a4;border-radius:15px;box-shadow:0 20px 45px #0007;transition:transform .6s var(--ease-out)}
.mode-summary{padding:26px 20px 28px;text-align:center}
.mode-summary>p{margin:0 0 14px;color:var(--muted);font-size:.95rem}
.mode-release{font-size:.8rem;color:#e9ba8e}
.mode-summary .text-link{font-size:.85rem}
.mode-summary .text-link span{margin-left:14px}
.mode-card:target{border-color:var(--gold)}
@media(hover:hover) and (pointer:fine){.mode-card:hover .mode-screenshot{transform:translateY(-5px) rotate(-1deg)}
.mode-siege:hover .mode-screenshot{transform:translateY(-5px) rotate(1deg)}}
@media(max-width:700px){.modes-section{padding-block:55px 65px}
.mode-grid{gap:20px}
.mode-card-heading{padding:20px 12px}
.mode-logo{width:100%;margin-block:16px 12px}
.mode-card-heading>p{font-size:1.25rem}
.mode-screenshot{width:74%}
.mode-summary{padding:22px 14px}
.mode-summary>p{font-size:.85rem}
.hero-modes{gap:12px}
.hero-modes span{font-size:.7rem}}
@media(max-width:520px){.mode-grid{grid-template-columns:1fr}
.mode-logo{width:270px}
.mode-card-heading>p{font-size:1.65rem}
.mode-screenshot{width:65%;max-width:235px}
.hero-modes{margin-bottom:24px}
.hero-modes a{padding:10px 4px}
.hero-modes img{width:100%}
.hero-modes span{max-width:130px}
.mode-summary>p{font-size:.9rem}
.modes-heading h2{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){.hero-modes a:hover img,.mode-card:hover .mode-screenshot{transform:none}}
.game-center-chip{display:inline-flex;gap:10px;align-items:center;margin-top:18px;font-size:.8rem;font-weight:650;line-height:1.4}
.game-center-chip img{width:32px;height:32px;object-fit:contain}
.game-center-chip small{display:block;color:var(--muted);font-size:.7rem;font-weight:400}
.steps article{align-items:center}
.step-art{width:70px;height:70px;object-fit:contain;flex-shrink:0}
.steps p{margin-top:8px}
.game-center-section{display:flex;gap:60px;align-items:center;justify-content:space-between;padding-block:40px 80px}
.gc-brand{display:flex;align-items:center;gap:20px}
.gc-brand>img{width:68px;height:68px;object-fit:contain;flex-shrink:0}
.gc-brand .eyebrow{margin-bottom:10px}
.gc-brand h2{font-size:2.5rem}
.gc-brand p:last-child{color:var(--muted);margin-bottom:0}
.achievement-gallery{display:flex;gap:18px}
.achievement-gallery figure{margin:0;text-align:center}
.achievement-gallery img{width:105px;max-width:100%;border-radius:20%;transition:transform .35s var(--ease-out)}
.achievement-gallery img:hover{transform:translateY(-6px) rotate(-3deg)}
.achievement-gallery figcaption{font-size:.75rem;color:var(--muted)}
@media(max-width:950px){.game-center-section{flex-direction:column;align-items:flex-start;gap:30px}
.achievement-gallery{align-self:center;gap:30px}
.achievement-gallery img{width:120px}}
@media(max-width:620px){.gc-brand{gap:14px}
.gc-brand>img{width:48px;height:48px}
.gc-brand h2{font-size:2rem}
.gc-brand p:last-child{font-size:.875rem}
.achievement-gallery{gap:15px}
.achievement-gallery img{width:90px}
.achievement-gallery figcaption{font-size:.7rem}
.game-center-section{padding-bottom:55px}
.step-art{width:55px;height:55px}
.steps article{gap:16px}}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
[hidden]{display:none!important}
.hero-decorator{position:absolute;width:110px;right:2%;top:12%;z-index:2;pointer-events:none;rotate:15deg;filter:drop-shadow(0 0 22px #845aff50);animation:enter-up 1.2s var(--ease-out) .6s both}
.power-decor{display:flex;align-items:center;gap:0;margin-top:34px;max-width:340px}
.power-decor img{width:33%;object-fit:contain;filter:drop-shadow(0 12px 25px #6658ff24)}
.power-decor img:nth-child(1){rotate:-12deg}
.power-decor img:nth-child(2){translate:0 -12px}
.power-decor img:nth-child(3){rotate:12deg}
.power-showcase{display:grid;grid-template-columns:1.2fr .8fr;gap:90px;align-items:center;padding-block:10px 110px}
.power-showcase-copy>p:not(.eyebrow){color:var(--muted);margin-block:24px}
.power-tabs{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.power-tabs button{display:flex;align-items:center;gap:18px;text-align:left;background:transparent;border:1px solid transparent;border-bottom-color:var(--line);border-radius:12px;padding:12px 14px;transition:background .3s,border-color .3s}
.power-tabs button>img{width:70px;height:70px;object-fit:contain;transition:transform .35s var(--ease-out)}
.power-tabs button>span:nth-child(2){flex:1}
.power-tabs button>span:last-child{font-size:1.4rem;color:var(--gold)}
.power-tabs strong{display:block;font:700 1.5rem Fredoka,sans-serif}
.power-tabs small{display:block;font-size:.85rem;color:var(--muted);margin-top:5px}
.power-tabs button[aria-pressed=true]{background:#1c2040;border-color:#605583}
.power-tabs button:hover img{transform:scale(1.12) rotate(-5deg)}
.store-shot{margin:0;justify-self:center;max-width:285px;position:relative;rotate:3deg}
.store-shot::before{content:"";position:absolute;inset:10% -15%;z-index:-1;background:radial-gradient(ellipse,#8e3fff25,transparent 70%)}
.store-shot>img{width:100%;border-radius:18px;border:1px solid #786894;box-shadow:0 25px 60px #0008}
.store-shot figcaption{font-size:.75rem}
.last-call>.trophy-decorator{position:absolute;width:145px;height:auto;object-fit:contain;left:8%;top:85px;rotate:-12deg;margin:0;filter:drop-shadow(0 16px 30px #ffce3218)}
@media(max-width:950px){.power-showcase{gap:50px}
.hero-decorator{width:80px;right:1%;top:10%}
.last-call>.trophy-decorator{left:3%;width:110px}}
@media(max-width:700px){.power-showcase{grid-template-columns:1fr;gap:35px;padding-bottom:80px}
.power-showcase h2{font-size:2.7rem}
.power-showcase-copy{min-width:0}
.store-shot{width:70%;max-width:285px}
.power-tabs button{gap:10px;padding:10px}
.power-tabs small{font-size:.8rem}
.power-tabs button>img{width:58px;height:58px}
.power-decor{max-width:280px}
.last-call>.trophy-decorator{width:76px;left:7%;top:50px}
.hero-decorator{width:95px;right:6%;top:auto;bottom:160px}}
@media(prefers-reduced-motion:reduce){.power-tabs button:hover img{transform:none}}