/* The site toggles .theme-dark on html/body; the default palette is light. */
.sg-page {
    --sg-bg: #fffefa;
    --sg-panel: #ffffff;
    --sg-gold: #805716;
    --sg-text: #282a23;
    --sg-secondary: #4c5043;
    --sg-muted: #646759;
    --sg-border: #dfd6c2;
    --sg-soft-border: #e8e5dc;
    --sg-accent-border: #c6a56c;
    --sg-accent-wash: #b58a3520;
    --sg-wash: #81765008;
    --sg-focus: #78530f;
    --sg-hero-base: #fffefa;
    --sg-hero-glow: #f0e7d2;
    --sg-nav-bg: #f4f0e5;
    --sg-stats-bg: #f8f4ea;
    --sg-note-bg: #f0f3e9;
    --sg-note-rule: #7c8a61;
    --sg-step-rule: #ba9a5f;
    --sg-panel-glow: #f1f3e8;
    --sg-shop-glow: #e7ddbc80;
    --sg-art-glow: #dbd3c0;
    --sg-example: #775621;
    --sg-loss-bg: #fcf0e8;
    --sg-loss-rule: #b77e55;
    --sg-shadow: #473c1712;
}

.theme-dark .sg-page {
    --sg-bg: #10110f;
    --sg-panel: #1a1b17;
    --sg-gold: #e7c17a;
    --sg-text: #f4f0e6;
    --sg-secondary: #c7caba;
    --sg-muted: #b9b9aa;
    --sg-border: #e7c17a2e;
    --sg-soft-border: #ffffff0d;
    --sg-accent-border: #e7c17a55;
    --sg-accent-wash: #e7c17a12;
    --sg-wash: #ffffff04;
    --sg-focus: #fff0c9;
    --sg-hero-base: #11120f;
    --sg-hero-glow: #303024;
    --sg-nav-bg: #1c1e18;
    --sg-stats-bg: #0002;
    --sg-note-bg: #c1cda009;
    --sg-note-rule: #a4b18d;
    --sg-step-rule: #6e6547;
    --sg-panel-glow: #202219;
    --sg-shop-glow: #50543745;
    --sg-art-glow: #444335;
    --sg-example: #d9c9a5;
    --sg-loss-bg: #ca9a7809;
    --sg-loss-rule: #ca9a78;
    --sg-shadow: #0002;
    color-scheme: dark;
}
.sg-page {
    background: var(--sg-bg);
    color: var(--sg-text);
    border: 1px solid var(--sg-border);
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    line-height: 1.95;
    margin-bottom: 24px;
    text-align: right;
    color-scheme: light;
}

