*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:linear-gradient(to bottom,#05070f,#0d1326,#111111);
    color:white;
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
    position:relative;
}

/* Sternenhimmel */

#stars{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}

/* Maus-Glow */

#mouse-glow{
    position:fixed;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,213,255,0.18),transparent 70%);
    pointer-events:none;
    transform:translate(-50%,-50%);
    z-index:1;
    opacity:0;
    transition:opacity .2s ease;
    will-change:left,top,opacity;
}

#mouse-glow.is-visible{
    opacity:1;
}

/* Inhalt über dem Hintergrund */

header,
.hero,
.games-section,
.game-detail{
    position:relative;
    z-index:2;
}

/* Glas-Header */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:25px 60px;

    background:rgba(10,15,30,0.55);
    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(0,213,255,0.25);

    box-shadow:
        0 0 25px rgba(0,213,255,0.12);

    position:sticky;
    top:0;
    z-index:10;
}

header h1{
    color:#00d5ff;
    transition:.4s;
    cursor:default;

    text-shadow:
        0 0 10px rgba(0,213,255,0.6);
}

header h1:hover{
    transform:scale(1.06);

    text-shadow:
        0 0 10px #00d5ff,
        0 0 25px #00d5ff,
        0 0 55px #00d5ff;
}

/* Navigation */

nav a{
    color:white;
    text-decoration:none;
    margin-left:30px;
    transition:.3s;
    font-weight:bold;
}

nav a:hover{
    color:#00d5ff;
    text-shadow:0 0 10px #00d5ff;
}

/* Hero */

.hero{
    height:85vh;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:20px;
}

.hero h2{
    font-size:70px;
    margin-bottom:20px;

    animation:titleGlow 3s infinite alternate;
}

@keyframes titleGlow{
    from{
        text-shadow:
            0 0 10px rgba(0,213,255,0.2);
    }

    to{
        text-shadow:
            0 0 20px rgba(0,213,255,0.7),
            0 0 50px rgba(0,213,255,0.35);
    }
}

.hero p{
    font-size:26px;
    color:#cccccc;
    margin-bottom:40px;
}

.hero a{
    text-decoration:none;
}

/* Button */

button{
    padding:20px 50px;

    font-size:24px;

    background:linear-gradient(135deg,#00d5ff,#0066ff);

    color:white;

    border:none;

    border-radius:14px;

    cursor:pointer;

    transition:.3s;

    font-weight:bold;

    box-shadow:
        0 0 20px rgba(0,213,255,0.3);
}

button:hover{
    transform:scale(1.08);

    box-shadow:
        0 0 20px #00d5ff,
        0 0 50px #00d5ff,
        0 0 90px rgba(0,213,255,0.6);
}

/* Spiele-Bereich */

.games-section{
    padding:100px 60px;
    text-align:center;
    z-index:auto;

    background:linear-gradient(
        to bottom,
        rgba(5,7,15,0.2),
        rgba(0,0,0,0.65)
    );
}
.games-section > h2,
.games-section > .section-subtitle,
.games-section > .game-cards,
.games-section > .wide-game-card{
    position:relative;
    z-index:2;
}


.games-section h2{
    font-size:55px;
    color:white;
    margin-bottom:15px;

    text-shadow:
        0 0 15px rgba(0,213,255,0.5);
}

.section-subtitle{
    font-size:22px;
    color:#cccccc;
    margin-bottom:60px;
}

.game-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    max-width:1250px;
    margin:0 auto;
}

.game-card{
    background:rgba(10,18,35,0.7);
    border:1px solid rgba(0,213,255,0.22);
    border-radius:24px;

    padding:35px 28px;

    text-align:left;

    box-shadow:
        0 0 25px rgba(0,213,255,0.08);

    backdrop-filter:blur(12px);

    transition:.35s;

    position:relative;
    overflow:hidden;
}

.game-card::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;

    background:radial-gradient(circle,rgba(0,213,255,0.12),transparent 40%);

    opacity:0;
    transition:.35s;
}

.game-card:hover::before{
    opacity:1;
}

