/* ============================================= */
/*                  LEXICOOL                     */
/*              Styles Principaux                */
/* ============================================= */

/* ============================================= */
/* IMPORTS                                       */
/* ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');

/* ============================================= */
/* MOBILE FIXES                                  */
/* ============================================= */
.font-wiki {
    font-family: 'Lora', Georgia, serif;
}

/* Prevent elements from staying in active/pressed state on mobile and fix blue highlights */
* {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
.select-none {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Base navigation tab style - minimal override, let Tailwind handle layout */
.nav-tab {
    background-color: transparent;
    color: rgb(100, 116, 139);
    /* Keep transparent border to avoid height flicker when border becomes visible */
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.2s ease;
}

.nav-tab:hover {
    background-color: rgba(203, 213, 225, 0.15);
}

.dark .nav-tab:hover {
    background-color: rgba(51, 65, 85, 0.25);
}

/* Active tab styles - using true Tailwind Palette */

/* Jeu tab - Blue palette: bg-blue-50 text-blue-700 ring-blue-100 */
.nav-tab-active[data-tab="game"] {
    background-color: #f0f9ff;
    color: #0369a1;
    border: 1px solid #e0f2fe;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
    line-height: 1;
}

/* Wiki tab - Purple palette: bg-purple-50 text-purple-700 ring-purple-100 */
.nav-tab-active[data-tab="wiki"] {
    background-color: #faf5ff;
    color: #6b21a8;
    border: 1px solid #f3e8ff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
    line-height: 1;
}

/* Yesterday tab - Indigo palette: bg-indigo-50 text-indigo-700 ring-indigo-100 */
.nav-tab-active[data-tab="yesterday"] {
    background-color: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
    line-height: 1;
}

/* History tab - Orange palette: bg-orange-50 text-orange-700 ring-orange-100 */
.nav-tab-active[data-tab="history"] {
    background-color: #fff7ed;
    color: #b45309;
    border: 1px solid #fed7aa;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
    line-height: 1;
}

/* Dark mode adjustments — use your app theme (.dark), not OS setting */
.dark .nav-tab {
    color: rgb(148, 163, 184);
    /* slate-400 pour mieux voir les onglets inactifs */
}

.dark .nav-tab-active[data-tab="game"] {
    background-color: rgba(3, 105, 161, 0.25);
    color: #93c5fd;
    border-color: #0369a1;
    box-shadow: 0 1px 2px 0 rgba(3, 105, 161, 0.15);
    line-height: 1;
}

.dark .nav-tab-active[data-tab="wiki"] {
    background-color: rgba(126, 34, 206, 0.25);
    color: #d8b4fe;
    border-color: #7e22ce;
    box-shadow: 0 1px 2px 0 rgba(126, 34, 206, 0.15);
    line-height: 1;
}

.dark .nav-tab-active[data-tab="yesterday"] {
    background-color: rgba(67, 56, 202, 0.25);
    color: #a5b4fc;
    border-color: #6366f1;
    /* indigo-500 au lieu de indigo-700 pour être moins sombre */
    box-shadow: 0 1px 2px 0 rgba(67, 56, 202, 0.15);
    line-height: 1;
}

.dark .nav-tab-active[data-tab="history"] {
    background-color: rgba(180, 83, 9, 0.25);
    color: #fdba74;
    border-color: #b45309;
    box-shadow: 0 1px 2px 0 rgba(180, 83, 9, 0.15);
    line-height: 1;
}

/* ============================================= */
/* BASE & TYPOGRAPHY                             */
/* ============================================= */
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

h1,
h2,
h3,
h4,
.font-title {
    font-family: 'Poppins', sans-serif;
}

/* ============================================= */
/* SCROLLBARS                                    */
/* ============================================= */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Wiki Title Scrollbar */
.scrollbar-thin::-webkit-scrollbar {
    height: 3px;
}

.scrollbar-track-transparent::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thumb-purple-300::-webkit-scrollbar-thumb {
    background: #d8b4fe;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.scrollbar-thumb-purple-300:hover::-webkit-scrollbar-thumb {
    background: #c084fc;
}

.dark .scrollbar-thumb-purple-600::-webkit-scrollbar-thumb {
    background: #9333ea;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.dark .scrollbar-thumb-purple-600:hover::-webkit-scrollbar-thumb {
    background: #a855f7;
}

.scrollbar-thumb-slate-300::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

.dark .scrollbar-thumb-slate-600::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 6px;
}

/* ============================================= */
/* PROGRESS BAR                                  */
/* ============================================= */
.bar-striped {
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, .15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .15) 50%,
            rgba(255, 255, 255, .15) 75%,
            transparent 75%,
            transparent);
    background-size: 1rem 1rem;
}

