:root {

    --void: #04070b;

    --bg:          #171717;
    --surface:     #1f1f1f;
    --surface-2:   #272727;
    --surface-3:   #2f2f2f;
    --border:      #333333;
    --border-soft: #2a2a2a;

    --text:        #E5E5E5;
    --text-dim:    #a3a3a3;
    --text-faint:  #6f6f6f;

    --accent:        #1AC2E6;
    --accent-deep:   #0E8FAD;
    --accent-2:      #5FD6F0;
    --accent-2-soft: #9AE6F7;

    --btn:        #00546F;
    --btn-hover:  #0A6E8E;
    --btn-border: #0088A1;
    --btn-text:   #ffffff;

    --font:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --display: 'Orbitron', 'DejaVu Sans', sans-serif;

    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    --radius:    0;
    --radius-sm: 6px;
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);

    --maxw:  1100px;
    --nav-h: 56px;
    --ease:  0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--void);

    background-image:
        linear-gradient(rgba(4, 7, 11, 0.85), rgba(4, 7, 11, 0.85)),
        url("img/LogoBG3.webp");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center top, center top;
    background-attachment: fixed, fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; }

p { margin: 0 0 var(--s4); color: var(--text-dim); }

a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--ease);
}
a:hover { color: var(--accent-2); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.wrap { width: 92%; max-width: var(--maxw); margin: 0 auto; }

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav-h);
    background: rgba(15, 17, 20, 0.92);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(6px);
}
.nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav__brand { display: inline-flex; align-items: center; }
.nav__logo { height: 22px; width: auto; display: block; }
.nav__links { display: flex; gap: var(--s5); align-items: center; }
.nav__links a {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.9rem;
    padding: var(--s1) 0;
    border-bottom: 2px solid transparent;
    transition: color var(--ease), border-color var(--ease);
}
.nav__links a:hover { color: var(--text); border-bottom-color: var(--accent); }

.hero {
    width: 100%;
    height: clamp(280px, 42vh, 480px);
    background-color: #000;
    background-image: url("img/keyart_1080.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.lede {
    text-align: center;
    padding: var(--s7) 0 var(--s5);
    border-bottom: 1px solid var(--border);
}
.console {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3);
}
.key {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: var(--s3) var(--s5);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--btn);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    transition: color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.key i { font-size: 1.1em; color: var(--btn-text); transition: color var(--ease); }
.key:hover, .key:focus-visible {
    color: var(--btn-text);
    background: var(--btn-hover);
    border-color: var(--btn-border);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    outline: none;
}
.key:hover i, .key:focus-visible i { color: var(--btn-text); }

.key--off {
    color: var(--text-faint);
    background: rgba(23, 23, 23, 0.7);
    border-color: var(--border);
    cursor: default;
}
.key--off:hover, .key--off:focus-visible {
    color: var(--text-faint);
    background: rgba(23, 23, 23, 0.7);
    border-color: var(--border);
    transform: none;
    box-shadow: none;
}
.key--off i { color: var(--text-faint); }
.key--off:hover i { color: var(--text-faint); }
.key__tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--btn-text);
    background: var(--btn);
    border-radius: 999px;
    padding: 2px 8px;
}

main { padding: var(--s8) 0; }

.section { margin-bottom: var(--s8); scroll-margin-top: calc(var(--nav-h) + var(--s4)); }
.section:last-child { margin-bottom: 0; }
.section__head {
    margin-bottom: var(--s5);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--border);
}
.section__title { font-size: 1.5rem; letter-spacing: 0.01em; }
.section__title::before {
    content: "";
    display: inline-block;
    width: 4px; height: 1.1em;
    background: var(--accent);
    border-radius: 2px;
    margin-right: var(--s3);
    vertical-align: -0.15em;
}

.panel { padding: 0; }
.panel > :last-child { margin-bottom: 0; }

