/* --- TITLE TYPOGRAPHY (Desktop Default) --- */
.main-title {
    font-size: 2.5rem;
    /* Reduced from 3rem */
    margin: 0;
    margin-bottom: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-weight: 900;
    letter-spacing: 8px;
    /* Reduced from 12px */
    color: var(--text-color);
    width: 100%;
    max-width: 100vw;
    /* Prevent overflow */
    white-space: nowrap;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    /* Stronger Glow */
    font-family: var(--font-display);
    transition: all 0.3s ease;
    overflow: hidden;
    /* Fallback */
    text-overflow: ellipsis;
    /* Fallback */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {

    /* Container Reset */
    .cyber-container {
        width: 100%;
        height: 100%;
        border: none;
        padding: 1rem;
        border-radius: 0;
    }

    /* Scaling Down Title */
    .main-title {
        font-size: 1.8rem;
        letter-spacing: 4px;
        /* Tighter on mobile */
        margin-bottom: 1rem;
        padding-top: 0.5rem;
    }

    /* Scaling Down Timer */
    .timer-display {
        font-size: 4.5rem;
        letter-spacing: -2px;
    }

    .label-text {
        font-size: 0.8rem;
    }

    /* Layout Adjustments */
    .hud-header {
        margin-bottom: 0.5rem;
        padding: 0.5rem 0;
    }

    .header-controls {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .status-indicator {
        text-align: center;
        width: 100%;
        font-size: 0.6rem;
        margin-bottom: 5px;
        order: 2;
        /* Put status below controls on mobile? No, maybe top. Let's keep flow. */
    }

    .right-status {
        width: 100%;
        align-items: center;
        order: 1;
        /* Controls first on mobile? */
        justify-content: center;
        flex-direction: row;
        /* Keep row for buttons */
        gap: 1rem;
        margin-bottom: 5px;
    }

    /* Sub-Nav Stacking */
    .sub-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .nav-btn {
        flex: 1;
        /* Stretch buttons */
        justify-content: center;
        font-size: 0.7rem;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* Buttons */
    .cyber-btn {
        padding: 1rem;
        /* Slightly smaller touch target */
        font-size: 1rem;
    }

    /* Mission Input */
    #mission-input {
        width: 95%;
        font-size: 0.9rem;
    }
}