:root {
    --bg: #04020a;
    /* very dark void */
    --star: #ffffff;
    --accent: #66ffcc;
    --glow: 0 0 18px rgba(102, 255, 204, 0.13), 0 0 30px rgba(102, 255, 204, 0.07);
    --type-speed: 30ms;
    /* base typing speed */
}

html,body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    font-family: 'Share Tech Mono', monospace;
    color: var(--star);
    overflow: hidden
}

/* full-screen container */
.stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px
}

/* starfield canvas sits behind everything */
canvas#stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block
}

/* main title */
h1.title {
    position: relative;
    z-index: 2;
    font-size: 48px;
    letter-spacing: 1px;
    color: var(--accent);
    text-shadow: var(--glow);
    margin: 0;
    text-align: center;
}

/* options row */
.options {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box
}

.option {
    min-width: 160px;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid rgba(102, 255, 204, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.00));
    backdrop-filter: blur(2px);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease
}

.option:hover {
    transform: translateY(-6px);
    box-shadow: var(--glow)
}

.option h2 {
    margin: 0;
    font-size: 22px;
    color: var(--star);
    opacity: 0.95
}

/* typed caret */
.caret {
    display: inline-block;
    width: 10px;
    height: 1.1em;
    background: var(--accent);
    margin-left: 6px;
    vertical-align: bottom;
    animation: blink 1s steps(2) infinite
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

/* clickable focus */
.option:focus {
    outline: 3px solid rgba(102, 255, 204, 0.12)
}

/* responsive */
@media (max-width:700px) {
    h1.title {
        font-size: 34px
    }

    .options {
        flex-direction: column;
        gap: 18px
    }
}

/* small footer hint */
.hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.28);
    z-index: 2
}