.sg-page *, .sg-page *::before, .sg-page *::after { box-sizing: border-box; }
.sg-page h1, .sg-page h2, .sg-page h3, .sg-page p { margin: 0; color: inherit; }
.sg-page h1, .sg-page h2, .sg-page h3 { line-height: 1.55; font-weight: 800; }
.sg-page h1 { font-size: clamp(1.75rem, 4vw, 2.9rem); letter-spacing: -.04em; }
.sg-page h2 { font-size: clamp(1.3rem, 2.7vw, 1.85rem); }
.sg-page h3 { font-size: 1.05rem; }
.sg-page p { font-size: .96rem; }
.sg-page a { text-decoration: none; }
.sg-page a:focus-visible { outline: 3px solid var(--sg-focus); outline-offset: 5px; }
.sg-page img { display: block; max-width: 100%; }
.sg-page strong { font-weight: 800; }
.sg-page section[id] { scroll-margin-top: 24px; }
.sg-page .sg-eyebrow { display: block; color: var(--sg-gold); font-size: .76rem; font-weight: 700; margin-bottom: 8px; }
.sg-page .sg-muted { color: var(--sg-muted); }
.sg-hero { background: radial-gradient(ellipse at 70% 65%, var(--sg-hero-glow) 0, transparent 65%), var(--sg-hero-base); }
.sg-hero-art { position: relative; background: #070908; }
.sg-hero-art::after { content: ""; position: absolute; inset: 75% 0 0; background: linear-gradient(transparent, var(--sg-hero-base)); pointer-events: none; }
.sg-hero-art img { width: 100%; height: auto; }
.sg-hero-content { position: relative; padding: 24px 40px 36px; text-align: center; }
.sg-hero-content h1 span { color: var(--sg-gold); white-space: nowrap; }
.sg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sg-gold); margin-left: 6px; box-shadow: 0 0 16px #e7c17a70; }
.sg-page .sg-lead { color: var(--sg-secondary); margin: 15px auto; max-width: 620px; font-size: 1.05rem; }
.sg-page .sg-credit { color: var(--sg-muted); font-size: .8rem; }
.sg-credit > span { padding: 0 10px; color: var(--sg-muted); }
.sg-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.sg-page .sg-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 11px 24px; border-radius: 10px; font-size: .9rem; font-weight: 800; line-height: 1.6; transition: background .2s, box-shadow .2s; }
.sg-page .sg-button-gold { background: #e7c17a; border: 1px solid #e7c17a; color: #211c11; box-shadow: 0 6px 24px var(--sg-shadow); }
.sg-page .sg-button-gold:hover { background: #f2d59e; box-shadow: 0 6px 24px #e7c17a18; }
.sg-page .sg-button-outline { color: var(--sg-text); background: var(--sg-wash); border: 1px solid var(--sg-border); }
.sg-page .sg-button-outline:hover { background: var(--sg-soft-border); }
.sg-page .sg-button[aria-disabled="true"] { cursor: default; }
.sg-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 23px 0; border-top: 1px solid var(--sg-border); background: var(--sg-stats-bg); }
.sg-stats > div { text-align: center; padding: 0 8px; display: grid; gap: 1px; }
.sg-stats > div + div { border-right: 1px solid var(--sg-border); }
.sg-stats strong { font-size: 1.9rem; line-height: 1.5; color: var(--sg-gold); }
.sg-stats span { font-size: .75rem; color: var(--sg-muted); }
.sg-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 14px 18px; border-block: 1px solid var(--sg-border); background: var(--sg-nav-bg); }
.sg-page .sg-nav a { color: var(--sg-secondary); padding: 8px 15px; font-size: .8rem; border-radius: 8px; transition: background .2s; }
.sg-page .sg-nav a:hover { background: var(--sg-soft-border); color: var(--sg-gold); }
.sg-page .sg-nav a:last-child { color: var(--sg-gold); }
.sg-body { padding: 0 36px; }
.sg-section { padding: 42px 0; }
.sg-section + .sg-section { border-top: 1px solid var(--sg-border); }
.sg-section-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sg-section-number { display: grid; place-items: center; width: 49px; height: 54px; flex-shrink: 0; color: var(--sg-gold); border: 1px solid var(--sg-border); border-radius: 13px; font-size: 1.1rem; background: linear-gradient(135deg, var(--sg-accent-wash), transparent); }
.sg-section-heading .sg-eyebrow { margin-bottom: 4px; }
.sg-page .sg-intro { color: var(--sg-secondary); margin-bottom: 24px; }
.sg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 28px 0 24px; counter-reset: none; }
.sg-steps li { position: relative; padding: 22px 20px; border-top: 2px solid var(--sg-step-rule); background: linear-gradient(var(--sg-wash), transparent); border-radius: 0 0 12px 12px; }
.sg-step-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sg-border); margin-bottom: 16px; color: var(--sg-gold); font-size: .8rem; }
.sg-steps h3 { margin-bottom: 10px; }
.sg-steps p { color: var(--sg-muted); font-size: .88rem; }
.sg-note { padding: 17px 20px; color: var(--sg-secondary); background: var(--sg-note-bg); border-right: 3px solid var(--sg-note-rule); border-radius: 8px 0 0 8px; font-size: .88rem; }
.sg-note strong { color: var(--sg-text); }
.sg-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.sg-score-card { padding: 23px; background: var(--sg-panel); border: 1px solid var(--sg-soft-border); border-radius: 15px; }
.sg-score-card-accent { background: linear-gradient(135deg, var(--sg-accent-wash), var(--sg-panel)); border-color: var(--sg-border); }
.sg-score-value { display: block; color: var(--sg-gold); font-size: 2.5rem; line-height: 1.4; margin-bottom: 18px; }
.sg-score-value small { font-size: .77rem; color: var(--sg-muted); }
.sg-score-card p { color: var(--sg-muted); font-size: .88rem; margin: 12px 0 18px; }
.sg-label { display: inline-block; color: var(--sg-gold); font-size: .73rem; padding: 3px 10px; border: 1px solid var(--sg-border); border-radius: 6px; }
.sg-page .sg-text-link { color: var(--sg-gold); font-size: .8rem; text-decoration: underline; text-underline-offset: 5px; }
.sg-cube-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; padding: 28px; border: 1px solid var(--sg-border); border-radius: 18px; background: linear-gradient(120deg, var(--sg-panel-glow), var(--sg-panel)); }
.sg-cube-panel p { color: var(--sg-secondary); font-size: .9rem; }
.sg-cube-sequence { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 30px 0 22px; }
.sg-cube-sequence > div { display: grid; justify-items: center; gap: 12px; flex: 1; }
.sg-cube-face { display: grid; place-items: center; height: 60px; width: 60px; background: linear-gradient(145deg, #e8cd93, #9a743d); color: #292314; font-weight: 800; font-size: 1.8rem; border: 1px solid #f7dda5; border-radius: 13px; box-shadow: inset -4px -4px 0 #59472640, 0 10px 20px #0004; transform: rotate(-7deg); }
.sg-cube-sequence small { color: var(--sg-muted); text-align: center; font-size: .7rem; }
.sg-cube-arrow { color: var(--sg-muted); margin-bottom: 30px; }
.sg-cube-outcomes { padding-right: 25px; border-right: 1px solid var(--sg-border); }
.sg-cube-outcomes h3 { color: var(--sg-gold); margin-bottom: 10px; }
.sg-cube-outcomes > div { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; }
.sg-cube-outcomes > div + div { border-top: 1px solid var(--sg-soft-border); }
.sg-outcome-symbol { display: grid; place-items: center; height: 27px; width: 27px; flex-shrink: 0; border-radius: 50%; background: var(--sg-accent-wash); color: var(--sg-gold); line-height: 1; }
.sg-token-note { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding: 22px; background: var(--sg-accent-wash); border-radius: 12px; }
.sg-token-icon { font-size: 2.7rem; color: var(--sg-gold); line-height: 1; }
.sg-token-note h3 { margin-bottom: 5px; color: var(--sg-gold); }
.sg-token-note p { color: var(--sg-muted); font-size: .88rem; }
.sg-shop-strip { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 28px; border: 1px solid var(--sg-border); border-radius: 16px; background: radial-gradient(ellipse at right, var(--sg-shop-glow), transparent 70%), var(--sg-panel); }
.sg-shop-strip h2 { font-size: 1.2rem; }
.sg-shop-strip .sg-button { flex-shrink: 0; }
.sg-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sg-game-card { border: 1px solid var(--sg-border); border-radius: 16px; overflow: hidden; background: var(--sg-panel); }
.sg-game-card-special { border-color: var(--sg-accent-border); }
.sg-card-art { display: flex; justify-content: center; padding: 24px 30px; background: radial-gradient(ellipse at center, var(--sg-art-glow) 0, var(--sg-hero-base) 75%); border-bottom: 1px solid var(--sg-soft-border); }
.sg-card-art img { width: 100%; max-width: 190px; height: auto; object-fit: contain; border: 1px solid #ffffff1a; border-radius: 9px; box-shadow: 0 12px 22px #0005; }
.sg-card-copy { padding: 20px; }
.sg-card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sg-card-heading h3 { font-size: 1.05rem; }
.sg-token-badge { padding: 3px 9px; border-radius: 20px; background: var(--sg-accent-wash); color: var(--sg-gold); font-size: .69rem; white-space: nowrap; }
.sg-card-copy p { font-size: .86rem; color: var(--sg-secondary); }
.sg-card-copy .sg-coming-soon { color: var(--sg-muted); }
.sg-card-example { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--sg-border); color: var(--sg-example); font-size: .8rem; }
.sg-finale-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--sg-border); border-radius: 16px; background: linear-gradient(130deg, var(--sg-accent-wash), var(--sg-panel)); overflow: hidden; }
.sg-finale-format { padding: 26px; }
.sg-finale-format + .sg-finale-format { border-right: 1px solid var(--sg-border); }
.sg-finale-format h3 { margin: 15px 0 12px; }
.sg-finale-format p { color: var(--sg-secondary); font-size: .9rem; }
.sg-finale-format p + p { margin-top: 14px; }
.sg-finale-facts { display: flex; gap: 28px; margin-top: 20px; color: var(--sg-secondary); font-size: .8rem; }
.sg-finale-facts strong { font-size: 1.6rem; color: var(--sg-gold); margin-left: 6px; }
.sg-finale-results { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sg-finale-results p { display: grid; gap: 5px; border-right: 2px solid var(--sg-note-rule); background: var(--sg-note-bg); padding: 17px 20px; border-radius: 8px 0 0 8px; }
.sg-finale-results p + p { border-color: var(--sg-loss-rule); background: var(--sg-loss-bg); }
.sg-finale-results strong { color: var(--sg-text); font-size: .9rem; }
.sg-finale-results span { color: var(--sg-secondary); font-size: .85rem; }
.sg-buy { position: relative; padding: 42px 25px; border: 1px solid var(--sg-accent-border); border-radius: 18px; text-align: center; background: radial-gradient(ellipse at 50% 120%, var(--sg-shop-glow), transparent 70%), var(--sg-panel); }
.sg-buy p { color: var(--sg-secondary); max-width: 580px; margin: 16px auto 0; }
.sg-page .sg-footnote { margin: 22px 0 28px; text-align: center; color: var(--sg-muted); font-size: .73rem; }

.sg-faq-list { display: grid; gap: 12px; }
.sg-faq-item { background: var(--sg-panel); border: 1px solid var(--sg-border); border-radius: 12px; overflow: hidden; }
.sg-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; color: var(--sg-text); font-size: .95rem; font-weight: 800; line-height: 1.9; cursor: pointer; list-style: none; }
.sg-faq-item summary::-webkit-details-marker { display: none; }
.sg-faq-item summary::after { content: "+"; display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--sg-accent-wash); color: var(--sg-gold); font-size: 1.2rem; line-height: 1; }
.sg-faq-item summary:hover { background: var(--sg-wash); }
.sg-faq-item summary:focus-visible { outline: 3px solid var(--sg-focus); outline-offset: -4px; border-radius: 12px; }
.sg-faq-item[open] { border-color: var(--sg-accent-border); }
.sg-faq-item[open] summary::after { content: "−"; }
.sg-faq-answer { padding: 0 20px 20px; }
.sg-faq-answer p { color: var(--sg-secondary); font-size: .9rem; border-top: 1px solid var(--sg-soft-border); padding-top: 16px; }