/* ============================================= */
/* LOADER                                        */
/* ============================================= */
.loader {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid currentColor;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

/* ============================================= */
/* KEYFRAMES - CORE ANIMATIONS                   */
/* ============================================= */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fade-in-stagger {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes card-slide-up {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes stat-box-appear {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================= */
/* KEYFRAMES - SHINE & GLOW EFFECTS              */
/* ============================================= */
@keyframes shine-wave {
    0% {
        background-position: -200% center;
        filter: brightness(1);
    }

    50% {
        background-position: 200% center;
        filter: brightness(1.2);
    }

    100% {
        background-position: -200% center;
        filter: brightness(1);
    }
}

@keyframes shine-wave-wiki {
    0% {
        background-position: 200% center;
        filter: brightness(1.2);
    }

    50% {
        background-position: -200% center;
        filter: brightness(1);
    }

    100% {
        background-position: 200% center;
        filter: brightness(1.2);
    }
}

@keyframes shine-wave-amber {
    0% {
        background-position: -200% center;
    }

    50% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

@keyframes joker-shine-diagonal {
    0% {
        transform: translateX(-150%) translateY(-150%) rotate(-45deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(150%) translateY(150%) rotate(-45deg);
        opacity: 0;
    }
}

@keyframes shimmer-glass {
    0% {
        background-position: -1000% 0;
    }

    100% {
        background-position: 1000% 0;
    }
}

@keyframes shimmer-text {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

@keyframes shiny-pass {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes shiny-bar-pass {
    0% {
        background-position: -200% center;
    }

    50% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

/* ============================================= */
/* UTILITY CLASSES                               */
/* ============================================= */
.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

.animate-fade-in-stagger {
    animation: fade-in-stagger 0.4s ease-out forwards;
}

/* Effet Rebond Spring Premium */
.btn-premium-bounce {
    /* Suppression explicite de tout translate-y venant de Tailwind */
    transform: translateY(0) scale(1) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-premium-bounce:active {
    /* Scale vers le bas immédiat lors de l'appui */
    transform: translateY(0) scale(0.95) !important;
    transition: transform 0.1s ease-out !important;
}

/* On désactive l'effet de translation hover pour éviter les conflits avec le spring */
@media (hover: hover) {
    .btn-premium-bounce:hover {
        transform: translateY(0) scale(1);
    }
}

/* ============================================= */
/* SORTABLE TABLES                               */
/* ============================================= */
th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

th.sortable:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dark th.sortable:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================= */
/* ARCHIVE CARDS                                 */
/* ============================================= */
#history-list>div,
#wiki-history-list>div,
#yesterday-table-body>div {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#history-list>div:hover,
#wiki-history-list>div:hover,
#yesterday-table-body>div:hover {
    transform: translateY(-2px) !important;
}

/* Top 10: Blue Accent */
#yesterday-table-body>div.top-ten-card:hover {
    box-shadow: 0 6px 16px -4px rgba(59, 130, 246, 0.18), 0 3px 6px -2px rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

.dark #yesterday-table-body>div.top-ten-card:hover {
    box-shadow: 0 6px 16px -4px rgba(59, 130, 246, 0.25), 0 3px 6px -2px rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

/* 11-20: Neutral Gray */
#yesterday-table-body>div.bottom-ten-card:hover {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.1), 0 3px 6px -2px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
}

.dark #yesterday-table-body>div.bottom-ten-card:hover {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.4), 0 3px 6px -2px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

/* ============================================= */
/* STAGGER ANIMATIONS                            */
/* ============================================= */
.space-y-1\.5>* {
    animation: fade-in-stagger 0.4s ease-out forwards;
}

.space-y-1\.5> :nth-child(1) {
    animation-delay: 0ms;
}

.space-y-1\.5> :nth-child(2) {
    animation-delay: 40ms;
}

.space-y-1\.5> :nth-child(3) {
    animation-delay: 80ms;
}

.space-y-1\.5> :nth-child(4) {
    animation-delay: 120ms;
}

.space-y-1\.5> :nth-child(5) {
    animation-delay: 160ms;
}

.space-y-1\.5> :nth-child(n+6) {
    animation-delay: 200ms;
}

/* Yesterday Top 20 Slide-Up */
#yesterday-table-body>div {
    opacity: 0;
    animation: card-slide-up 0.35s ease-out forwards;
}

#yesterday-table-body>div:nth-child(1) {
    animation-delay: 0ms;
}

#yesterday-table-body>div:nth-child(2) {
    animation-delay: 40ms;
}

#yesterday-table-body>div:nth-child(3) {
    animation-delay: 80ms;
}

#yesterday-table-body>div:nth-child(4) {
    animation-delay: 120ms;
}

#yesterday-table-body>div:nth-child(5) {
    animation-delay: 160ms;
}

#yesterday-table-body>div:nth-child(6) {
    animation-delay: 200ms;
}

#yesterday-table-body>div:nth-child(7) {
    animation-delay: 240ms;
}

