@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Poppins:wght@500;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap');

    .font-lilita {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 900;
        letter-spacing: 0.05em;
    }

    * {
        font-family: 'Inter', 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #020617;
        overscroll-behavior: none;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
    }

    #root {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column
    }

    .font-emoji {
        font-family: 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', 'Android Emoji', sans-serif;
    }

    .font-lilita {
        font-family: 'Lilita One', 'Noto Color Emoji', 'Segoe UI Emoji', cursive;
    }

    .font-poppins {
        font-family: 'Poppins', 'Noto Color Emoji', 'Segoe UI Emoji', sans-serif;
    }

    button,
    input,
    select,
    textarea {
        font-family: 'Inter', 'Noto Color Emoji', 'Segoe UI Emoji', sans-serif;
    }

    body {
        overscroll-behavior-y: none;
        -webkit-user-select: none;
        user-select: none;
        height: 100vh;
        font-family: Inter, sans-serif;
        background-color: transparent
    }

    .status-bar-spacer {
        height: 50px;
        width: 100%;
        flex-shrink: 0;
        background-color: transparent
    }

    body.no-scroll #root {
        overflow: hidden
    }

    .nav-bar-spacer {
        height: 5px;
        width: 100%;
        flex-shrink: 0
    }

    .grid {
        -webkit-tap-highlight-color: transparent
    }

    .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: #9ca3af #e5e7eb
    }

    .scrollbar-thin::-webkit-scrollbar {
        width: 5px
    }

    .scrollbar-thin::-webkit-scrollbar-track {
        background: #e5e7eb;
        border-radius: 10px
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: #9ca3af;
        border-radius: 10px;
        border: 1px solid #e5e7eb
    }

    .shake-animation {
        animation: shake .3s ease-in-out
    }

    .hidden-word-start-letter {
        color: #0d6efd !important;
        font-weight: 900
    }

    .animate-hint-pulse {
        animation: pulse-hint 1.5s infinite ease-in-out;
        color: #713f12 !important;
        font-weight: 900
    }

    .animate-word-found {
        animation: word-found-animation .6s ease-out
    }

    .dynamic-grid {
        display: grid;
        grid-template-columns: repeat(var(--grid-cols, 6), 1fr)
    }

    .no-selection {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none
    }



    .animate-float-up {
        animation: float-up 1s ease-out forwards
    }

    @keyframes shine {
        0% {
            transform: translateX(-100%) skewX(-15deg)
        }

        100% {
            transform: translateX(200%) skewX(-15deg)
        }
    }

    @keyframes slide-up {
        from {
            transform: translateY(100%)
        }

        to {
            transform: translateY(0)
        }
    }

    .animate-slide-up {
        animation: slide-up .5s ease-out forwards
    }

    @keyframes word-found-animation {
        0% {
            transform: scale(1);
            background-color: #6ee7b7;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, .7)
        }

        50% {
            transform: scale(1.1);
            background-color: #34d399;
            box-shadow: 0 0 15px 5px rgba(16, 185, 129, .5)
        }

        100% {
            transform: scale(1);
            background-color: #6ee7b7;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
        }
    }

    .animate-bonus-glow {
        animation: bonus-double-glow-animation 1.2s ease-out
    }

    @keyframes bonus-double-glow-animation {
        0% {
            transform: scale(1)
        }

        25% {
            transform: scale(1.15);
            background-color: #fde047;
            box-shadow: 0 0 15px #facc15
        }

        50% {
            transform: scale(1)
        }

        75% {
            transform: scale(1.15);
            background-color: #fde047;
            box-shadow: 0 0 15px #facc15
        }

        100% {
            transform: scale(1)
        }
    }

    .bg-logo-animated-gradient {
        background-image: url(background.jpg);
        background-size: cover;
        background-position: center center
    }

    @keyframes logo-gradient-animation {
        0% {
            background-position: 0 50%
        }

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

        100% {
            background-position: 0 50%
        }
    }

    #loader.hidden {
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s ease-out, visibility .5s ease-out
    }

    #loader-progress {
        animation: loading-progress 1.5s ease-in-out forwards
    }

    .trophy-container {
        perspective: 300px
    }

    .animate-trophy {
        display: inline-block;
        position: relative;
        overflow: hidden;
        transform-style: preserve-3d;
        animation: trophy-3d-spin 2.2s ease-in-out
    }

    .animate-trophy::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 20%;
        height: 200%;
        opacity: 0;
        transform: rotate(35deg);
        background: rgba(255, 255, 255, .2);
        background: linear-gradient(to right, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .13) 77%, rgba(255, 255, 255, .5) 92%, rgba(255, 255, 255, 0) 100%);
        animation: trophy-shine 2.2s ease-in-out infinite;
        animation-delay: .5s
    }

    @keyframes trophy-shine {
        0% {
            transform: scale(0) rotate(45deg);
            opacity: 0
        }

        80% {
            transform: scale(0) rotate(45deg);
            opacity: .5
        }

        81% {
            transform: scale(4) rotate(45deg);
            opacity: 1
        }

        100% {
            transform: scale(50) rotate(45deg);
            opacity: 0
        }
    }

    @keyframes trophy-3d-spin {
        0% {
            transform: scale(1) rotateY(0)
        }

        15% {
            transform: scale(.9) rotateY(20deg) rotateZ(-3deg)
        }

        30% {
            transform: scale(1.1) rotateY(-15deg) rotateZ(3deg)
        }

        50% {
            transform: scale(1.15) rotateY(10deg) rotateZ(-3deg)
        }

        70% {
            transform: scale(1.1) rotateY(-5deg) rotateZ(3deg)
        }

        85% {
            transform: scale(1) rotateY(0) rotateZ(0)
        }

        100% {
            transform: scale(1) rotateY(0)
        }
    }

    @keyframes loading-progress {
        0% {
            width: 0%
        }

        100% {
            width: 100%
        }
    }

    .no-touch-scroll {
        touch-action: none
    }

    @keyframes time-up-icon-pop {
        0% {
            transform: scale(.5);
            opacity: 0
        }

        60% {
            transform: scale(1.1);
            opacity: 1
        }

        80% {
            transform: scale(.95) rotate(-5deg)
        }

        100% {
            transform: scale(1) rotate(0)
        }
    }

    @keyframes fade-in-delay {
        from {
            opacity: 0;
            transform: translateY(10px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .animate-time-up-icon {
        animation: time-up-icon-pop .8s ease-out forwards
    }

    .animate-fade-in-1 {
        opacity: 0;
        animation: fade-in-delay .6s ease-out .4s forwards
    }

    .animate-fade-in-2 {
        opacity: 0;
        animation: fade-in-delay .6s ease-out .7s forwards
    }

    .animate-fade-in-3 {
        opacity: 0;
        animation: fade-in-delay .6s ease-out 1s forwards
    }

    .found-word-effect {
        position: relative;
        overflow: hidden;
        animation: word-found-glow-effect .8s ease-out
    }

    .found-word-effect::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
        transform: translateX(-100%);
        animation: shine-sweep .8s ease-out
    }

    @keyframes word-found-glow-effect {
        0% {
            transform: scale(1);
            box-shadow: none
        }

        50% {
            transform: scale(1.15);
            background-color: #fde047;
            box-shadow: 0 0 15px #facc15;
            color: #713f12
        }

        100% {
            transform: scale(1);
            box-shadow: none
        }
    }

    @keyframes shine-sweep {
        0% {
            transform: translateX(-100%)
        }

        100% {
            transform: translateX(100%)
        }
    }

    .animate-timer-pulse {
        animation: pulse-timer .5s ease-out
    }

    @keyframes pulse-timer {
        0% {
            transform: scale(1)
        }

        40% {
            transform: scale(1.15);
            color: #ef4444
        }

        100% {
            transform: scale(1)
        }
    }

    .toast-container-top {
        animation: toast-slide-down 3s ease-in-out forwards
    }

    @keyframes toast-slide-down {
        0% {
            transform: translateY(-150%);
            opacity: 0
        }

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

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

        100% {
            transform: translateY(-150%);
            opacity: 0
        }
    }

    @keyframes shake {
        0% {
            transform: translateX(0)
        }

        25% {
            transform: translateX(-5px)
        }

        50% {
            transform: translateX(5px)
        }

        75% {
            transform: translateX(-5px)
        }

        100% {
            transform: translateX(0)
        }
    }

    @keyframes gradient-animation {
        0% {
            background-position: 0 50%
        }

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

        100% {
            background-position: 0 50%
        }
    }

    @keyframes spin-once {
        0% {
            transform: rotate(0)
        }

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

    .animate-spin-once {
        animation: spin-once .5s ease-in-out
    }

    @keyframes pulse-success {
        0% {
            stroke: rgba(255, 255, 255, .1);
            stroke-width: 1
        }

        50% {
            stroke: #4ade80;
            stroke-width: 8;
            fill: rgba(74, 222, 128, .2)
        }

        100% {
            stroke: rgba(255, 255, 255, .1);
            stroke-width: 1
        }
    }

    .animate-pulse-success {
        animation: pulse-success .4s ease-out
    }

    @keyframes pulse-bonus {
        0% {
            stroke: rgba(255, 255, 255, .1);
            stroke-width: 1
        }

        50% {
            stroke: #fbbf24;
            stroke-width: 8;
            fill: rgba(251, 191, 36, .2)
        }

        100% {
            stroke: rgba(255, 255, 255, .1);
            stroke-width: 1
        }
    }

    .animate-pulse-bonus {
        animation: pulse-bonus .4s ease-out
    }

    @keyframes flash-error {
        0% {
            stroke: #ef4444;
            stroke-width: 4
        }

        100% {
            stroke: rgba(255, 255, 255, .1);
            stroke-width: 1
        }
    }

    .animate-flash-error {
        animation: flash-error .4s ease-out
    }

    .animate-spin-slow {
        animation: spin-slow 3s linear infinite
    }

    @keyframes spin-slow {
        from {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    .animate-loading-bar-slide {
        width: 40%;
        animation: loading-bar-slide 1.5s ease-in-out infinite
    }

    @keyframes loading-bar-slide {
        0% {
            transform: translateX(-150%)
        }

        100% {
            transform: translateX(300%)
        }
    }

    @keyframes explode-letter {
        0% {
            transform: scale(1);
            opacity: 1;
            filter: blur(0)
        }

        50% {
            transform: scale(1.6) rotate(20deg);
            opacity: 1;
            background-color: #fef08a
        }

        100% {
            transform: scale(.2) rotate(-20deg);
            opacity: 0;
            filter: blur(8px)
        }
    }

    .animate-explode {
        animation-name: explode-letter;
        animation-duration: .8s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
        transform-origin: center center
    }

    @keyframes page-fade-in {
        from {
            opacity: 0;
            transform: scale(.98)
        }

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

    .page-container-animated {
        animation: page-fade-in .4s ease-out forwards
    }

    @keyframes score-pulse-animation {
        0% {
            transform: scale(1)
        }

        50% {
            transform: scale(1.3) rotate(5deg);
            color: #f59e0b
        }

        100% {
            transform: scale(1)
        }
    }

    .animate-score-pulse {
        animation: score-pulse-animation .5s ease-out
    }

    .transition-all {
        transition-timing-function: ease-out;
        transition-duration: .2s
    }

    [role=button]:not([aria-disabled=true]):active,
    button:not([disabled]):active {
        transform: scale(.96) translateY(1px);
        filter: brightness(.9);
        transition-duration: .1s
    }

    .group:hover .transition-transform {
        transform: scale(1.1) rotate(5deg)
    }

    @keyframes gentle-wave {
        0% {
            transform: rotate(10deg)
        }

        100% {
            transform: rotate(-15deg)
        }
    }

    .animate-wave {
        display: inline-block;
        transform-origin: bottom center;
        animation: gentle-wave .8s ease-in-out infinite alternate
    }

    @keyframes exit-icon-float {
        0% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-10px)
        }

        100% {
            transform: translateY(0)
        }
    }

    .animate-exit-icon {
        animation: exit-icon-float 3s ease-in-out infinite
    }

    @keyframes trophy-glow {
        0% {
            box-shadow: 0 0 15px 0 rgba(255, 215, 0, .6)
        }

        50% {
            box-shadow: 0 0 30px 10px rgba(255, 215, 0, .8)
        }

        100% {
            box-shadow: 0 0 15px 0 rgba(255, 215, 0, .6)
        }
    }

    @keyframes confetti-fall {
        0% {
            transform: translateY(-10vh) rotateZ(0);
            opacity: 1
        }

        100% {
            transform: translateY(100vh) rotateZ(360deg);
            opacity: 0
        }
    }

    .confetti-piece {
        position: absolute;
        top: 0;
        animation: confetti-fall 4s linear infinite
    }

    .neon-title-container {
        font-family: 'Lilita One', cursive;
        font-size: clamp(3rem, 18vw, 5.5rem);
        text-align: center;
        letter-spacing: 3px;
        line-height: 1.1;
        transform: scaleY(1.1);
    }

    .neon-title-container span {
        transition: text-shadow .2s ease-in-out;
        text-shadow: 0 0 5px #fff, 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 40px var(--glow-color)
    }

    .neon-amber {
        --glow-color: #f59e0b;
        color: #fde047
    }

    .neon-rose {
        --glow-color: #f43f5e;
        color: #fda4af
    }

    .neon-cyan {
        --glow-color: #06b6d4;
        color: #67e8f9
    }

    .flicker {
        animation: flicker 6s linear infinite
    }

    .flicker-delay-1 {
        animation-delay: 2.1s
    }

    .flicker-delay-2 {
        animation-delay: 4.5s
    }

    @keyframes flicker {

        0%,
        100%,
        18%,
        22%,
        25%,
        53%,
        57% {
            text-shadow: 0 0 4px #fff, 0 0 11px var(--glow-color), 0 0 19px var(--glow-color), 0 0 40px var(--glow-color);
            opacity: 1
        }

        20%,
        24%,
        55% {
            text-shadow: none;
            opacity: .7
        }
    }

    .bonus-word-found {
        background-color: #fde047 !important;
        color: #713f12 !important;
        border: 2px solid #facc15;
        text-decoration: none !important
    }

    .bonus-header {
        width: 100%;
        text-align: center;
        margin-top: 12px;
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 700;
        color: #d97706;
        text-transform: uppercase
    }

    .bonus-word-item {
        background-image: linear-gradient(to right, #f59e0b, #efae3d);
        color: #fff;
        border-radius: 9999px;
        padding: 4px 12px;
        font-weight: 700;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        text-decoration: none !important
    }



    @media (max-width: 768px) {
        * {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }

        .bg-gradient-to-br,
        .bg-gradient-to-r,
        .bg-gradient-to-b {
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
        }

        .animate-pulse {
            animation-duration: 3s !important;
        }
    }

    @media (max-width: 768px) {

        .backdrop-blur-xl,
        .backdrop-blur-md {
            backdrop-filter: none !important;
            background-color: rgba(15, 23, 42, 0.95) !important;
        }
    }

    @media (max-width: 768px) {

        .animate-pulse,
        .animate-float-up,
        .drop-shadow-2xl,
        .shadow-2xl {
            animation: none !important;
            filter: none !important;
            box-shadow: none !important;
        }

        * {
            transition-duration: 0ms !important;
        }
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }



    .animate-slide-down {
        animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .gravity-grid {
        touch-action: none !important;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: auto;
    }



    .cell-pop {
        animation: popOut 0.3s ease-out forwards;
        z-index: 50;
    }

    .neon-word {
        font-family: 'Poppins', sans-serif;
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.8),
            0 0 10px rgba(255, 255, 255, 0.5),
            0 0 20px rgba(236, 72, 153, 0.5),
            0 0 40px rgba(236, 72, 153, 0.3);
        background: linear-gradient(to bottom, #fff, #fbcfe8);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }



    .hint-snake-anim {
        animation: snakeHighlight 1.5s ease-in-out forwards;
    }



    .cell-explosion {
        animation: realExplosion 0.6s cubic-bezier(0.1, 0.7, 1.0, 0.1) forwards !important;
        border: none !important;
    }


    .cell-shuffle {
        animation: shuffleSpin 0.6s ease-in-out forwards !important;
        z-index: 50;
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
        color: #ffffff !important;
    }



    .cell-blackhole {
        animation: blackHoleIn 0.6s ease-in forwards !important;
        z-index: 100;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        border: none !important;
    }

    @keyframes float-up {
        0% {
            transform: translateY(0) scale(.5);
            opacity: 0
        }

        20% {
            transform: translateY(-20px) scale(1.2);
            opacity: 1
        }

        80% {
            transform: translateY(-50px) scale(1);
            opacity: 1
        }

        100% {
            transform: translateY(-80px) scale(.8);
            opacity: 0
        }
    }

    @keyframes blackHoleIn {
        0% {
            transform: scale(1) rotate(0deg);
            background-color: #ef4444;
        }

        100% {
            transform: scale(0) rotate(720deg);
            background-color: #fff;
            opacity: 0;
            border-radius: 50%;
        }
    }

    @keyframes shuffleSpin {
        0% {
            transform: scale(1) rotate(0deg);
            opacity: 1;
            color: #ffffff;
        }

        50% {
            transform: scale(0.8) rotate(180deg);
            opacity: 0.6;
            filter: blur(2px);
            color: #ffffff;
        }

        100% {
            transform: scale(1) rotate(360deg);
            opacity: 1;
            filter: blur(0);
            color: #ffffff;
        }
    }

    @keyframes realExplosion {
        0% {
            transform: scale(1);
            background-color: #ef4444;
            box-shadow: 0 0 0 rgba(239, 68, 68, 0);
        }

        40% {
            transform: scale(1.4) rotate(5deg);
            background-color: #fef08a;
            color: #ffffff;
            box-shadow: 0 0 30px #fef08a, 0 0 60px #ef4444;
            z-index: 100;
        }

        100% {
            transform: scale(2) rotate(-5deg);
            opacity: 0;
            filter: blur(4px);
        }
    }

    @keyframes snakeHighlight {
        0% {
            transform: scale(1);
            background-color: rgba(51, 65, 85, 0.6);
        }

        20% {
            transform: scale(1.25);
            background-color: #fbbf24;
            color: #020617;
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
            border-color: white;
            z-index: 50;
        }

        80% {
            transform: scale(1.25);
            background-color: #fbbf24;
            color: #020617;
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
            border-color: white;
            z-index: 50;
        }

        100% {
            transform: scale(1);
            background-color: rgba(51, 65, 85, 0.6);
        }
    }

    @keyframes popOut {
        0% {
            transform: scale(1);
            filter: brightness(1);
        }

        50% {
            transform: scale(1.4);
            filter: brightness(2);
            background-color: #fff;
        }

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

    @keyframes slideDown {
        0% {
            transform: translateY(-50px);
            opacity: 0;
        }

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

    @keyframes fill-progress {
        from {
            width: 0%
        }

        to {
            width: 100%
        }
    }