.game-card:hover{
    transform:translateY(-14px) scale(1.02);

    border-color:#00d5ff;

    box-shadow:
        0 0 25px rgba(0,213,255,0.35),
        0 0 70px rgba(0,213,255,0.15);
}

.game-image{
    width:100%;
    height:180px;

    object-fit:cover;

    border-radius:18px;

    margin-bottom:22px;

    border:1px solid rgba(0,213,255,0.25);

    box-shadow:
        0 0 25px rgba(0,213,255,0.12);

    transition:.35s;
}

.game-card:hover .game-image{
    transform:scale(1.04);

    box-shadow:
        0 0 25px rgba(0,213,255,0.45);
}

.game-card h3{
    font-size:28px;
    margin-bottom:15px;
    color:white;
}

.game-card p{
    color:#cfcfcf;
    font-size:17px;
    line-height:1.6;
    margin:22px 0;
}

.status{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:bold;
}

.development{
    background:rgba(255,70,70,0.18);
    color:#ff7777;
    border:1px solid rgba(255,70,70,0.4);
}

.prototype{
    background:rgba(0,213,255,0.18);
    color:#00d5ff;
    border:1px solid rgba(0,213,255,0.4);
}

.idea{
    background:rgba(168,85,247,0.18);
    color:#c084fc;
    border:1px solid rgba(192,132,252,0.48);
}


.planning{
    background:rgba(255,220,80,0.18);
    color:#ffd95a;
    border:1px solid rgba(255,220,80,0.4);
}

.button-link{
    text-decoration:none;
    position:relative;
    z-index:5;
    display:inline-block;
}

.small-button{
    position:relative;
    z-index:6;
}

/* Spiel-Detailseiten */

.game-detail{
    min-height:calc(100vh - 86px);
    padding:72px 60px 110px;
    background:linear-gradient(
        to bottom,
        rgba(5,7,15,0.08),
        rgba(5,10,20,0.74)
    );
}

.detail-container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(340px,0.85fr);
    gap:64px;
    align-items:start;
}

.detail-image{
    position:sticky;
    top:128px;
    display:block;
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
    border:1px solid rgba(0,213,255,0.32);
    border-radius:8px;
    box-shadow:
        0 24px 70px rgba(0,0,0,0.45),
        0 0 35px rgba(0,213,255,0.12);
}

.detail-text{
    min-width:0;
    padding-top:8px;
}

.detail-text h2{
    max-width:760px;
    margin-bottom:18px;
    color:#ffffff;
    font-size:48px;
    line-height:1.1;
    overflow-wrap:anywhere;
    text-shadow:0 0 24px rgba(0,213,255,0.28);
}

.detail-text > .status{
    margin-bottom:28px;
}

.detail-text > p{
    margin-bottom:40px;
    color:#d7dce5;
    font-size:18px;
    line-height:1.75;
}

.detail-text h3{
    margin:32px 0 16px;
    padding-bottom:10px;
    color:#ffffff;
    font-size:22px;
    line-height:1.3;
    border-bottom:1px solid rgba(0,213,255,0.22);
}

.detail-text ul{
    display:grid;
    gap:10px;
    list-style:none;
}

.detail-text li{
    position:relative;
    padding:13px 16px 13px 34px;
    color:#d7dce5;
    font-size:16px;
    line-height:1.45;
    background:rgba(10,18,35,0.58);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:6px;
}

.detail-text li::before{
    content:"";
    position:absolute;
    top:20px;
    left:16px;
    width:6px;
    height:6px;
    background:#00d5ff;
    border-radius:50%;
    box-shadow:0 0 10px rgba(0,213,255,0.7);
}

.detail-text > a{
    display:inline-block;
    margin-top:40px;
    text-decoration:none;
}

.detail-text > a button{
    padding:14px 22px;
    font-size:16px;
    border-radius:6px;
}

.detail-text > a button:hover{
    transform:translateY(-2px);
}

@media (max-width:1000px){
    .detail-container{
        grid-template-columns:1fr;
        gap:44px;
    }

    .detail-image{
        position:relative;
        top:auto;
        max-height:520px;
    }
}

