@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --sd3b-primary: #9400d3;
  --sd3b-secondary: #9370db;
  --sd3b-accent: #ba55d3;
  --sd3b-bg: #151217;
  --sd3b-surface: #262626;
  --sd3b-surface-soft: #322b37;
  --sd3b-text: #fafad2;
  --sd3b-muted: #c9c4ce;
  --sd3b-line: rgba(250, 250, 210, .14);
  --sd3b-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--sd3b-text); background: radial-gradient(circle at 50% 0, #35213f 0, var(--sd3b-bg) 34rem); font: 400 1.5rem/1.5rem Inter, Arial, sans-serif; }
body.sd3b-menu-lock { overflow: hidden; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.sd3b-container { width: min(100% - 2.4rem, 112rem); margin-inline: auto; }
.sd3b-wrapper { padding-block: 2.4rem; }
.sd3b-header { position: fixed; inset: 0 0 auto; z-index: 1000; border-bottom: .1rem solid var(--sd3b-line); background: rgba(21, 18, 23, .94); backdrop-filter: blur(1.4rem); }
.sd3b-nav { min-height: 6.4rem; display: flex; align-items: center; gap: .8rem; }
.sd3b-brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; font: 700 1.8rem/1 Cinzel, serif; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sd3b-logo { width: 3.2rem; height: 3.2rem; border-radius: 50%; box-shadow: 0 0 0 .2rem rgba(186, 85, 211, .35); }
.sd3b-actions { display: flex; gap: .6rem; }
.sd3b-btn { min-height: 4.4rem; padding: 0 1.4rem; border: .1rem solid transparent; border-radius: 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; color: #fff; background: linear-gradient(135deg, var(--sd3b-primary), var(--sd3b-accent)); font-weight: 800; cursor: pointer; box-shadow: 0 .6rem 1.6rem rgba(148, 0, 211, .24); transition: transform .2s, filter .2s; }
.sd3b-btn:hover, .sd3b-btn:focus-visible { transform: translateY(-.2rem); filter: brightness(1.16); }
.sd3b-btn-outline { color: var(--sd3b-text); border-color: var(--sd3b-secondary); background: transparent; box-shadow: none; }
.sd3b-menu-btn { width: 4.4rem; padding: 0; border: 0; border-radius: 1rem; color: var(--sd3b-text); background: var(--sd3b-surface-soft); cursor: pointer; font-size: 2.2rem; }
.sd3b-desktop-links { display: none; align-items: center; gap: 2rem; font-weight: 700; }
.sd3b-desktop-links a:hover { color: var(--sd3b-accent); }
.sd3b-mobile-menu { position: fixed; inset: 6.4rem 0 0; z-index: 9999; padding: 1.6rem; visibility: hidden; opacity: 0; transform: translateY(-1rem); background: rgba(21, 18, 23, .98); transition: .22s ease; }
.sd3b-mobile-menu.sd3b-menu-open { visibility: visible; opacity: 1; transform: none; }
.sd3b-menu-panel { max-width: 43rem; margin: 0 auto; padding: 1.2rem; border: .1rem solid var(--sd3b-line); border-radius: 1.6rem; background: var(--sd3b-surface); box-shadow: var(--sd3b-shadow); }
.sd3b-menu-panel a { min-height: 4.8rem; display: flex; align-items: center; gap: 1rem; padding: 0 1.2rem; border-bottom: .1rem solid var(--sd3b-line); font-weight: 700; }
.sd3b-menu-panel a:last-child { border: 0; }
.sd3b-menu-panel i, .sd3b-menu-panel ion-icon { width: 2.4rem; color: var(--sd3b-accent); font-size: 2.2rem; }

.sd3b-main { padding-top: 6.4rem; }
.sd3b-hero { padding-top: 1.4rem; }
.sd3b-carousel { position: relative; aspect-ratio: 16/8.4; overflow: hidden; border: .1rem solid var(--sd3b-line); border-radius: 1.8rem; background: var(--sd3b-surface); box-shadow: var(--sd3b-shadow); }
.sd3b-slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .6s; cursor: pointer; }
.sd3b-slide-active { visibility: visible; opacity: 1; }
.sd3b-slide img { width: 100%; height: 100%; object-fit: cover; }
.sd3b-slide::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.sd3b-slide-copy { position: absolute; z-index: 2; inset: auto 1.6rem 1.6rem; }
.sd3b-slide-copy strong { display: block; font: 700 clamp(2rem, 6vw, 3.6rem)/1.1 Cinzel, serif; }
.sd3b-slide-copy span { display: block; margin-top: .5rem; color: #fff; line-height: 1.4; }
.sd3b-dots { position: absolute; z-index: 3; right: 1.2rem; bottom: 1.2rem; display: flex; gap: .6rem; }
.sd3b-dot { width: 2.4rem; height: 1rem; padding: 0; border: 0; border-radius: 1rem; background: rgba(255,255,255,.45); cursor: pointer; }
.sd3b-dot-active { background: var(--sd3b-text); }
.sd3b-intro { padding: 2.6rem 0 1rem; text-align: center; }
.sd3b-eyebrow { margin: 0 0 .8rem; color: var(--sd3b-accent); font-size: 1.2rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { font-family: Cinzel, serif; line-height: 1.2; }
h1 { margin: 0; font-size: clamp(2.8rem, 8vw, 5.2rem); }
h2 { margin: 0; font-size: clamp(2.2rem, 6vw, 3.4rem); }
h3 { margin: 0; font-size: 1.7rem; }
.sd3b-lead { max-width: 76rem; margin: 1.2rem auto 0; color: var(--sd3b-muted); line-height: 2.3rem; }
.sd3b-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.8rem; }
.sd3b-section { padding-block: 2.8rem; scroll-margin-top: 7.4rem; }
.sd3b-section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.4rem; }
.sd3b-section-head p { margin: .4rem 0 0; color: var(--sd3b-muted); line-height: 2rem; }
.sd3b-count { padding: .5rem .9rem; border-radius: 2rem; color: var(--sd3b-text); background: rgba(148,0,211,.3); font-weight: 800; white-space: nowrap; }
.sd3b-grid { display: grid; gap: 1rem; }
.sd3b-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd3b-card { border: .1rem solid var(--sd3b-line); border-radius: 1.4rem; background: linear-gradient(145deg, #302a33, #211e23); box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.2); }
.sd3b-game-card { min-width: 0; overflow: hidden; cursor: pointer; transition: transform .2s, border-color .2s; }
.sd3b-game-card:hover { transform: translateY(-.3rem); border-color: var(--sd3b-accent); }
.sd3b-game-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #1b181d; }
.sd3b-game-name { min-height: 4.8rem; display: flex; align-items: center; justify-content: center; padding: .6rem; text-align: center; color: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.sd3b-info-grid { grid-template-columns: 1fr; }
.sd3b-info-card { padding: 1.8rem; }
.sd3b-info-card i, .sd3b-info-card ion-icon, .sd3b-info-card .material-icons { color: var(--sd3b-accent); font-size: 2.8rem; }
.sd3b-info-card p { margin: 1rem 0 0; color: var(--sd3b-muted); line-height: 2.2rem; }
.sd3b-text-link { display: inline-block; margin-top: 1.2rem; color: #ead0ff; font-weight: 800; text-decoration: underline; cursor: pointer; }
.sd3b-steps { counter-reset: sd3b-step; }
.sd3b-step { position: relative; padding: 1.8rem 1.8rem 1.8rem 6rem; }
.sd3b-step::before { counter-increment: sd3b-step; content: counter(sd3b-step); position: absolute; left: 1.5rem; top: 1.5rem; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--sd3b-primary); font-weight: 800; }
.sd3b-step p { margin: .7rem 0 0; color: var(--sd3b-muted); line-height: 2.1rem; }
.sd3b-metrics { grid-template-columns: repeat(2, 1fr); }
.sd3b-metric { padding: 1.6rem; text-align: center; }
.sd3b-metric strong { display: block; color: var(--sd3b-accent); font: 700 2.4rem/1 Cinzel, serif; }
.sd3b-metric span { display: block; margin-top: .8rem; color: var(--sd3b-muted); line-height: 1.8rem; }
.sd3b-review { padding: 1.8rem; }
.sd3b-stars { color: #ffd45f; letter-spacing: .15em; }
.sd3b-review blockquote { margin: 1rem 0; color: var(--sd3b-muted); line-height: 2.2rem; }
.sd3b-review cite { font-style: normal; font-weight: 800; }
.sd3b-payment-list { display: flex; flex-wrap: wrap; gap: .8rem; }
.sd3b-payment { min-height: 4.4rem; padding: 0 1.2rem; display: inline-flex; align-items: center; gap: .7rem; border: .1rem solid var(--sd3b-line); border-radius: 1rem; background: var(--sd3b-surface); font-weight: 700; }
.sd3b-banner { padding: 2.4rem; border: .1rem solid rgba(250,250,210,.22); border-radius: 1.8rem; text-align: center; background: linear-gradient(135deg, rgba(148,0,211,.72), rgba(38,38,38,.95)); box-shadow: var(--sd3b-shadow); }
.sd3b-banner p { max-width: 65rem; margin: 1rem auto 0; line-height: 2.2rem; }
.sd3b-faq details { border-bottom: .1rem solid var(--sd3b-line); }
.sd3b-faq summary { min-height: 5.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 800; }
.sd3b-faq p { margin: 0 0 1.5rem; color: var(--sd3b-muted); line-height: 2.2rem; }

.sd3b-footer { padding: 3rem 0 8rem; border-top: .1rem solid var(--sd3b-line); background: #100e11; }
.sd3b-footer-brand { font: 700 2.2rem/1 Cinzel, serif; }
.sd3b-footer p { color: var(--sd3b-muted); line-height: 2.2rem; }
.sd3b-footer-links { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0; }
.sd3b-footer-links a, .sd3b-footer-links button { min-height: 4.4rem; padding: 0 1.2rem; border: .1rem solid var(--sd3b-line); border-radius: 1rem; color: var(--sd3b-text); background: var(--sd3b-surface); cursor: pointer; font-weight: 700; }
.sd3b-copyright { padding-top: 1.4rem; border-top: .1rem solid var(--sd3b-line); font-size: 1.2rem; }
.sd3b-bottom-nav { position: fixed; z-index: 1000; inset: auto 0 0; height: 6.2rem; display: flex; justify-content: space-around; border-top: .1rem solid rgba(250,250,210,.2); background: #241d29; box-shadow: 0 -1rem 2.4rem rgba(0,0,0,.34); }
.sd3b-bottom-item { min-width: 6rem; min-height: 6rem; padding: .5rem .4rem; border: 0; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: var(--sd3b-muted); background: transparent; cursor: pointer; font-size: 1.05rem; line-height: 1; transition: color .2s, transform .2s; }
.sd3b-bottom-item i, .sd3b-bottom-item ion-icon, .sd3b-bottom-item .material-icons { font-size: 2.4rem; line-height: 1; }
.sd3b-bottom-item:active { transform: scale(.9); }
.sd3b-bottom-active, .sd3b-bottom-item:hover { color: var(--sd3b-text); }
.sd3b-bottom-active i { filter: drop-shadow(0 0 .5rem var(--sd3b-accent)); }

@media (max-width: 430px) {
  .sd3b-container { width: min(100% - 1.6rem, 43rem); }
  .sd3b-nav { gap: .5rem; }
  .sd3b-brand span { font-size: 1.5rem; }
  .sd3b-actions .sd3b-btn { min-height: 4.4rem; padding: 0 .9rem; font-size: 1.2rem; }
  .sd3b-carousel { aspect-ratio: 16/9.5; border-radius: 1.4rem; }
  .sd3b-slide-copy span { display: none; }
  .sd3b-section { padding-block: 2.2rem; }
}

@media (max-width: 360px) {
  .sd3b-brand span { max-width: 5.4rem; overflow: hidden; text-overflow: ellipsis; }
  .sd3b-game-grid { gap: .7rem; }
  .sd3b-game-name { font-size: 1.05rem; }
}

@media (min-width: 560px) {
  .sd3b-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sd3b-info-grid { grid-template-columns: repeat(2, 1fr); }
  .sd3b-metrics { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .sd3b-main { padding-bottom: 8rem; }
}

@media (min-width: 769px) {
  .sd3b-bottom-nav { display: none; }
  .sd3b-footer { padding-bottom: 3rem; }
  .sd3b-menu-btn { display: none; }
  .sd3b-desktop-links { display: flex; }
  .sd3b-mobile-menu { display: none; }
  .sd3b-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sd3b-info-grid { grid-template-columns: repeat(3, 1fr); }
}