:root{
    --neon:#00cfff;
    --neon-soft:#79e5ff;
    --ink:#d7eaff;
    --ink-dim:#b8d4e6;
    --panel:rgba(10,25,35,.72);
    --panel-border:#0a3e60;
    --nav-bg:rgba(5,15,25,.95);
    --accent:#0079ff;
}

/* Base */
html,body{height:100%}
body{
    background:#000;
    color:var(--ink);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Inter,"Helvetica Neue",Arial,sans-serif;
    padding-top:70px;
    overflow-x:hidden;
}

/* Universal background glow layer */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;
    background:
        radial-gradient(circle at center 15%,
        rgba(0,180,255,.22) 0%,
        rgba(0,180,255,.10) 25%,
        rgba(0,0,0,0) 70%);
    mix-blend-mode:screen;
}

/* Nebula overlay */
.nebula{
    position:fixed;inset:0;pointer-events:none;z-index:-1;
    background:
        radial-gradient(800px 600px at 20% 10%, rgba(0,135,255,.12), transparent 70%),
        radial-gradient(900px 700px at 80% 20%, rgba(138,43,226,.10), transparent 70%),
        radial-gradient(700px 700px at 50% 80%, rgba(0,255,214,.08), transparent 70%);
    mix-blend-mode:screen;
    animation: floatNebula 30s ease-in-out infinite alternate;
}
@keyframes floatNebula{
    from{transform:translateY(0)}
    to{transform:translateY(-20px)}
}

/* Skip link */
.skip-link{
    position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
    position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;
    background:#000;border:2px solid var(--neon);color:#fff;z-index:10000;
}

/* Stars (canvas sits behind) */
#stars-canvas{
    position:fixed;inset:0;z-index:-2;background:transparent;
}

/* Nav */
nav.navbar{
    background:var(--nav-bg);
    backdrop-filter:blur(10px);
    border-bottom:1px solid #124c7b;
}
#navLogo{height:42px}
.navbar .nav-link{
    color:#88caff !important;
    transition:color .2s ease;
    position:relative;
    padding:.75rem 1rem;
    outline:none;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
    color:var(--neon) !important;
    text-shadow:0 0 10px var(--neon);
}

/* Animated nav highlight */
.nav-underline{
    position:absolute;
    bottom:-1px;
    height:3px;
    width:0;
    background:linear-gradient(90deg,var(--accent),var(--neon));
    box-shadow:0 0 10px var(--neon);
    transition:left .25s ease,width .25s ease;
}
#navList{ position:relative; }
.nav-container{position:relative}

/* Hero */
.jumbotron{
    position:relative;
    background:url("https://www.playneweden.com/images/SplashBG.png") center/cover no-repeat;
    color:#fff;
    padding:140px 20px;
    margin-bottom:0;
    border-radius:0;
    -webkit-mask-image:linear-gradient(to bottom, #000 65%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 65%, transparent 100%);
}
.jumbotron p.mt-3{
    font-size:1.05rem;
    margin-top:1.5rem !important;
    color:#fff !important;
    font-weight:500;
    text-shadow:
        0 0 4px rgba(0,0,0,0.85),
        0 0 12px rgba(0,0,0,0.65),
        0 0 18px rgba(0,0,0,0.45);
}
.jumbotron p.mt-3 a{
    color:var(--neon) !important;
    font-weight:600;
    border-bottom:1px solid rgba(0,207,255,.55);
    text-decoration:none;
    transition:all .2s ease;
}
.jumbotron p.mt-3 a:hover{
    border-bottom-color:var(--neon);
    text-shadow:0 0 12px var(--neon);
}

/* Buttons */
.btn{
    background:linear-gradient(90deg,var(--accent),var(--neon));
    border:none;
    padding:12px 32px;
    color:#fff !important;
    font-weight:700;
    text-shadow:0 0 6px #000;
    border-radius:8px;
    transition:.25s;
}
.btn:hover{
    filter:brightness(1.25);
    box-shadow:0 0 18px var(--neon)
}

/* Section Titles */
.section-title{
    font-size:clamp(28px,3.5vw,42px);
    letter-spacing:.045em;
    text-transform:uppercase;
    text-align:center;
    margin:70px 0 32px;
    color:var(--ink);
    position:relative;
    line-height:1.2;
    text-shadow:
        0 0 10px rgba(0,207,255,.55),
        0 0 24px rgba(0,207,255,.35),
        0 0 40px rgba(0,207,255,.22),
        0 0 65px rgba(0,207,255,.15);
}
.section-title::after{
    content:"";
    display:block;
    width:180px;
    height:3px;
    margin:18px auto 0;
    background:radial-gradient(
        ellipse at center,
        rgba(0,207,255,.85) 0%,
        rgba(0,207,255,.4) 40%,
        rgba(0,207,255,0) 85%);
    filter:blur(4px);
    border-radius:4px;
    opacity:.88;
    transform:translateY(2px);
}

/* Feature Cards */
.feature-card{
    background:var(--panel);
    border:1px solid var(--panel-border);
    border-radius:12px;
    padding:18px;
    margin-bottom:30px;
    transition:transform .25s, box-shadow .25s, border-color .25s;
    backdrop-filter:blur(4px);
}
.feature-card:hover{
    border-color:var(--neon);
    box-shadow:0 0 18px rgba(0,207,255,.35);
    transform:translateY(-6px);
}

.img-rounded{border-radius:8px}
hr{border-top:1px solid #1b4a66;margin:40px 0}

/* Footer */
#footerContainer{
    background:rgba(3,12,20,.95);
    padding:60px 20px;
    border-top:2px solid #135a88;
}
.socialIcon{
    width:32px !important;height:32px !important;
    object-fit:contain;
    opacity:.85;
    margin:0 12px;
    transition:transform .25s, opacity .25s, filter .25s;
}
.socialIcon:hover{
    opacity:1;
    transform:scale(1.15);
    filter:drop-shadow(0 0 8px var(--neon))
}

/* Scroll animations */
.reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease
}
.reveal.revealed{
    opacity:1;
    transform:none
}

/* Lightbox */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
}
.lightbox.open{display:flex}
.lightbox img{
    max-width:95vw;
    max-height:90vh;
    border-radius:8px;
    box-shadow:0 0 24px rgba(0,207,255,.45)
}
.lightbox .close-btn{
    position:absolute;
    top:16px;right:16px;
    background:#000;
    border:1px solid var(--neon);
    color:#fff;
    padding:.4rem .7rem;
    border-radius:6px;
    cursor:pointer;
    box-shadow:0 0 10px var(--neon)
}

/* Mobile tweaks */
@media (max-width: 576px){
    .jumbotron{padding:110px 14px}
    .feature-card{padding:14px}
    .navbar .nav-link{padding:.6rem .75rem}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* Focus styles */
a:focus, button:focus{
    outline:2px solid var(--neon);
    outline-offset:2px
}
:focus:not(:focus-visible){
    outline:none !important;
}