@media (max-width:760px){
    header{
        flex-wrap:wrap;
        gap:18px;
        padding:18px 24px;
    }

    header h1{
        font-size:25px;
    }

    nav{
        display:flex;
        width:100%;
        gap:20px;
        overflow-x:auto;
        padding-bottom:4px;
    }

    nav a{
        flex:0 0 auto;
        margin-left:0;
        font-size:14px;
    }

    .game-detail{
        min-height:auto;
        padding:44px 24px 72px;
    }

    .detail-container{
        gap:34px;
    }

    .detail-text{
        padding-top:0;
    }

    .detail-text h2{
        font-size:38px;
    }
}

@media (max-width:480px){
    .detail-image{
        aspect-ratio:4 / 3;
    }

    .detail-text h2{
        font-size:32px;
    }

    .detail-text > p{
        font-size:17px;
    }

    .detail-text > a,
    .detail-text > a button{
        width:100%;
    }
}


/* Breite Atharok-Spielkarte */

.wide-game-card{
    width:100%;
    max-width:1250px;
    margin:36px auto 0;
    padding:28px;
    display:grid;
    grid-template-columns:minmax(320px,0.95fr) minmax(0,1.05fr);
    gap:42px;
    align-items:center;
    border-radius:8px;
}

.wide-game-card .wide-game-image{
    height:270px;
    margin-bottom:0;
    border-radius:6px;
}

.wide-game-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}

.wide-game-content h3{
    margin-bottom:18px;
    font-size:36px;
    line-height:1.15;
    overflow-wrap:anywhere;
}

.wide-game-content .button-link{
    margin-top:34px;
}

/* Galerie der weiteren Atharok-Spiele */

.atharok-detail-container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
}

.atharok-detail-heading{
    max-width:820px;
    padding-top:0;
}

.atharok-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    margin-top:30px;
}

.atharok-gallery img{
    display:block;
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:contain;
    border:1px solid rgba(0,213,255,0.28);
    border-radius:8px;
    background:#080d19;
    box-shadow:
        0 18px 45px rgba(0,0,0,0.38),
        0 0 24px rgba(0,213,255,0.1);
}


.atharok-back-link{
    display:inline-block;
    margin-top:42px;
    text-decoration:none;
}

.atharok-back-link button{
    padding:14px 22px;
    font-size:16px;
    border-radius:6px;
}

.atharok-back-link button:hover{
    transform:translateY(-2px);
}

@media (max-width:1000px){
    .game-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .wide-game-card{
        grid-template-columns:minmax(280px,0.9fr) minmax(0,1.1fr);
    }
}

@media (max-width:760px){
    .games-section{
        padding:72px 24px;
    }

    .game-cards{
        grid-template-columns:1fr;
    }

    .wide-game-card{
        grid-template-columns:1fr;
        gap:28px;
        padding:24px;
    }

    .wide-game-card .wide-game-image{
        height:260px;
    }

    .wide-game-content h3{
        font-size:30px;
    }
}

@media (max-width:600px){
    .atharok-gallery{
        grid-template-columns:1fr;
        gap:18px;
    }


    .atharok-back-link,
    .atharok-back-link button{
        width:100%;
    }
}

@media (max-width:480px){
    .wide-game-card .wide-game-image{
        height:210px;
    }
}


/* Inhalte der Atharok-Spielreihe */

.atharok-gallery{
    display:block;
    margin-top:34px;
}

.atharok-game-entry{
    width:100%;
    max-width:1080px;
    margin:0 auto 88px;
    padding-bottom:88px;
    border-bottom:1px solid rgba(0,213,255,0.2);
}

.atharok-game-entry:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}

.atharok-game-entry > img{
    display:block;
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:contain;
    border:1px solid rgba(0,213,255,0.28);
    border-radius:8px;
    background:#080d19;
    box-shadow:
        0 18px 45px rgba(0,0,0,0.38),
        0 0 24px rgba(0,213,255,0.1);
}

.atharok-game-copy{
    margin-top:34px;
}

.atharok-game-copy h2{
    margin-bottom:18px;
    color:#ffffff;
    font-size:38px;
    line-height:1.18;
    overflow-wrap:anywhere;
    text-shadow:0 0 22px rgba(0,213,255,0.24);
}