#yesterday-table-body>div:nth-child(8) {
    animation-delay: 280ms;
}

#yesterday-table-body>div:nth-child(9) {
    animation-delay: 320ms;
}

#yesterday-table-body>div:nth-child(10) {
    animation-delay: 360ms;
}

#yesterday-table-body>div:nth-child(11) {
    animation-delay: 400ms;
}

#yesterday-table-body>div:nth-child(12) {
    animation-delay: 440ms;
}

#yesterday-table-body>div:nth-child(13) {
    animation-delay: 480ms;
}

#yesterday-table-body>div:nth-child(14) {
    animation-delay: 520ms;
}

#yesterday-table-body>div:nth-child(15) {
    animation-delay: 560ms;
}

#yesterday-table-body>div:nth-child(16) {
    animation-delay: 600ms;
}

#yesterday-table-body>div:nth-child(17) {
    animation-delay: 640ms;
}

#yesterday-table-body>div:nth-child(18) {
    animation-delay: 680ms;
}

#yesterday-table-body>div:nth-child(19) {
    animation-delay: 720ms;
}

#yesterday-table-body>div:nth-child(20) {
    animation-delay: 760ms;
}

/* ============================================= */
/* WIKI MODE - DYNAMIC SIZING                    */
/* ============================================= */
.wiki-content-wrapper {
    display: block;
}

.wiki-container {
    display: inline-grid;
    grid-template-areas: "stack";
    margin: 0.5px 0px;
    vertical-align: middle;
    line-height: 1.4;
}

.wiki-ghost {
    grid-area: stack;
    visibility: hidden;
    white-space: pre;
    font-family: 'Inter', sans-serif;
    font-size: inherit;
    padding: 0px 3px;
    font-weight: 500;
}

.wiki-overlay {
    grid-area: stack;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    font-family: 'Inter', sans-serif;
    font-size: inherit;
    transition: all 0.2s ease;
    z-index: 2;
    box-sizing: border-box;
    background-color: #2d3748;
    color: #cbd5e1;
    padding: 0 3px;
    text-align: center;
    border: none;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    background-color: #f8fafc;
    /* slate-50 */
}

.dark html {
    background-color: #0f172a;
    /* slate-900 */
}

html,
body {
    overflow-x: hidden;
    position: relative;
    /* Limit anchoring at the root only */
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
}

body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: fixed;
    width: 100%;
    /* Stop pull-to-refresh and rubber-banding */
    overscroll-behavior-y: none;
}

.wiki-overlay:hover {
    background-color: #3f4a5a;
}

.dark .wiki-overlay {
    background-color: #0f172a;
    color: #94a3b8;
    border: none;
}

.dark .wiki-overlay:hover {
    background-color: #1e293b;
}

/* ============================================= */
/* WIKI MODE - REVEALED STATES                   */
/* ============================================= */
.wiki-revealed-green {
    color: #000000 !important;
    background-color: rgba(134, 239, 172, 0.8) !important;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 6px;
}

.dark .wiki-revealed-green {
    color: #ffffff !important;
    background-color: #065f46 !important;
}

