: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);

    --planned:#8a8df7;   /* violet glow */
    --progress:#00e0c7;  /* teal glow   */
    --complete:#6ee76e;  /* green glow  */
}

/* Base */
body { color: var(--ink); }

/* Background */
#stars-canvas { position:fixed; inset:0; z-index:-2; }
.nebula{
    position:fixed; inset:0; z-index:-1;
    pointer-events:none;
    mix-blend-mode:screen;
}

/* Hero */
.roadmap-hero{
    background: linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.4)),
        url("https://www.playneweden.com/images/SplashBG.png") center/cover no-repeat;
    padding: 120px 20px 80px;
    text-shadow:0 0 10px #000;
}

/* Card groups */
.rd-items{
    display:grid;
    gap:22px;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    margin-bottom:60px;
}

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

/* Status-coloured borders */
.rd-card.rd-planned{
    border-color:var(--planned);
    box-shadow:0 0 12px rgba(138,141,247,.25);
}
.rd-card.rd-in-progress{
    border-color:var(--progress);
    box-shadow:0 0 12px rgba(0,224,199,.25);
}
.rd-card.rd-complete{
    border-color:var(--complete);
    box-shadow:0 0 12px rgba(110,231,110,.20);
}

/* Status text inside card */
.rd-status{
    font-size:.8rem;
    margin-bottom:6px;
}
.rd-status.rd-planned{ color:var(--planned); }
.rd-status.rd-in-progress{ color:var(--progress); }
.rd-status.rd-complete{ color:var(--complete); }

/* Titles & meta */
.rd-title{ font-size:1.2rem; margin-bottom:6px; }
.rd-sub{ font-size:.9rem; color:var(--ink-dim); margin-bottom:10px; }
.rd-desc{ font-size:.95rem; margin-bottom:8px; }

/* Tags */
.rd-tags .rd-tag{
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    font-size:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
    margin:2px 5px 0 0;
}

/* Notes */
.rd-note{
    background:var(--panel);
    border:1px solid var(--panel-border);
    border-left:4px solid var(--neon);
    border-radius:10px;
    padding:14px 16px;
}
.rd-note-title{ color:var(--neon-soft); margin:0 0 6px; }

/* Hide native checkboxes */
.form-check-input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

/* Toggle label layout */
.form-check-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    margin-bottom:4px;
}

/* Base dot style */
.status-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    display:inline-block;
    opacity:.3;
    transform:scale(.85);
    transition:.25s ease;
}
.status-dot.planned{ background:var(--planned); box-shadow:0 0 8px var(--planned); }
.status-dot.progress{ background:var(--progress); box-shadow:0 0 8px var(--progress); }
.status-dot.complete{ background:var(--complete); box-shadow:0 0 8px var(--complete); }

/* Glow when CHECKED */
#filterPlanned:checked + .status-dot.planned,
#filterInProgress:checked + .status-dot.progress,
#filterComplete:checked + .status-dot.complete{
    opacity:1 !important;
    transform:scale(1);
}

/* Status pills inside modal */
.status-pill{
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    text-transform:capitalize;
}

/* Modal */
.tag-chip{
    padding:3px 10px;
    font-size:12px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
}

/* Fix reveal overrides */
#roadmapItems .reveal{
    opacity:1;
    transform:none;
}

/* Fix modal status pill colours */
.status-pill.planned {
    color: var(--planned);
    box-shadow: 0 0 12px rgba(138,141,247,.25) inset;
}

.status-pill.in-progress {
    color: var(--progress);
    box-shadow: 0 0 12px rgba(0,224,199,.25) inset;
}

.status-pill.complete {
    color: var(--complete);
    box-shadow: 0 0 12px rgba(110,231,110,.25) inset;
}