.atharok-game-copy > p{
    max-width:980px;
    margin-bottom:38px;
    color:#d7dce5;
    font-size:18px;
    line-height:1.75;
}

.atharok-game-copy h3{
    margin:32px 0 16px;
    padding-bottom:10px;
    color:#ffffff;
    font-size:22px;
    font-weight:700;
    line-height:1.3;
    border-bottom:1px solid rgba(0,213,255,0.22);
}

.atharok-facts,
.atharok-features{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    list-style:none;
}

.atharok-facts .full-width{
    grid-column:1 / -1;
}

.atharok-facts li,
.atharok-features li{
    position:relative;
    min-width:0;
    padding:13px 16px 13px 34px;
    color:#d7dce5;
    font-size:16px;
    line-height:1.45;
    overflow-wrap:anywhere;
    background:rgba(10,18,35,0.58);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:6px;
}

.atharok-facts li::before,
.atharok-features li::before{
    content:"";
    position:absolute;
    top:20px;
    left:16px;
    width:6px;
    height:6px;
    background:#00d5ff;
    border-radius:50%;
    box-shadow:0 0 10px rgba(0,213,255,0.7);
}

@media (max-width:760px){
    .atharok-game-entry{
        margin-bottom:64px;
        padding-bottom:64px;
    }

    .atharok-game-copy h2{
        font-size:32px;
    }

    .atharok-facts,
    .atharok-features{
        grid-template-columns:1fr;
    }

    .atharok-facts .full-width{
        grid-column:auto;
    }
}

@media (max-width:480px){
    .atharok-game-copy{
        margin-top:26px;
    }

    .atharok-game-copy h2{
        font-size:28px;
    }

    .atharok-game-copy > p{
        font-size:17px;
    }
}


/* News & Devlog */

.news-section{
    position:relative;
    z-index:auto;
    padding:100px 60px 120px;
    text-align:center;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.68),
        rgba(6,12,25,0.86)
    );
    border-top:1px solid rgba(0,213,255,0.12);
}
.news-section > h2,
.news-section > .section-subtitle,
.news-section > .news-grid{
    position:relative;
    z-index:2;
}


.news-section > h2{
    margin-bottom:15px;
    color:#ffffff;
    font-size:55px;
    line-height:1.15;
    text-shadow:0 0 15px rgba(0,213,255,0.5);
}

.news-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    width:100%;
    max-width:1250px;
    margin:0 auto;
}

.news-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:285px;
    padding:28px;
    overflow:hidden;
    text-align:left;
    background:rgba(10,18,35,0.68);
    border:1px solid rgba(0,213,255,0.2);
    border-radius:8px;
    box-shadow:0 16px 42px rgba(0,0,0,0.28);
    backdrop-filter:blur(14px);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.news-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#00d5ff,#0066ff);
    opacity:.7;
    transition:opacity .3s ease;
}

.news-card:hover{
    transform:translateY(-8px);
    border-color:rgba(0,213,255,0.65);
    box-shadow:
        0 22px 52px rgba(0,0,0,0.38),
        0 0 30px rgba(0,213,255,0.16);
}

.news-card:hover::before{
    opacity:1;
}

.news-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
}

.news-date{
    color:#aeb7c8;
    font-size:14px;
    font-weight:bold;
}

.news-category{
    display:inline-block;
    padding:6px 10px;
    color:#00d5ff;
    font-size:13px;
    font-weight:bold;
    background:rgba(0,213,255,0.12);
    border:1px solid rgba(0,213,255,0.3);
    border-radius:999px;
}

.news-card h3{
    margin-bottom:14px;
    color:#ffffff;
    font-size:24px;
    line-height:1.3;
    overflow-wrap:anywhere;
}

.news-card p{
    margin-bottom:24px;
    color:#cfd5df;
    font-size:16px;
    line-height:1.65;
}

.read-more{
    align-self:flex-start;
    margin-top:auto;
    color:#00d5ff;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    transition:color .25s ease,text-shadow .25s ease,transform .25s ease;
}

