/* =============================================================
   BrainiaClub — polish.css
   Purpose: Conservative, ADDITIVE polish layer. Loaded LAST so it
            enhances motion/interaction without rewriting existing
            layout or colors. Reuses existing design tokens only
            (the cinemorphic / neumorphic scheme is preserved).

   Safe by design:
     • No layout/grid/flex changes — only transitions, easing,
       hover/press feedback, focus visibility, touch targets, and
       graceful entrance animations.
     • Everything respects prefers-reduced-motion.
     • No color values are redefined; we only reference brand vars.
   ============================================================= */


/* ── 1. Shared easing tokens (new, non-breaking additions) ──── */
:root {
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);   /* standard material-ish */
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); /* gentle decelerate */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot */
}


/* ── 2. Smoother global rendering hints ─────────────────────── */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Avoid horizontal jiggle from any stray overflow */
html, body { overscroll-behavior-y: contain; }


/* ── 2b. Language-proof text wrapping ───────────────────────── */
/* Translated strings (ES/FR/DE) run longer than the English the
   layout was designed around. overflow-wrap only kicks in when a
   word would otherwise overflow its box, so this is a no-op for
   text that already fits — it just prevents long translations from
   pushing the layout sideways on small screens. */
h1, h2, h3, h4, h5, h6, p, li, label, button, a, td, th,
.btn, .nav-link, .toast {
    overflow-wrap: break-word;
}


/* ── 3. Interactive feedback: buttons / cards / chips ───────── */
/* Only refines the press/hover *feel*; doesn't alter base styles.
   (No global will-change — applying it broadly creates too many GPU
   layers and can hurt performance; the browser handles these fine.) */
button,
.btn,
.neumorphic-btn,
.qm-chip,
.option-btn,
[role="button"] {
    transition-timing-function: var(--ease-smooth);
}

/* Tactile press feedback (pointer devices only, so touch isn't sticky) */
@media (hover: hover) and (pointer: fine) {
    .btn:active,
    .neumorphic-btn:active,
    .qm-chip:active,
    .option-btn:active,
    [role="button"]:active {
        transform: translateY(1px) scale(0.985);
    }
}

/* NOTE: cards (.topic-card, .mp-card, .lobby-card) already define their own
   :hover lift and, for topic cards, a floating animation. We intentionally
   do NOT add a competing transform here to avoid animation conflicts. */


/* ── 4. Keyboard focus visibility (accessibility, additive) ─── */
:where(a, button, .btn, .neumorphic-btn, input, select, textarea,
       [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--primary-accent, #6d5dfc);
    outline-offset: 2px;
    border-radius: 8px;
}
/* Don't show the ring for mouse clicks, only keyboard */
:where(a, button, .btn, .neumorphic-btn, [role="button"]):focus:not(:focus-visible) {
    outline: none;
}


/* ── 5. Comfortable touch targets on small screens ──────────── */
@media (max-width: 480px) {
    .qm-chip,
    .notif-action-btn,
    .profile-action-btn,
    .nav-links a {
        min-height: 40px;
    }
}


/* ── 6. Popups / modals / dropdowns — smoother entrance ─────── */
/* These animate the appearance only; they DO NOT change positioning,
   z-index, or display logic handled by existing CSS/JS. */

/* The quiz exit-confirm modal (.modal-overlay) toggles via .hidden and has
   no entrance animation of its own — so we add one here.
   NOTE: the trivia game's .pov/.pbox overlays already have their own
   opacity+spring transitions, so we deliberately do NOT touch them. */
.modal-overlay:not(.hidden),
.modal-overlay.show {
    animation: pl-fade-in 0.22s var(--ease-smooth) both;
}
.modal-overlay:not(.hidden) .modal-content,
.modal-overlay.show .modal-content {
    animation: pl-pop-in 0.28s var(--ease-spring) both;
}

/* Notification / profile / language dropdowns: fade+slide when shown.
   Matches common ".show"/".active"/[aria-expanded] patterns without
   forcing visibility (existing JS controls that). */
.notification-dropdown.show,
.profile-dropdown.show,
.language-dropdown.show,
.notification-dropdown.active,
.profile-dropdown.active,
.language-dropdown.active {
    animation: pl-dropdown-in 0.2s var(--ease-out-soft) both;
}

/* Toast: slightly springier entrance when made visible */
.toast.show,
.toast.active {
    animation: pl-toast-in 0.32s var(--ease-spring) both;
}

@keyframes pl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pl-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes pl-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pl-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── 7. Image loading smoothing (no behavior change) ────────── */
/* When a question image swaps in, fade it rather than hard-cut.
   Works regardless of how src is set; harmless if no image. */
.question-image,
.qimg,
#question-image {
    transition: opacity 0.35s var(--ease-smooth);
}


/* ── 8. Respect users who prefer reduced motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}