/* ============================================================
 * Start screen — title, subtitle, main menu, and the animated shark.
 * ============================================================ */

.startScreen {
    position: relative;
    width: 100vw;
    height: calc(100vw * 2 / 3);
    max-height: 100vh;
    max-width: calc(100vh * 3 / 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    font-family: var(--font-display);
    background: url("../img/3.Background/Dark/1.png") center/cover;
    animation: fadeIn 1.5s ease-in forwards;
    opacity: 0;
}

.title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    letter-spacing: 3px;
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
    text-shadow: var(--shadow-text-title);
}

.subtitle {
    font-size: clamp(1rem, 3vw, 1.3rem);
    margin-bottom: var(--space-2xl);
    color: var(--color-text);
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* ---------- Corner mute button ---------- */

.mute-btn-corner {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 10;
    padding: var(--space-sm);
    background: none !important;
    border: none;
    transition: filter 0.3s ease;
}

.mute-btn-corner:hover {
    cursor: pointer;
    filter: drop-shadow(0 0 15px rgba(79, 209, 255, 0.8))
            drop-shadow(0 0 25px rgba(0, 191, 255, 0.6));
}

/* ---------- Bottom corner menu (credits / privacy / impressum) ---------- */

.bottom-menu {
    position: absolute;
    bottom: 20px;
    right: 25px;
    display: flex;
    gap: var(--space-md);
}

/* ---------- Animated shark background ---------- */

.shark {
    position: absolute;
    bottom: 5%;
    left: -300px;
    width: 300px;
    height: 180px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: swimAcross 20s linear infinite;
    z-index: 1;
    opacity: 0.95;
}

.shark-win {
    bottom: unset;
    top: 5%;
}

@keyframes swimAcross {
    0%      { transform: translateX(-300px) scaleX(1); }
    50%     { transform: translateX(calc(100vw + 300px)) scaleX(1); }
    50.01%  { transform: translateX(calc(100vw + 300px)) scaleX(-1); }
    100%    { transform: translateX(-300px) scaleX(-1); }
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
    .bottom-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-sm);
        bottom: 15px;
        right: 50%;
        transform: translateX(50%);
        width: 90%;
        justify-content: center;
    }

    .mute-btn-corner {
        top: 15px;
        right: 15px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .subtitle {
        margin-bottom: var(--space-lg);
    }

    .menu {
        gap: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .bottom-menu {
        bottom: 10px;
        gap: var(--space-sm);
        flex-wrap: wrap;
        justify-content: center;
        max-width: 80%;
    }

    .mute-btn-corner {
        top: 10px;
        right: 15px;
    }
}