.read-more:hover,
.read-more:focus-visible{
    color:#ffffff;
    text-shadow:0 0 12px rgba(0,213,255,0.85);
    transform:translateX(4px);
}

@media (max-width:1000px){
    .news-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:760px){
    .news-section{
        padding:72px 24px 88px;
    }

    .news-section > h2{
        font-size:40px;
    }
}

@media (max-width:620px){
    .news-grid{
        grid-template-columns:1fr;
    }

    .news-card{
        min-height:0;
        padding:24px;
    }
}


/* Galerie & Medien */

.gallery-section{
    position:relative;
    z-index:auto;
    padding:100px 60px 120px;
    text-align:center;
    background:linear-gradient(
        to bottom,
        rgba(6,12,25,0.78),
        rgba(0,0,0,0.7)
    );
    border-top:1px solid rgba(0,213,255,0.12);
}

.gallery-section > h2,
.gallery-section > .section-subtitle,
.gallery-section > .gallery-grid,
.gallery-section > .trailer-box{
    position:relative;
    z-index:2;
}

.gallery-section > h2{
    margin-bottom:15px;
    color:#ffffff;
    font-size:55px;
    line-height:1.15;
    text-shadow:0 0 15px rgba(0,213,255,0.5);
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    width:100%;
    max-width:1250px;
    margin:0 auto;
}

.gallery-item{
    position:relative;
    aspect-ratio:16 / 9;
    min-width:0;
    overflow:hidden;
    background:rgba(10,18,35,0.7);
    border:1px solid rgba(0,213,255,0.24);
    border-radius:8px;
    box-shadow:
        0 16px 42px rgba(0,0,0,0.3),
        0 0 24px rgba(0,213,255,0.08);
    backdrop-filter:blur(12px);
    outline:none;
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.gallery-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease,filter .45s ease;
}

.gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    text-align:left;
    color:#ffffff;
    background:linear-gradient(
        to top,
        rgba(2,6,14,0.94),
        rgba(2,6,14,0.62) 48%,
        rgba(2,6,14,0.08)
    );
    opacity:0;
    transform:translateY(12px);
    transition:opacity .35s ease,transform .35s ease;
}