.panel--card {
    padding: var(--s6);
    background: #000;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.panel ul { margin: 0; padding: 0; list-style: none; }
.panel li {
    position: relative;
    padding-left: var(--s5);
    margin-bottom: var(--s3);
    line-height: 1.5;
    color: var(--text-dim);
}
.panel li:last-child { margin-bottom: 0; }
.panel li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 7px; height: 7px;
    background: var(--accent);
    border-radius: 50%;
}
.panel li b { color: var(--text); font-weight: 600; }

.split {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s7);
    align-items: start;
}
.split__media { margin: 0; max-width: 300px; }
.split__media img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.split__body > :last-child { margin-bottom: 0; }
.tagline {
    color: #19E3C0;
}
.features {
    margin-top: var(--s6);
    display: grid;
    gap: var(--s5);
}
.feature h3 {
    color: #19E3C0;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    margin-bottom: var(--s3);
}
.feature p { margin: 0; }

.stores { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    border-radius: var(--radius);
    border: 1px solid var(--btn-border);
    background: var(--btn);
    color: var(--btn-text);
    font-weight: 700;
    transition: background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover {
    background: var(--btn-hover);
    border-color: var(--btn-border);
    color: var(--btn-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.btn i { font-size: 1.15rem; }

.trailer {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer--empty { display: grid; place-items: center; }
.trailer--empty span {
    color: var(--text-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.carousel-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.carousel-slide { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-slide img { flex: 0 0 100%; width: 100%; height: auto; }
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: var(--s3) var(--s4);
    color: #fff;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.5);
    user-select: none;
    transition: background var(--ease), color var(--ease);
}
.prev { left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.next { right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.prev:hover, .next:hover { background: rgba(0, 0, 0, 0.8); color: var(--accent); }

.updates {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--s6);
}
.updates li { break-inside: avoid; }
.updates a {
    display: flex;
    align-items: baseline;
    gap: 1.2em;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.updates a:hover, .updates a:focus-visible {
    background: var(--surface-2);
    color: var(--text);
    border-left-color: var(--accent);
    outline: none;
}
.updates__date {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
    min-width: 4.2em;
}
.updates__name { font-size: 0.9rem; letter-spacing: 0.02em; }

.two-columns { display: flex; flex-wrap: wrap; gap: var(--s7); }
.two-columns .column { flex: 1; min-width: 260px; }
.two-columns .column p { margin: 0 0 3px; color: var(--text-dim); font-size: 0.92rem; line-height: 1.45; }

.two-columns .column p:has(strong) { margin-top: var(--s5); }
.two-columns .column > p:first-child { margin-top: 0; }
.two-columns .column strong {
    display: block;
    margin-bottom: var(--s2);
    padding-bottom: var(--s1);
    border-bottom: 1px solid var(--border);
    color: #19E3C0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cred-handle { color: var(--text-faint); font-size: 0.9em; }
.cred-handle:hover { color: var(--accent-2); }

.foot {
    border-top: 1px solid var(--border);
    background: #101418;
    padding: var(--s7) 0 var(--s6);
    color: var(--text-dim);
    position: relative;
    z-index: 1;
}
.foot__cols { display: flex; flex-wrap: wrap; gap: var(--s7); margin-bottom: var(--s6); }
.foot__group { min-width: 160px; }
.foot__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    margin-bottom: var(--s3);
}
.social { display: flex; gap: var(--s2); flex-wrap: wrap; }
.social a {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1.05rem;
    transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.social a:hover {
    background: var(--accent);
    color: #06232b;
    border-color: var(--accent);
    transform: translateY(-2px);
}
.foot__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s3);
    padding-top: var(--s5);
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-faint);
}
.foot__legal a { color: var(--accent); }

@media (max-width: 820px) {
    body { background-attachment: scroll, scroll; }
    main { padding: var(--s7) 0; }
    .panel--card { padding: var(--s5); }
    .updates { columns: 1; }
    .section { margin-bottom: var(--s7); }
    .split { grid-template-columns: 1fr; gap: var(--s5); }
    .split__media { order: -1; max-width: 260px; margin: 0 auto; }
    .nav__links { gap: var(--s4); }
    .foot__cols { gap: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .carousel-slide { transition: none; }
}