@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&family=Share+Tech+Mono&display=swap');

/* Hidden by default; shown by the portrait media query below */
#landscape-lock {
    display: none;
}

@media (orientation: portrait) {
    #landscape-lock {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: linear-gradient(160deg, #060a14 0%, #0d1228 100%);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 32px 24px;
        text-align: center;
    }

    /* CRT scanline overlay — matches the game screen aesthetic */
    #landscape-lock::before {
        content: '';
        position: fixed;
        inset: 0;
        background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            oklch(0 0 0 / 0.06) 3px,
            oklch(0 0 0 / 0.06) 4px
        );
        pointer-events: none;
        z-index: 0;
    }

    #landscape-lock > * {
        position: relative;
        z-index: 1;
    }
}

@keyframes landscape-lock-spin {
    0%,  30%  { transform: rotate(0deg); }
    60%, 90%  { transform: rotate(-90deg); }
    100%      { transform: rotate(0deg); }
}

#landscape-lock .ll-icon {
    font-size: 64px;
    color: #b8860b;
    animation: landscape-lock-spin 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(184, 134, 11, 0.5));
    line-height: 1;
    display: block;
}

#landscape-lock .ll-title {
    font-family: 'Orbitron', monospace;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.28em;
    color: #b8860b;
    line-height: 1.6;
}

#landscape-lock .ll-brand {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #4a8a60;
    line-height: 1.6;
}

#landscape-lock .ll-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: #445566;
    letter-spacing: 0.1em;
}