.gallery-overlay h3{
    margin-bottom:7px;
    font-size:25px;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.gallery-overlay p{
    color:#cfd8e6;
    font-size:16px;
    line-height:1.45;
}

.gallery-item:hover,
.gallery-item:focus-visible{
    transform:translateY(-6px);
    border-color:rgba(0,213,255,0.7);
    box-shadow:
        0 22px 50px rgba(0,0,0,0.4),
        0 0 34px rgba(0,213,255,0.2);
}

.gallery-item:hover img,
.gallery-item:focus-visible img{
    transform:scale(1.07);
    filter:brightness(.78);
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay{
    opacity:1;
    transform:translateY(0);
}

.trailer-box{
    width:100%;
    max-width:1250px;
    margin:48px auto 0;
    padding:34px;
    text-align:left;
    background:rgba(10,18,35,0.68);
    border:1px solid rgba(0,213,255,0.32);
    border-radius:8px;
    box-shadow:
        0 18px 48px rgba(0,0,0,0.34),
        0 0 34px rgba(0,213,255,0.11);
    backdrop-filter:blur(14px);
}

.trailer-box > h3{
    margin-bottom:10px;
    color:#ffffff;
    font-size:28px;
    line-height:1.25;
}

.trailer-box > p{
    margin-bottom:26px;
    color:#cfd5df;
    font-size:17px;
    line-height:1.6;
}

.video-placeholder{
    display:grid;
    place-items:center;
    min-height:260px;
    padding:24px;
    color:#00d5ff;
    font-size:22px;
    font-weight:bold;
    text-align:center;
    background:rgba(3,8,18,0.72);
    border:1px dashed rgba(0,213,255,0.55);
    border-radius:6px;
    text-shadow:0 0 14px rgba(0,213,255,0.65);
}

@media (max-width:760px){
    .gallery-section{
        padding:72px 24px 88px;
    }

    .gallery-section > h2{
        font-size:40px;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-overlay{
        padding:22px;
        opacity:1;
        transform:none;
        background:linear-gradient(
            to top,
            rgba(2,6,14,0.92),
            rgba(2,6,14,0.28) 62%,
            transparent
        );
    }

    .trailer-box{
        padding:24px;
    }

    .video-placeholder{
        min-height:210px;
        font-size:19px;
    }
}

@media (max-width:480px){
    .gallery-item{
        aspect-ratio:4 / 3;
    }

    .gallery-overlay h3{
        font-size:22px;
    }
}


/* Ueber ToReHeGames und Kontakt */

.about-section,
.contact-section{
    position:relative;
    z-index:auto;
    padding:100px 60px 120px;
    text-align:center;
    border-top:1px solid rgba(0,213,255,0.12);
}

.about-section{
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.7),
        rgba(6,12,25,0.8)
    );
}

.contact-section{
    background:linear-gradient(
        to bottom,
        rgba(6,12,25,0.8),
        rgba(0,0,0,0.76)
    );
}

.about-section > h2,
.about-section > .section-subtitle,
.about-section > .about-container,
.contact-section > h2,
.contact-section > .section-subtitle,
.contact-section > .contact-container{
    position:relative;
    z-index:2;
}

.about-section > h2,
.contact-section > h2{
    margin-bottom:15px;
    color:#ffffff;
    font-size:55px;
    line-height:1.15;
    text-shadow:0 0 15px rgba(0,213,255,0.5);
}

.about-container,
.contact-container{
    display:grid;
    gap:28px;
    width:100%;
    max-width:1250px;
    margin:0 auto;
}

.about-container{
    grid-template-columns:minmax(0,1.3fr) minmax(320px,0.7fr);
    align-items:stretch;
}

.contact-container{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.about-text,
.about-card,
.contact-card{
    min-width:0;
    padding:32px;
    text-align:left;
    background:rgba(10,18,35,0.68);
    border:1px solid rgba(0,213,255,0.22);
    border-radius:8px;
    box-shadow:
        0 16px 42px rgba(0,0,0,0.3),
        0 0 24px rgba(0,213,255,0.08);
    backdrop-filter:blur(14px);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.about-text:hover,
.about-card:hover,
.contact-card:hover{
    transform:translateY(-7px);
    border-color:rgba(0,213,255,0.65);
    box-shadow:
        0 22px 52px rgba(0,0,0,0.4),
        0 0 32px rgba(0,213,255,0.18);
}

.about-text h3,
.about-card h3,
.contact-card h3{
    margin-bottom:20px;
    color:#ffffff;
    font-size:27px;
    line-height:1.3;
    overflow-wrap:anywhere;
    text-shadow:0 0 14px rgba(0,213,255,0.3);
}

.about-text p,
.contact-card p{
    color:#d3d9e3;
    font-size:17px;
    line-height:1.75;
}

.about-text p + p{
    margin-top:16px;
}

.about-card ul{
    display:grid;
    gap:12px;
    list-style:none;
}

.about-card li{
    padding:14px 16px;
    color:#dce2eb;
    font-size:16px;
    line-height:1.45;
    overflow-wrap:anywhere;
    background:rgba(4,10,22,0.48);
    border-left:2px solid rgba(0,213,255,0.62);
    border-radius:4px;
}

.contact-card{
    display:flex;
    flex-direction:column;
    min-height:280px;
}

.contact-card p{
    margin-bottom:28px;
}

.contact-button{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    margin-top:auto;
    padding:13px 22px;
    color:#ffffff;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    background:linear-gradient(135deg,#00d5ff,#0066ff);
    border:0;
    border-radius:6px;
    box-shadow:0 0 20px rgba(0,213,255,0.3);
    transition:transform .25s ease,box-shadow .25s ease;
}

.contact-button:hover,
.contact-button:focus-visible{
    transform:translateY(-3px);
    box-shadow:
        0 0 22px rgba(0,213,255,0.75),
        0 0 48px rgba(0,102,255,0.35);
}

.social-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:auto;
}

.social-links a{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:8px 14px;
    color:#00d5ff;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    background:rgba(0,213,255,0.1);
    border:1px solid rgba(0,213,255,0.34);
    border-radius:999px;
    transition:color .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}

.social-links a:hover,
.social-links a:focus-visible{
    color:#ffffff;
    background:rgba(0,213,255,0.2);
    border-color:rgba(0,213,255,0.78);
    box-shadow:0 0 18px rgba(0,213,255,0.28);
    transform:translateY(-2px);
}

@media (max-width:900px){
    .about-container,
    .contact-container{
        grid-template-columns:1fr;
    }

    .contact-card{
        min-height:250px;
    }
}

@media (max-width:760px){
    .about-section,
    .contact-section{
        padding:72px 24px 88px;
    }

    .about-section > h2,
    .contact-section > h2{
        font-size:40px;
    }

    .about-text,
    .about-card,
    .contact-card{
        padding:26px;
    }
}

@media (max-width:480px){
    .about-text h3,
    .about-card h3,
    .contact-card h3{
        font-size:23px;
    }

    .contact-button{
        width:100%;
    }
}


/* V10 release readiness */

.primary-button,
.small-button,
.detail-back-button{
    position:relative;
    z-index:6;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(135deg,#00d5ff,#0066ff);
    border-radius:6px;
    box-shadow:0 0 20px rgba(0,213,255,0.3);
    transition:transform .3s ease,box-shadow .3s ease;
}

.primary-button{
    padding:20px 50px;
    font-size:24px;
}

.small-button,
.detail-back-button{
    padding:14px 22px;
    font-size:16px;
}

.primary-button:hover,
.primary-button:focus-visible,
.small-button:hover,
.small-button:focus-visible,
.detail-back-button:hover,
.detail-back-button:focus-visible{
    transform:translateY(-3px);
    box-shadow:
        0 0 20px #00d5ff,
        0 0 45px rgba(0,213,255,0.55);
}

.detail-text > .detail-back-button{
    margin-top:40px;
}

.atharok-back-link.detail-back-button{
    margin-top:42px;
}

.game-image,
.detail-image,
.gallery-item img{
    object-fit:contain;
    background:#080d19;
}

a:focus-visible{
    outline:2px solid #00d5ff;
    outline-offset:4px;
}

@media (max-width:760px){
    header{
        align-items:flex-start;
    }

    nav{
        flex-wrap:wrap;
        overflow-x:visible;
        gap:12px 18px;
    }

    nav a{
        flex:0 1 auto;
    }

    .hero{
        min-height:calc(100vh - 130px);
        height:auto;
        padding:80px 24px;
    }

    .hero h2{
        font-size:42px;
        line-height:1.12;
        overflow-wrap:anywhere;
    }

    .hero p{
        font-size:20px;
        line-height:1.5;
    }

    .primary-button{
        max-width:100%;
        padding:16px 22px;
        font-size:17px;
    }

    .games-section h2{
        font-size:40px;
    }

    .section-subtitle{
        margin-bottom:42px;
        font-size:18px;
        line-height:1.5;
    }

    .game-cards{
        gap:24px;
    }

    .game-card h3{
        font-size:24px;
        line-height:1.3;
        overflow-wrap:anywhere;
    }
}

@media (max-width:480px){
    header{
        padding:16px 18px;
    }

    nav{
        gap:10px 14px;
    }

    .hero{
        min-height:calc(100vh - 160px);
        padding:64px 18px;
    }

    .hero h2{
        font-size:34px;
    }

    .hero p{
        font-size:18px;
    }

    .primary-button,
    .small-button,
    .detail-back-button{
        width:100%;
    }

    .games-section h2,
    .news-section > h2,
    .gallery-section > h2,
    .about-section > h2,
    .contact-section > h2{
        font-size:34px;
    }

    .section-subtitle{
        font-size:17px;
    }

    .game-card{
        padding:24px 20px;
    }
}

@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}


/* Runtime and anchor fixes */

section[id]{
    scroll-margin-top:100px;
}

@media (max-width:760px){
    section[id]{
        scroll-margin-top:165px;
    }
}

@media (hover:none){
    #mouse-glow{
        display:none;
    }
}