/* ═══════════════════════════════════════════════════════════════════════════
   X10 MOTION SYSTEM — one place for durations, easing and feedback.
   Why this file exists: the site's "performance pack" (app-L1151) forces
   `transition-duration/animation-duration: .08s !important` on `*`, which flattens every
   transition. Class selectors beat `*` even when both are !important, so the rules below
   restore real (still short) durations for specific components only. Everything is built on
   the tokens in :root; reduced motion switches the tokens off in one place.
   Only opacity/transform/colour/shadow are animated; no layout properties, no looping effects.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --x10-ease-out: cubic-bezier(.22, 1, .36, 1);     /* entrances */
    --x10-ease-in: cubic-bezier(.4, 0, 1, 1);          /* exits */
    --x10-ease-std: cubic-bezier(.4, 0, .2, 1);
    --x10-dur-fast: 120ms;      /* hover / press / colour feedback */
    --x10-dur-base: 200ms;      /* dialogs, dropdowns, toasts */
    --x10-dur-nav: 280ms;       /* side menu slide */
    --x10-dur-page: 160ms;      /* page fade */
    --x10-dur-pop: 320ms;       /* favourite heart / counter */
    --x10-bg: #001021;
    --x10-gold: #E9A722;
}
@media (prefers-reduced-motion: reduce) {
    :root { --x10-dur-fast: 1ms; --x10-dur-base: 1ms; --x10-dur-nav: 1ms; --x10-dur-page: 1ms; --x10-dur-pop: 1ms; }
}

/* Player preference (Animations: off) — same switch as the OS reduced-motion setting. */
html[data-x10-motion="reduced"] { --x10-dur-fast: 1ms; --x10-dur-base: 1ms; --x10-dur-nav: 1ms; --x10-dur-page: 1ms; --x10-dur-pop: 1ms; }
html[data-x10-motion="reduced"] #app-main, html[data-x10-motion="reduced"] #app-main.x10-enter { animation: none !important; }
html[data-x10-motion="reduced"] body .x10-game-link:active, html[data-x10-motion="reduced"] body .x10i-btn:active, html[data-x10-motion="reduced"] body .x10w-btn:active { transform: none; }

/* Never flash white between pages */
html { background: var(--x10-bg); }

/* ── Page transitions ─────────────────────────────────────────────────────────
   Cross-document View Transitions (Chromium 126+, Safari 18.2+): plain navigation, nothing is
   intercepted. Browsers without support just navigate normally (plus a short CSS fade-in below).
   Pages that do not include this stylesheet (the standalone game-launch pages) never take part. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: x10-vt-out var(--x10-dur-page) var(--x10-ease-in) both; }
::view-transition-new(root) { animation: x10-vt-in var(--x10-dur-page) var(--x10-ease-out) both; }
::view-transition { background: var(--x10-bg); }
@keyframes x10-vt-out { to { opacity: 0; } }
@keyframes x10-vt-in { from { opacity: 0; } }
/* The bottom nav is identical on both pages: keep it out of the cross-fade so it never flickers. */
#x10-bottom-nav { view-transition-name: x10-bottom-nav; }
::view-transition-group(x10-bottom-nav), ::view-transition-old(x10-bottom-nav), ::view-transition-new(x10-bottom-nav) { animation: none; }

/* Fallback (no cross-document support) and lobby<->lobby swaps: a short fade/lift of the main area. */
html.x10-vt-fallback #app-main,
#app-main.x10-enter { animation: x10-page-in var(--x10-dur-page) var(--x10-ease-out) both !important; }
@keyframes x10-page-in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Dialogs (wallet, install) ─ fade + slight scale; sheet on phones ──────── */
html body .x10w-overlay:not([hidden]), html body .x10i-overlay:not([hidden]) { animation: x10-fade-in var(--x10-dur-base) var(--x10-ease-out) both !important; }
html body .x10w-dialog, html body .x10i-dialog { animation-duration: var(--x10-dur-base) !important; animation-timing-function: var(--x10-ease-out) !important; }
@keyframes x10-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Side menu + overlay, login modal, account dropdown ───────────────────── */
html body .tw-overlay { transition-duration: var(--x10-dur-base) !important; transition-timing-function: var(--x10-ease-std) !important; }
html body .tw-menu { transition-duration: var(--x10-dur-nav) !important; transition-timing-function: var(--x10-ease-out) !important; }
/* login/register dialog: motion lives in x10-auth-modal.css (same tokens) */
html body .header .user-menu { animation-duration: var(--x10-dur-base) !important; animation-timing-function: var(--x10-ease-out) !important; }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
html body .x10-toast { animation-duration: var(--x10-dur-base) !important; }
html body .x10-toast-region.is-out .x10-toast { animation-duration: var(--x10-dur-fast) !important; }

/* ── Game cards: lift on hover-capable devices, press feedback on touch ────── */
html body .x10-game-link { transition-duration: var(--x10-dur-base) !important; transition-timing-function: var(--x10-ease-out) !important; }
html body .x10-game-thumb, html body .x10-game-thumb::before { transition-duration: var(--x10-dur-base) !important; }
html body .x10-game-image { transition-duration: var(--x10-dur-base) !important; }
@media (hover: none) {
    /* No hover on touch: a quick press, transform only (no layout shift). */
    html body .x10-game-link { -webkit-tap-highlight-color: transparent; }
    html body .x10-game-link:active { transform: scale(.985); transition-duration: 80ms !important; }
}

/* ── Favourites: heart pop, counter bump ──────────────────────────────────── */
html body .x10-favorite-control svg { transition-duration: var(--x10-dur-fast) !important; }
html body .x10-favorite-control.is-pop svg { animation-duration: var(--x10-dur-pop) !important; }
html body .x10-fav-count { transition-duration: var(--x10-dur-fast) !important; }
html body .x10-fav-count.is-bump { animation: x10-count-bump var(--x10-dur-pop) var(--x10-ease-out) both !important; }
@keyframes x10-count-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ── Buttons, tabs, chips, bottom-nav items: colour/background feedback ────── */
html body .x10w-btn, html body .x10w-tab, html body .x10w-method, html body .x10w-close,
html body .x10i-btn, html body .x10i-close,
html body .x10f-chip, html body .x10f-btn, html body .x10-nav-item { transition-duration: var(--x10-dur-fast) !important; }
html body .x10i-btn:active, html body .x10w-btn:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
    html body .x10-game-link:active { transform: none; }
    html body .x10i-btn:active, html body .x10w-btn:active { transform: none; }
    html.x10-vt-fallback #app-main, #app-main.x10-enter { animation: none !important; }
}

/* ── Session reminder (player-chosen; informational only) ─────────────────────────────────── */
.x10-reminder {
    position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 5000; transform: translateX(-50%);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
    width: min(560px, calc(100vw - 24px)); padding: 12px 14px; box-sizing: border-box;
    border: 1px solid rgba(233,167,34,.45); border-radius: 12px; background: #0A1C30; color: #fff;
    font-size: 13px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0,0,0,.45);
    animation: x10-fade-in var(--x10-dur-base) var(--x10-ease-out) both;
}
.x10-reminder a { color: #E9A722; font-weight: 700; }
.x10-reminder button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }