:root {
    --bg:#08090c;
    --bg2:#0c0f14;
    --panel:#11151c;
    --panel2:#171d26;
    --line:#29313d;
    --text:#f7f8fb;
    --muted:#9ca8b7;
    --lime:#c8ff3d;
    --gold:#ffd54a;
    --purple:#a981ff;
    --pink:#ff7bbd;
    --cyan:#60e7ff;
    --radius:24px;
    --shadow:0 22px 80px rgba(0,0,0,.3)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:radial-gradient(circle at 83% 0,rgba(169,129,255,.16),transparent 26%),radial-gradient(circle at 12% 12%,rgba(200,255,61,.08),transparent 24%),linear-gradient(180deg,#08090c,#0a0c10 45%,#08090c);
    color:var(--text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.62
}
a {
    color:inherit
}
img {
    max-width:100%;
    height:auto
}
.shell {
    width:min(1240px,calc(100% - 34px));
    margin:auto
}
.skip {
    position:absolute;
    left:-9999px
}
.skip:focus {
    left:16px;
    top:16px;
    z-index:1000;
    background:#fff;
    color:#000;
    padding:10px 14px;
    border-radius:10px
}
.site-header {
    position:sticky;
    top:0;
    z-index:60;
    background:rgba(8,9,12,.82);
    border-bottom:1px solid rgba(255,255,255,.075);
    backdrop-filter:blur(20px)
}
.header-inner {
    min-height:76px;
    display:flex;
    align-items:center;
    gap:24px
}
.brand {
    display:flex;
    flex:0 0 auto
}
.brand img {
    height:45px;
    width:auto
}
.desktop-nav {
    display:flex;
    gap:20px;
    margin-left:auto
}
.desktop-nav a,.mobile-nav a {
    color:#c2cbd6;
    text-decoration:none;
    font-weight:720;
    font-size:14px
}
.desktop-nav a:hover {
    color:#fff
}
.header-actions {
    display:flex;
    align-items:center;
    gap:10px
}
.menu-btn {
    display:none;
    background:var(--panel2);
    border:1px solid var(--line);
    color:#fff;
    border-radius:13px;
    width:43px;
    height:43px;
    font-size:20px
}
.mobile-play,.mobile-nav {
    display:none
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,var(--lime),var(--gold));
    color:#101307;
    text-decoration:none;
    font-weight:900;
    border:0;
    border-radius:14px;
    padding:14px 20px;
    box-shadow:0 12px 34px rgba(200,255,61,.13);
    cursor:pointer;
    transition:transform .2s,box-shadow .2s
}
.btn:hover {
    transform:translateY(-2px);
    box-shadow:0 18px 44px rgba(200,255,61,.17)
}
.btn-secondary {
    background:#181e27;
    color:#fff;
    border:1px solid #333d4a;
    box-shadow:none
}
.btn-small {
    padding:10px 16px;
    font-size:14px;
    border-radius:12px
}
.hero {
    padding:66px 0 42px
}
.mega-hero {
    padding-top:78px
}
.hero-grid {
    display:grid;
    grid-template-columns:1.14fr .86fr;
    gap:38px;
    align-items:center
}
.hero-copy {
    min-width:0
}
.hero-kickers {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.pill,.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-radius:999px;
    font-size:12px;
    font-weight:850;
    letter-spacing:.02em
}
.pill {
    padding:7px 10px;
    background:#131820;
    border:1px solid #2b3440;
    color:#ced7e2
}
.eyebrow {
    padding:7px 11px;
    color:#e0ff91;
    background:rgba(200,255,61,.07);
    border:1px solid rgba(200,255,61,.2)
}
h1 {
    font-size:clamp(42px,5vw,72px);
    line-height:.99;
    letter-spacing:-.055em;
    margin:18px 0 21px;
    max-width:980px;
    text-wrap:balance
}
h2 {
    font-size:clamp(28px,3.15vw,44px);
    line-height:1.08;
    letter-spacing:-.04em;
    margin:0 0 16px;
    text-wrap:balance
}
h3 {
    font-size:20px;
    line-height:1.23;
    margin:0 0 9px
}
.lead {
    font-size:19px;
    color:#b9c3cf;
    max-width:820px
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin:28px 0
}
.micro {
    font-size:13px;
    color:#7f8a98
}
.hero-art {
    min-height:430px;
    position:relative
}
.hero-art picture {
    display:block;
    width:100%;
    height:100%
}
.hero-art img {
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 28px 90px rgba(169,129,255,.15))
}
.status-strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:28px
}
.status-card {
    background:rgba(17,21,28,.86);
    border:1px solid var(--line);
    border-radius:16px;
    padding:15px
}
.status-card span {
    display:block;
    color:#7f8b9a;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.07em
}
.status-card strong {
    display:block;
    margin-top:5px;
    font-size:15px
}
.section {
    padding:54px 0
}
.section-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:24px;
    margin-bottom:26px
}
.section-head p {
    margin:0;
    max-width:620px;
    color:var(--muted)
}
.guide-section {
    padding-top:34px
}
.guide-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px
}
.guide-card {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:13px;
    min-height:208px;
    padding:20px;
    background:linear-gradient(180deg,rgba(24,30,39,.96),rgba(14,18,24,.96));
    border:1px solid var(--line);
    border-radius:20px;
    text-decoration:none;
    overflow:hidden;
    transition:.2s
}
.guide-card:before {
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    right:-60px;
    top:-60px;
    background:rgba(169,129,255,.08)
}
.guide-card:hover {
    transform:translateY(-3px);
    border-color:#455364;
    background:#171e27
}
.guide-emoji {
    font-size:28px;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    background:#202733;
    border:1px solid #333d4a;
    border-radius:16px
}
.guide-card p {
    margin:0;
    color:#919dac;
    font-size:13px
}
.guide-card h3 {
    font-size:17px
}
.guide-arrow {
    margin-top:auto;
    color:var(--lime);
    font-size:22px
}
.table-wrap {
    overflow:auto;
    border-radius:20px
}
.fact-table,.admin-table {
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#10151b;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden
}
.fact-table th,.fact-table td,.admin-table th,.admin-table td {
    padding:15px 17px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--line)
}
.fact-table th {
    color:#8793a2;
    font-weight:700
}
.fact-table tr:last-child td,.fact-table tr:last-child th,.admin-table tr:last-child td {
    border-bottom:0
}
.fact-table a {
    color:#dfff8c;
    font-weight:800;
    text-decoration:none
}
.rich-table th:first-child {
    min-width:210px
}
.story-section {
    background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(169,129,255,.025),transparent)
}
.prose {
    max-width:900px
}
.wide-prose {
    max-width:1040px
}
.prose p,.prose li {
    color:#b4bfcb
}
.prose h2 {
    margin-top:42px
}
.prose h3 {
    margin-top:29px
}
.prose ul,.prose ol {
    padding-left:22px
}
.prose a {
    color:#dfff8c
}
.timeline {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
    margin-top:28px
}
.timeline-item {
    display:flex;
    gap:15px;
    padding:20px;
    background:#10151b;
    border:1px solid var(--line);
    border-radius:19px
}
.timeline-item>span {
    font-size:12px;
    font-weight:950;
    color:#0d1107;
    background:var(--lime);
    width:35px;
    height:35px;
    border-radius:11px;
    display:grid;
    place-items:center;
    flex:0 0 auto
}
.timeline-item p {
    color:#929eac;
    margin:5px 0 0;
    font-size:13px
}
.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
.card {
    background:linear-gradient(180deg,rgba(23,29,38,.97),rgba(14,18,24,.97));
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow)
}
.card p {
    color:#aeb9c6
}
.accent-card {
    border-color:rgba(200,255,61,.22);
    background:linear-gradient(135deg,rgba(200,255,61,.06),rgba(169,129,255,.05),#11161d)
}
.check-list {
    padding-left:18px;
    color:#b3bdc9
}
.check-list li {
    margin:7px 0
}
.games {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px
}
.game {
    overflow:hidden;
    border-radius:20px;
    background:#11171e;
    border:1px solid var(--line);
    text-decoration:none;
    transition:.2s
}
.game:hover {
    transform:translateY(-2px);
    border-color:#465264
}
.game img {
    display:block;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover
}
.game div {
    padding:13px
}
.game b {
    display:block
}
.game span {
    font-size:12px;
    color:var(--muted)
}
.top-gap {
    margin-top:20px
}
.center-link {
    text-align:center;
    margin-top:22px
}
.source-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px
}
.source-card {
    padding:21px;
    border:1px solid var(--line);
    border-radius:19px;
    background:#10151b
}
.source-card .meta {
    color:#7f8b99;
    font-size:12px;
    margin-bottom:8px
}
.source-card p {
    color:#9da9b7
}
.source-link {
    display:inline-flex;
    margin-top:10px;
    color:#dfff8c;
    text-decoration:none;
    font-weight:800;
    font-size:13px
}
.compare-table td {
    width:50%
}
.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:11px
}
.step {
    position:relative;
    padding:20px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#10151b
}
.step p {
    color:#929eac;
    font-size:13px;
    margin-bottom:0
}
.conclusion-section {
    background:radial-gradient(circle at 50% 50%,rgba(200,255,61,.04),transparent 50%)
}
.faq-list details {
    border:1px solid var(--line);
    background:#10151b;
    border-radius:16px;
    padding:17px 19px;
    margin:10px 0
}
.faq-list summary {
    cursor:pointer;
    font-weight:850
}
.faq-list p {
    color:#aeb8c5
}
.promo-box {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:linear-gradient(135deg,rgba(200,255,61,.11),rgba(169,129,255,.08));
    border:1px solid rgba(200,255,61,.23);
    border-radius:22px;
    padding:22px
}
.code {
    font-size:27px;
    font-weight:950;
    letter-spacing:.05em
}
.muted {
    color:var(--muted)
}
.notice,.success {
    padding:15px 17px;
    border-radius:14px
}
.notice {
    background:rgba(255,213,74,.08);
    border:1px solid rgba(255,213,74,.23);
    color:#d8dee6
}
.success {
    background:rgba(200,255,61,.08);
    border:1px solid rgba(200,255,61,.22)
}
.page-hero {
    padding:45px 0 24px;
    background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)
}
.page-hero h1 {
    font-size:clamp(40px,4.5vw,63px);
    max-width:1050px
}
.page-hero .lead {
    max-width:880px
}
.breadcrumbs {
    padding-top:24px;
    font-size:13px;
    color:#75808e;
    display:flex;
    gap:8px
}
.breadcrumbs a {
    text-decoration:none;
    color:#b8c1cc
}
.author-note {
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:16px;
    align-items:center;
    margin-top:32px;
    padding:18px 20px;
    background:linear-gradient(135deg,rgba(200,255,61,.06),rgba(169,129,255,.06));
    border:1px solid var(--line);
    border-radius:18px
}
.author-note p {
    margin:3px 0 0;
    color:var(--muted);
    font-size:13px
}
.author-note>a {
    color:#dfff8c;
    text-decoration:none;
    font-weight:800;
    font-size:13px
}
.author-badge {
    display:grid;
    place-items:center;
    min-height:36px;
    padding:0 12px;
    border-radius:999px;
    background:#202730;
    border:1px solid #34404c;
    color:#eaffb2;
    font-size:12px;
    font-weight:900
}
.contact-form,.admin-form {
    display:grid;
    gap:13px
}
.contact-form {
    max-width:720px
}
.contact-form label,.admin-form label {
    display:grid;
    gap:6px;
    color:#c7ced8;
    font-size:13px
}
.contact-form input,.contact-form textarea,.admin-form input,.admin-form textarea {
    width:100%;
    background:#0d1116;
    border:1px solid #303946;
    color:#fff;
    border-radius:12px;
    padding:12px 14px;
    font:inherit
}
.contact-form textarea,.admin-form textarea {
    min-height:135px;
    resize:vertical
}
.footer {
    margin-top:58px;
    padding:46px 0 22px;
    border-top:1px solid var(--line);
    background:#07090b
}
.footer-grid {
    display:grid;
    grid-template-columns:1.45fr repeat(3,1fr);
    gap:30px
}
.footer img {
    height:46px;
    width:auto
}
.footer p {
    color:#7f8b99;
    font-size:13px;
    max-width:390px
}
.footer strong {
    display:block;
    margin-bottom:11px
}
.footer a {
    display:block;
    color:#8f9aa8;
    text-decoration:none;
    font-size:13px;
    margin:8px 0
}
.footer a:hover {
    color:#fff
}
.age {
    display:inline-grid;
    place-items:center;
    border:1px solid #4a535e;
    border-radius:50%;
    width:39px;
    height:39px;
    font-size:12px;
    font-weight:900
}
.footer-bottom {
    border-top:1px solid #171c22;
    margin-top:28px;
    padding-top:18px;
    color:#66717e;
    font-size:12px
}
.admin-shell {
    width:min(1080px,calc(100% - 30px));
    margin:30px auto
}
.admin-shell h1 {
    font-size:clamp(34px,5vw,48px);
    margin:8px 0
}
.admin-top {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center
}
.admin-card {
    background:#10151b;
    border:1px solid var(--line);
    border-radius:19px;
    padding:21px;
    margin:14px 0
}
.admin-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.admin-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:17px
}
.admin-card textarea {
    width:100%;
    min-height:180px;
    background:#0d1116;
    color:#fff;
    border:1px solid #303946;
    border-radius:12px;
    padding:12px
}
.toggle {
    display:flex!important;
    grid-template-columns:auto 1fr!important;
    align-items:center;
    margin-top:15px
}
.toggle input {
    width:auto!important
}
.ok {
    color:var(--lime);
    font-weight:900
}
.bad {
    color:#ff8181;
    font-weight:900
}
@media(max-width:1050px) {
    .guide-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .timeline {
        grid-template-columns:repeat(2,1fr)
    }
    .steps {
        grid-template-columns:repeat(2,1fr)
    }
    .games {
        grid-template-columns:repeat(3,1fr)
    }
    .desktop-nav {
        display:none
    }
    .menu-btn {
        display:block
    }
    .desktop-play {
        display:none
    }
    .mobile-play {
        display:inline-flex
    }
    .mobile-nav.open {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        padding:8px 17px 16px;
        background:#0c1015;
        border-top:1px solid var(--line)
    }
    .mobile-nav a {
        padding:10px
    }
    .hero-grid {
        grid-template-columns:1fr
    }
    .hero-art {
        min-height:300px
    }
    .status-strip {
        grid-template-columns:1fr 1fr 1fr
    }
    .source-grid {
        grid-template-columns:1fr 1fr
    }
    .footer-grid {
        grid-template-columns:1fr 1fr
    }
    .admin-grid {
        grid-template-columns:1fr
    }
}
@media(max-width:680px) {
    .shell {
        width:min(100% - 22px,1240px)
    }
    .header-inner {
        min-height:64px;
        gap:9px
    }
    .brand img {
        height:35px
    }
    .mobile-play {
        padding:9px 12px
    }
    .hero {
        padding-top:42px
    }
    .mega-hero {
        padding-top:48px
    }
    .hero-art {
        min-height:230px
    }
    .hero-actions .btn {
        width:100%
    }
    .status-strip {
        grid-template-columns:1fr
    }
    .section {
        padding:42px 0
    }
    .section-head {
        display:block
    }
    .section-head p {
        margin-top:10px
    }
    .guide-grid {
        grid-template-columns:repeat(2,1fr);
        gap:9px
    }
    .guide-card {
        padding:15px;
        min-height:190px
    }
    .guide-emoji {
        width:45px;
        height:45px;
        font-size:23px
    }
    .guide-card h3 {
        font-size:15px
    }
    .guide-card p {
        font-size:12px
    }
    .timeline,.split,.source-grid,.steps {
        grid-template-columns:1fr
    }
    .games {
        grid-template-columns:repeat(2,1fr)
    }
    .fact-table {
        min-width:690px
    }
    .compare-table .fact-table {
        min-width:620px
    }
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:22px
    }
    .footer-grid>div:first-child {
        grid-column:1/-1
    }
    .promo-box {
        flex-direction:column;
        align-items:flex-start
    }
    .author-note {
        grid-template-columns:1fr
    }
    .author-badge {
        width:max-content
    }
    h1 {
        letter-spacing:-.045em
    }
    .admin-top {
        align-items:flex-start
    }
}
.grid-errors {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:11px
}
.grid-errors .card {
    padding:19px
}
.grid-errors h3 {
    font-size:16px
}
.grid-errors p {
    font-size:13px;
    margin-bottom:0
}
.mini-head {
    margin-top:34px
}
@media(max-width:1050px) {
    .grid-errors {
        grid-template-columns:repeat(3,1fr)
    }
}
@media(max-width:680px) {
    .grid-errors {
        grid-template-columns:1fr 1fr
    }
    .grid-errors .card:last-child {
        grid-column:1/-1
    }
}