.wiki-revealed-amber {
    color: #000000 !important;
    background: linear-gradient(90deg, #fbbf24 0%, #fde047 25%, #fbbf24 50%, #fde047 75%, #fbbf24 100%);
    background-size: 200% 100%;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 6px;
    animation: shine-wave-amber 3s ease-in-out infinite;
}

.dark .wiki-revealed-amber {
    color: #000000 !important;
    background: linear-gradient(90deg, #fbbf24 0%, #fde047 25%, #fbbf24 50%, #fde047 75%, #fbbf24 100%);
    background-size: 200% 100%;
    animation: shine-wave-amber 3s ease-in-out infinite;
}

.wiki-revealed-bg {
    color: inherit;
    font-weight: 500;
    cursor: default;
}

/* Wiki Overlay Revealed States */
.wiki-overlay.wiki-revealed-green,
.wiki-overlay.wiki-revealed-amber,
.wiki-overlay.wiki-revealed-bg {
    background-color: transparent;
    border: none;
    padding: 0;
}

.wiki-overlay.wiki-revealed-green {
    background-color: rgba(134, 239, 172, 0.8);
    border-radius: 6px;
    padding: 2px 4px;
    color: #000000;
    font-weight: 600;
}

.wiki-overlay.wiki-revealed-amber {
    background: linear-gradient(90deg, #fbbf24 0%, #fde047 25%, #fbbf24 50%, #fde047 75%, #fbbf24 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    padding: 2px 4px;
    color: #000000;
    font-weight: 600;
    animation: shine-wave-amber 3s ease-in-out infinite;
}

.wiki-overlay.wiki-revealed-bg {
    font-weight: 600;
}

.dark .wiki-overlay.wiki-revealed-green {
    background-color: #065f46;
    color: #ffffff;
}

.dark .wiki-overlay.wiki-revealed-amber {
    background: linear-gradient(90deg, #fbbf24 0%, #fde047 25%, #fbbf24 50%, #fde047 75%, #fbbf24 100%);
    background-size: 200% 100%;
    color: #000000;
    animation: shine-wave-amber 3s ease-in-out infinite;
}

/* ============================================= */
/* WIKI MODE - HINTS                             */
/* ============================================= */
.wiki-hint-text {
    font-weight: bold;
    padding: 0 2px;
}

@media (max-width: 640px) {
    .wiki-hint-text {
        font-size: 0.92em;
        /* Réduction légère demandée par l'user */
    }
}

.wiki-length-hint {
    color: #fbbf24 !important;
    font-weight: 800;
    font-family: monospace;
}

.dark .wiki-length-hint {
    color: #d97706 !important;
}

/* ============================================= */
/* WIKI MODE - TITLE STYLING                     */
/* ============================================= */
.wiki-title-mode {
    font-family: 'Lora', Georgia, serif;
}

.wiki-title-mode .wiki-ghost {
    font-family: 'Lora', Georgia, serif;
    font-weight: 500;
}

.wiki-title-mode .wiki-overlay {
    font-family: 'Lora', Georgia, serif;
}

.wiki-title-mode .wiki-container {
    font-family: 'Lora', Georgia, serif;
    margin: 3px 0;
}

/* ============================================= */
/* TAGS CONTAINER                                */
/* ============================================= */
#tagsContainer {
    max-height: 74px;
}

/* ============================================= */
/* SHINY WORD EFFECT                             */
/* ============================================= */
.shiny-word {
    position: relative;
}

.shiny-word::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(251, 191, 36, 0.6) 45%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(251, 191, 36, 0.4) 75%,
            transparent 100%);
    animation: shiny-pass 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    pointer-events: none;
    border-radius: 4px;
}

/* ============================================= */
/* STAT BOXES                                    */
/* ============================================= */
.stat-box-wiki,
.stat-box-jeu {
    transition: all 0.3s ease;
}

/* ============================================= */
/* ATELIER (WORKSHOP)                            */
/* ============================================= */
.atelier-card {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.dark .atelier-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.mood-orb {
    transition: background-color 0.4s ease, background 0.4s ease;
    will-change: background-color;
}

.category-chip {
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
    cursor: pointer;
    opacity: 0.6;
    transform: scale(0.95);
}

.category-chip.active {
    opacity: 1;
    transform: scale(1.1);
    font-weight: 800;
}

/* ============================================= */
/* TOGGLE SWITCHES                               */
/* ============================================= */
#wikiAttemptsSortToggle,
#gameAttemptsSortToggle {
    position: relative;
}

#wikiAttemptsSortToggle::before,
#gameAttemptsSortToggle::before {
    content: '';
    position: absolute;
    width: calc(50% - 1px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    background: white;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: left 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.dark #wikiAttemptsSortToggle::before,
.dark #gameAttemptsSortToggle::before {
    background: rgb(71, 85, 105);
}

#wikiAttemptsSortToggle.quality::before,
#gameAttemptsSortToggle.score::before {
    left: calc(50% - 1px);
}

#wikiAttemptsSortToggle button,
#gameAttemptsSortToggle button {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