@media (max-width: 991px) {
    .sg-body { padding: 0 24px; }
    .sg-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-steps { gap: 10px; }
    .sg-steps li { padding: 18px 12px; }
    .sg-score-card { padding: 18px; }
    .sg-cube-panel { gap: 22px; padding: 22px; }
    .sg-cube-outcomes { padding-right: 20px; }
}

@media (max-width: 767px) {
    .sg-page { border-radius: 17px; }
    .sg-body { padding: 0 18px; }
    .sg-hero-content { padding: 20px 20px 28px; }
    .sg-page .sg-lead { font-size: .95rem; }
    .sg-stats { grid-template-columns: 1fr 1fr; padding: 0; }
    .sg-stats > div { padding: 15px 8px; }
    .sg-stats > div:nth-child(3) { border-right: 0; }
    .sg-stats > div:nth-child(n+3) { border-top: 1px solid var(--sg-border); }
    .sg-stats strong { font-size: 1.65rem; }
    .sg-nav { gap: 4px; padding: 10px; }
    .sg-page .sg-nav a { padding: 7px 10px; font-size: .76rem; }
    .sg-section { padding: 32px 0; }
    .sg-section-heading { gap: 12px; }
    .sg-section-number { width: 39px; height: 47px; font-size: .95rem; }
    .sg-steps, .sg-score-grid, .sg-cube-panel, .sg-finale-grid, .sg-finale-results { grid-template-columns: 1fr; }
    .sg-steps { gap: 14px; }
    .sg-steps li { padding: 18px; }
    .sg-step-number { float: right; margin: 0 0 10px 12px; }
    .sg-steps p { clear: both; }
    .sg-score-value { margin-bottom: 10px; }
    .sg-cube-outcomes { padding-right: 0; padding-top: 20px; border-right: 0; border-top: 1px solid var(--sg-border); }
    .sg-token-note { align-items: flex-start; gap: 14px; padding: 18px; }
    .sg-token-icon { font-size: 2rem; margin-top: 7px; }
    .sg-shop-strip { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px; }
    .sg-finale-format + .sg-finale-format { border-right: 0; border-top: 1px solid var(--sg-border); }
    .sg-finale-format { padding: 22px; }
    .sg-card-grid { gap: 14px; }
    .sg-card-art { padding: 20px; }
    .sg-card-copy { padding: 16px; }
}

@media (max-width: 480px) {
    .sg-page h1 { font-size: 1.75rem; }
    .sg-page h2 { font-size: 1.25rem; }
    .sg-body { padding: 0 15px; }
    .sg-actions { flex-direction: column; gap: 10px; }
    .sg-credit > span { display: block; height: 3px; font-size: 0; }
    .sg-card-grid { grid-template-columns: 1fr; }
    .sg-card-art { padding: 24px; }
    .sg-card-art img { max-width: 170px; }
    .sg-card-copy { padding: 20px; }
    .sg-card-heading h3 { font-size: 1.15rem; }
    .sg-card-copy p { font-size: .9rem; }
    .sg-cube-panel { padding: 18px; }
    .sg-cube-face { width: 49px; height: 49px; }
    .sg-cube-sequence { gap: 4px; }
    .sg-cube-sequence small { font-size: .66rem; }
    .sg-buy { padding: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-page a { transition: none; }
}