/* ============================================================
   Animations + Responsive Breakpoints
   ============================================================ */

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes sceneFadeIn {
    from { opacity: 0.4; }
    to { opacity: 1; }
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes viewFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes progressShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}
@keyframes connectionPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}
@keyframes achievementGlow {
    0% { box-shadow: 0 4px 16px var(--color-shadow); }
    50% { box-shadow: 0 4px 20px rgba(139, 105, 20, 0.35); }
    100% { box-shadow: 0 4px 16px var(--color-shadow); }
}
@keyframes milestoneGlow {
    0% { box-shadow: 0 4px 16px var(--color-shadow); }
    50% { box-shadow: 0 4px 20px rgba(74, 122, 140, 0.35); }
    100% { box-shadow: 0 4px 16px var(--color-shadow); }
}

/* ============================================================
   RESPONSIVE - TABLET (769-1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .game-container {
        grid-template-columns: 280px 1fr;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE (<=768px)
   ============================================================ */
@media (max-width: 768px) {
    html { font-size: 14px; }

    .game-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto auto;
        height: auto;
    }
    .left-column {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        overflow-y: visible;
        min-height: auto;
    }
    .right-column {
        overflow-y: visible;
        min-height: auto;
    }

    /* -- Mobile details toggle -- */
    .mobile-details-toggle {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        font-size: 0.8rem;
    }
    .mobile-collapsible {
        display: none;
    }
    .mobile-collapsible.mobile-visible {
        display: block;
    }

    /* -- Top bar -- */
    .top-bar {
        font-size: 0.8rem;
        gap: var(--gap-sm);
    }
    .top-bar-title { font-size: 1rem; }
    .top-bar-sep { display: none; }
    .top-bar-spacer { flex-basis: 100%; height: 0; }

    /* -- Scene -- */
    .ascii-scene img { max-height: 200px; }

    /* -- Tab bar: icon-only -- */
    .tab-label { display: none; }
    .tab-btn {
        padding: 8px 12px;
        font-size: 0.95rem;
        min-height: 44px;
    }
    .tab-bar {
        -ms-overflow-style: none;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent);
        mask-image: linear-gradient(to right, black 90%, transparent);
    }
    .tab-bar::-webkit-scrollbar { display: none; }

    /* -- Touch targets -- */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 36px; }
    .speed-btn { min-height: 36px; padding: 4px 8px; }
    .collapsible-header { min-height: 40px; }

    /* -- Speed controls -- */
    .speed-label-text { display: none; }

    /* -- Bottom bar -- */
    .bottom-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gap-sm);
    }
    .bottom-bar > .top-bar-sep { display: none; }
    .speed-controls { justify-content: center; }
    .log-panel { max-height: 150px; }
    .log-panel.expanded { max-height: 150px; }

    /* -- Modals: full-screen -- */
    .modal-overlay { padding: 0; }
    .modal {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    /* -- Grids -- */
    .trait-grid { grid-template-columns: 1fr; }
    .achievement-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ============================================================
   RESPONSIVE - SMALL MOBILE (<=480px)
   ============================================================ */
@media (max-width: 480px) {
    .top-bar {
        padding: 6px var(--gap-sm);
    }
    .btn-text { display: none; }
    .left-column, .right-column {
        padding: var(--gap-sm);
    }
    .bottom-bar {
        padding: 4px var(--gap-sm);
    }
    .speed-btn[data-speed="150"],
    .speed-btn[data-speed="365"] { display: none; }
}