/* Responsive layout and reduced-motion overrides. */



@media (max-width: 900px) {
    body {
        overflow: auto;
    }

    .app-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .resize-handle {
        display: none;
    }

    .lesson-area {
        max-height: none;
        overflow: visible;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .toolbar {
        padding-right: 0;
    }

    .preview-header {
        padding-right: 72px;
    }

    .preview-canvas {
        min-height: 360px;
    }

    .site-logo {
        position: absolute;
        width: 56px;
    }
}

@media (max-width: 560px) {
    .preview-area,
    .lesson-area {
        padding: 14px;
    }

    .preview-header {
        padding-right: 62px;
    }

    .site-logo {
        top: 8px;
        right: 10px;
        width: 50px;
    }

    .show-lessons-button {
        top: 12px;
        right: 72px;
    }

    .preview-tab {
        min-height: 40px;
        padding-right: 11px;
        padding-left: 11px;
    }

    .toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .toolbar {
        padding-right: 0;
    }

    .toolbar-actions {
        justify-content: flex-start;
    }

    #reset-answer {
        margin-left: 0;
    }

    .logo-matrix-message {
        top: 43%;
        padding: 22px 16px 24px;
    }

    .logo-chase-hud {
        top: 68px;
        gap: 10px;
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    .logo-chase-stat strong {
        font-size: 0.88rem;
    }

    .logo-chase-timer {
        min-width: 44px;
        font-size: 0.8rem;
    }

    .logo-chase-result {
        top: 43%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-area button,
    .preview-tab,
    .show-lessons-button,
    .chapter-button,
    .progress-dot {
        transition: none;
    }

    .site-logo {
        transition: none;
    }

    .site-logo:hover {
        transform: rotate(var(--logo-tilt));
    }

    .site-logo.is-spinning,
    .site-logo.is-flying {
        animation: logo-gentle-wiggle 600ms ease-in-out;
    }

    .site-logo.is-matrix {
        animation: logo-matrix-logo-reduced 10s ease-in-out both;
    }

    .site-logo.is-chasing {
        transition: none;
    }

    .logo-chase-result {
        opacity: 1;
        animation: none;
    }

    .logo-chase-timer.is-urgent {
        animation: none;
    }

    .logo-ray-burst {
        animation-duration: 700ms;
    }

    .logo-ray {
        animation-duration: 450ms;
    }

    .logo-matrix-rain {
        display: none;
    }

    .logo-matrix-message {
        animation: logo-matrix-message-reduced 10s ease-in-out both;
    }
}

@keyframes logo-gentle-wiggle {
    0%,
    100% {
        filter: none;
        transform: rotate(var(--logo-tilt)) scale(1);
    }

    50% {
        filter: drop-shadow(0 0 12px #ffd858);
        transform: rotate(calc(var(--logo-tilt) + 8deg)) scale(1.08);
    }
}

@keyframes logo-matrix-logo-reduced {
    0%,
    100% {
        filter: none;
        transform: rotate(var(--logo-tilt));
    }

    10%,
    90% {
        filter: drop-shadow(0 0 12px #58ff82);
        transform: rotate(var(--logo-tilt));
    }
}

@keyframes logo-matrix-message-reduced {
    0%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }

    8%,
    92% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}