.text-button {
    color: #8892b0;
    text-decoration: none;
    transition: color 0.3s ease;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.text-button:hover {
    color: #a8b2d1;
}

#aboutDialog {
    border: 1px solid rgba(168, 178, 209, 0.2);
    background: rgba(26, 26, 46, 0.9);
    color: #e8e8e8;
    border-radius: 16px;
    padding: 2rem 2.2rem 1.6rem;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    backdrop-filter: blur(12px);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0; /* avoid UA margin offset */
    animation: dialogFade 0.25s ease;
}

#aboutDialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

/* Dialog Content */
#aboutDialog h2 {
    margin-bottom: 1rem;
    font-size: 1.6rem;
    color: #a8b2d1;
    text-align: center;
}

#aboutDialog p {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* Night Scene Decorative Element */
.night-scene {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(168, 178, 209, 0.2);
}

.stars {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    animation: twinkle 3s ease-in-out infinite;
}

.tagline {
    color: #8892b0;
    font-style: italic;
    font-size: 1rem;
}

/* Dialog Actions */
.dialog-actions {
    text-align: center;
    margin-top: 1.2rem;
}

#aboutClose {
    border: solid 1px #a8b2d1;
    border-radius: 5px;
}

@keyframes dialogFade {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}