#wikiAttemptsSortToggle button.bg-white,
#gameAttemptsSortToggle button.bg-white {
    background: white !important;
}

/* ============================================= */
/* DALTONIAN MODE                                */
/* ============================================= */
.daltonian {
    background-color: #1a1f2e !important;
    color: #e8e8e8 !important;
}

.daltonian body {
    background: linear-gradient(-45deg, #1a1f2e, #242d3f, #1a1f2e, #1a1f2e) !important;
}

/* ============================================= */
/* RESPONSIVE - TABLET & DESKTOP (sm: 640px+)   */
/* ============================================= */
@media (min-width: 640px) {
    .wiki-ghost {
        padding: 2px 6px;
    }

    .wiki-title-mode {
        font-size: 2.25rem;
    }


    #tagsContainer {
        max-height: 100px;
    }
}

/* Hide webkit search clear buttons to keep original design */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* Modals Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-zoom-in {
    animation: zoomIn 0.3s ease-out forwards;
}

/* Custom Text Glow for Bravo Title */
.text-glow-amber {
    background: linear-gradient(90deg, #f59e0b 0%, #fde047 25%, #f59e0b 50%, #fde047 75%, #f59e0b 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine-wave-amber 8s linear infinite;
    /* First dark shadow for contrast on light bg, second for the amber glow */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.5));
}

.dark .text-glow-amber {
    background: linear-gradient(90deg, #fbbf24 0%, #fef08a 25%, #fbbf24 50%, #fef08a 75%, #fbbf24 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine-wave-amber 8s linear infinite;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.5));
}

/* Bordure de dernier essai adaptative */
.wiki-last-guess {
    box-shadow: inset 3px 0 0 0 #a855f7 !important;
    z-index: 10;
}

@media (min-width: 640px) {
    .wiki-last-guess {
        box-shadow: inset 4px 0 0 0 #a855f7 !important;
    }
}

/* --- ANIMATIONS CHANTIER --- */
@keyframes strike {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-45deg);
    }

    25% {
        transform: rotate(20deg);
    }

    35% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.animate-strike {
    transform-origin: bottom right;
    animation: strike 2.5s ease-in-out infinite;
}

@keyframes float-block {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

.animate-float-block {
    animation: float-block 4s ease-in-out infinite;
}

@keyframes stripe-move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 0;
    }
}

.construction-stripe {
    background-image: linear-gradient(-45deg,
            #fbbf24 25%,
            #1e293b 25%,
            #1e293b 50%,
            #fbbf24 50%,
            #fbbf24 75%,
            #1e293b 75%,
            #1e293b 100%);
    background-size: 40px 40px;
    animation: stripe-move 1s linear infinite;
}

.dark .construction-stripe {
    background-image: linear-gradient(-45deg,
            #f59e0b 25%,
            #0f172a 25%,
            #0f172a 50%,
            #f59e0b 50%,
            #f59e0b 75%,
            #0f172a 75%,
            #0f172a 100%);
    background-size: 40px 40px;
}

/* --- NOUVELLE ANIMATION DYNAMIQUE DES LETTRES --- */
@keyframes appear-float-vanish {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5) rotate(var(--r));
    }

    20% {
        opacity: var(--o-max);
        transform: translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.2)) scale(1) rotate(calc(var(--r) + 15deg));
    }

    80% {
        opacity: var(--o-max);
        transform: translate(calc(var(--tx) * 0.8), calc(var(--ty) * 0.8)) scale(1) rotate(calc(var(--r) - 10deg));
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8) rotate(calc(var(--r) + 5deg));
    }
}

.dyn-letter {
    pointer-events: none;
    will-change: transform, opacity;
    animation: appear-float-vanish var(--dur) ease-in-out forwards;
}

.row-enter {
    animation: slideUpFade 0.3s ease-out forwards;
}

.stagger-item {
    opacity: 0;
}


/* ============================================= */
/* ANIMATIONS JOKER                              */
/* ============================================= */

@keyframes floatSubtle {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes bgShimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes progressScale {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes progressFill {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.animate-float-subtle {
    animation: floatSubtle 4s ease-in-out infinite;
    will-change: transform;
}

.animate-float-subtle-delayed {
    animation: floatSubtle 4s ease-in-out -2s infinite;
    will-change: transform;
}

.animate-bg-shimmer {
    animation: bgShimmer 3s linear infinite;
}

.animate-progress {
    animation: progressFill 5s linear forwards;
}

.capitalize-first::first-letter {
    text-transform: uppercase;
}