:root {
    --fx-ease: cubic-bezier(.22, 1, .36, 1);
    --fx-fast: 180ms;
    --fx-normal: 420ms;
    --fx-slow: 760ms;
}

html.fx-navigating {
    pointer-events: none;
}

body {
    opacity: 1;
    transition: opacity 180ms ease, transform 220ms var(--fx-ease), filter 220ms ease;
}

html.fx-navigating body {
    opacity: .7;
    transform: translateY(6px) scale(.997);
    filter: blur(1px);
}

[data-fx-reveal],
.game-card,
.recommend-card,
.level-card,
.home-stat-grid > article,
.leader-row,
.achievement-item,
.result-metric {
    --fx-delay: 0ms;
}

.fx-ready [data-fx-reveal]:not(.fx-visible),
.fx-ready .game-card:not(.fx-visible),
.fx-ready .recommend-card:not(.fx-visible),
.fx-ready .level-card:not(.fx-visible),
.fx-ready .home-stat-grid > article:not(.fx-visible),
.fx-ready .leader-row:not(.fx-visible),
.fx-ready .achievement-item:not(.fx-visible),
.fx-ready .result-metric:not(.fx-visible) {
    opacity: 0;
    transform: translateY(20px) scale(.985);
}

[data-fx-reveal].fx-visible,
.game-card.fx-visible,
.recommend-card.fx-visible,
.level-card.fx-visible,
.home-stat-grid > article.fx-visible,
.leader-row.fx-visible,
.achievement-item.fx-visible,
.result-metric.fx-visible {
    animation: fx-reveal var(--fx-slow) var(--fx-ease) both;
    animation-delay: var(--fx-delay);
}

[data-fx-press],
.primary-button,
.secondary-button,
.ghost-button,
.link-button,
.game-card,
.recommend-card,
.level-card:not(.is-locked),
.user-chip,
.notification-button {
    transition: transform var(--fx-fast) var(--fx-ease), box-shadow var(--fx-normal) var(--fx-ease), filter var(--fx-fast) ease, border-color var(--fx-fast) ease;
}

[data-fx-press]:active,
.primary-button:active,
.secondary-button:active,
.ghost-button:active,
.link-button:active,
.game-card:active,
.recommend-card:active,
.level-card:not(.is-locked):active,
.user-chip:active,
.notification-button:active {
    transform: translateY(2px) scale(.975);
}

.game-card:hover,
.recommend-card:hover,
.level-card:not(.is-locked):hover {
    transform: translateY(-7px) scale(1.01);
    filter: saturate(1.05);
}

.level-card.is-current {
    animation: fx-current-level 2.8s ease-in-out infinite;
}

.level-card.is-available::after,
.level-card.is-current::after,
.daily-challenge.is-ready::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.7) 46%, transparent 72%);
    transform: translateX(130%);
    pointer-events: none;
    animation: fx-shine 4.5s ease-in-out infinite;
}

.level-card.is-complete .stars {
    animation: fx-star-glow 2.6s ease-in-out infinite;
}

.progress-track > span {
    transition: width 900ms var(--fx-ease), transform 900ms var(--fx-ease), filter 400ms ease;
    transform-origin: right center;
}

.progress-track.fx-complete > span {
    animation: fx-progress-complete 900ms var(--fx-ease);
}

.daily-challenge {
    position: relative;
    overflow: hidden;
}

.daily-challenge.is-ready {
    border-color: rgba(32,183,120,.42);
    box-shadow: 0 20px 45px rgba(29,184,209,.12), inset 0 0 0 1px rgba(255,255,255,.7);
}

.daily-challenge.is-ready img {
    animation: fx-gift-ready 2s var(--fx-ease) infinite;
    transform-origin: 50% 75%;
}

.daily-reward-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 14px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #1768f2, #2f8cff);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(23,104,242,.24);
}

.daily-reward-action::before {
    content: "✦";
    animation: fx-spark 1.2s ease-in-out infinite;
}

.daily-reward-action.is-opened {
    background: rgba(32,183,120,.12);
    color: #137b54;
    box-shadow: none;
    cursor: default;
}

.daily-reward-action.is-opened::before {
    content: "✓";
    animation: none;
}

[data-fx-number] {
    font-variant-numeric: tabular-nums;
}

.fx-score-pop {
    animation: fx-score-pop 650ms var(--fx-ease);
}

.fx-shake {
    animation: fx-shake 420ms ease;
}

.fx-success-pulse {
    animation: fx-success-pulse 760ms var(--fx-ease);
}

.fx-question-out {
    animation: fx-question-out 240ms ease both;
}

.fx-question-in {
    animation: fx-question-in 560ms var(--fx-ease) both;
}

.fx-timer-half {
    animation: fx-timer-half 720ms var(--fx-ease);
}

.fx-timer-warning {
    animation: fx-timer-warning var(--timer-beat-duration, 980ms) ease-in-out infinite;
}

.fx-timer-danger {
    animation: fx-timer-danger var(--timer-beat-duration, 430ms) ease-in-out infinite;
}

.fx-timer-danger [data-timer-value] {
    font-size: 1.18em;
    letter-spacing: .04em;
}

.fx-timer-bonus {
    animation: fx-timer-bonus 900ms var(--fx-ease);
}

.fx-floating-reward {
    position: fixed;
    z-index: 10040;
    display: grid;
    place-items: center;
    min-width: 76px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: #0b2e66;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 16px 40px rgba(14,46,96,.24);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.fx-streak-banner {
    position: fixed;
    z-index: 10035;
    inset-inline-start: 50%;
    top: max(86px, env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9a24, #ff5d2b);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 18px 38px rgba(255,93,43,.3);
    transform: translateX(50%);
    animation: fx-streak-banner 2.1s var(--fx-ease) both;
    pointer-events: none;
}

.fx-streak-banner b {
    font-size: 22px;
}

.fx-celebration-layer {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5,22,50,.66);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 260ms ease;
}

.fx-celebration-layer.is-visible {
    opacity: 1;
}

.fx-celebration-card {
    position: relative;
    width: min(520px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    padding: 34px 28px 28px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 0, rgba(83,165,255,.24), transparent 42%),
        linear-gradient(180deg, #fff, #f7fbff);
    color: #0a2d64;
    text-align: center;
    box-shadow: 0 36px 90px rgba(3,23,55,.34);
    transform: translateY(28px) scale(.92);
    transition: transform 520ms var(--fx-ease);
    isolation: isolate;
}

.fx-celebration-layer.is-visible .fx-celebration-card {
    transform: translateY(0) scale(1);
}

.fx-celebration-card::before,
.fx-celebration-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
}

.fx-celebration-card::before {
    width: 180px;
    height: 180px;
    inset-inline-start: -80px;
    top: 25%;
    background: rgba(29,184,209,.14);
}

.fx-celebration-card::after {
    width: 220px;
    height: 220px;
    inset-inline-end: -110px;
    bottom: 5%;
    background: rgba(139,92,230,.12);
}

.fx-celebration-skip {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    z-index: 2;
    min-height: 38px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(10,45,100,.07);
    color: #52657e;
    font: inherit;
    cursor: pointer;
}

.fx-celebration-burst {
    position: absolute;
    left: 50%;
    top: 116px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(47,125,244,.16) 0 7deg, transparent 7deg 15deg);
    transform: translateX(-50%);
    animation: fx-spin 14s linear infinite;
    pointer-events: none;
}

.fx-celebration-image-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    margin: 14px auto 8px;
}

.fx-celebration-image {
    position: relative;
    z-index: 1;
    width: 164px;
    height: 164px;
    object-fit: contain;
    filter: drop-shadow(0 22px 22px rgba(11,50,105,.2));
    animation: fx-prize-arrive 720ms var(--fx-ease) both;
}

.fx-celebration-layer[data-type="gift"] .fx-celebration-image {
    animation: fx-gift-open 1.3s var(--fx-ease) both;
}

.fx-celebration-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(23,104,242,.1);
    color: #1768f2;
    font-size: 13px;
    font-weight: 800;
}

.fx-celebration-title {
    margin: 10px 0 8px;
    font-size: clamp(29px, 6vw, 42px);
    line-height: 1.2;
    letter-spacing: -.035em;
}

.fx-celebration-message {
    margin: 0 auto;
    max-width: 390px;
    color: #60718c;
    font-size: 16px;
    line-height: 1.9;
}

.fx-celebration-reward {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 18px;
    padding: 12px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(253,181,21,.18), rgba(255,220,87,.12));
    color: #8c5b00;
    font-weight: 900;
    animation: fx-score-pop 700ms 420ms var(--fx-ease) both;
}

.fx-celebration-reward strong {
    font-size: 30px;
    font-variant-numeric: tabular-nums;
}

.fx-celebration-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.fx-celebration-action {
    min-width: 150px;
    min-height: 50px;
    padding: 10px 20px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #1768f2, #2f8cff);
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(23,104,242,.24);
}

.fx-celebration-secondary {
    background: rgba(10,45,100,.07);
    color: #315276;
    box-shadow: none;
}

.fx-particle-canvas {
    position: fixed;
    z-index: 10045;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fx-countdown {
    position: fixed;
    z-index: 10060;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(23,104,242,.8), rgba(4,25,58,.92));
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: opacity 220ms ease;
}

.fx-countdown.is-visible {
    opacity: 1;
}

.fx-countdown-inner small {
    display: block;
    margin-bottom: 10px;
    font-weight: 800;
    opacity: .85;
}

.fx-countdown-value {
    display: block;
    min-width: 180px;
    font-size: clamp(80px, 24vw, 150px);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 18px 48px rgba(0,0,0,.28);
    animation: fx-countdown-pop 700ms var(--fx-ease) both;
}

.fx-countdown-value.is-word {
    font-size: clamp(50px, 14vw, 96px);
}

.fx-results-root .results-hero img {
    animation: fx-trophy-float 3.2s ease-in-out infinite;
}

.fx-results-root .progress-ring {
    transform: scale(.88);
    opacity: .4;
    transition: transform 850ms var(--fx-ease), opacity 550ms ease;
}

.fx-results-root.fx-results-active .progress-ring {
    transform: scale(1);
    opacity: 1;
}

.fx-results-root .results-summary .stars span,
.fx-animated-star {
    display: inline-block;
    animation: fx-star-award 700ms var(--fx-ease) both;
}

.leader-row.is-current-player {
    position: relative;
    border-color: rgba(23,104,242,.36);
    background: linear-gradient(90deg, rgba(23,104,242,.08), rgba(255,255,255,.92));
    animation: fx-current-player 1.2s var(--fx-ease) both;
}

.leader-rank {
    transition: transform 420ms var(--fx-ease);
}

.leader-row:hover .leader-rank {
    transform: scale(1.14) rotate(-4deg);
}

.achievement-item:hover .badge-icon {
    animation: fx-badge-turn 720ms var(--fx-ease);
}

@keyframes fx-reveal {
    from { opacity: 0; transform: translateY(20px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fx-current-level {
    0%, 100% { box-shadow: 0 10px 30px rgba(23,104,242,.08); }
    50% { box-shadow: 0 18px 46px rgba(23,104,242,.22); }
}

@keyframes fx-shine {
    0%, 62% { transform: translateX(130%); }
    85%, 100% { transform: translateX(-130%); }
}

@keyframes fx-star-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(253,181,21,0)); }
    50% { filter: drop-shadow(0 0 9px rgba(253,181,21,.55)); }
}

@keyframes fx-progress-complete {
    0% { filter: brightness(1); transform: scaleY(1); }
    45% { filter: brightness(1.5); transform: scaleY(1.7); }
    100% { filter: brightness(1); transform: scaleY(1); }
}

@keyframes fx-gift-ready {
    0%, 100% { transform: translateY(0) rotate(0); }
    8% { transform: translateY(-5px) rotate(-4deg); }
    16% { transform: translateY(-5px) rotate(4deg); }
    24% { transform: translateY(0) rotate(0); }
}

@keyframes fx-spark {
    0%, 100% { transform: scale(.8) rotate(0); opacity: .7; }
    50% { transform: scale(1.25) rotate(90deg); opacity: 1; }
}

@keyframes fx-score-pop {
    0% { transform: scale(.72); opacity: 0; }
    55% { transform: scale(1.16); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fx-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(7px); }
    40% { transform: translateX(-6px); }
    60% { transform: translateX(4px); }
    80% { transform: translateX(-2px); }
}

@keyframes fx-success-pulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.035); box-shadow: 0 0 0 10px rgba(32,183,120,.1); }
    100% { transform: scale(1); }
}

@keyframes fx-question-out {
    to { opacity: 0; transform: translateX(26px) scale(.985); }
}

@keyframes fx-question-in {
    from { opacity: 0; transform: translateX(-30px) scale(.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes fx-timer-half {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(23,104,242,0); }
    45% { transform: scale(1.08); box-shadow: 0 0 0 9px rgba(23,104,242,.12); }
}

@keyframes fx-timer-bonus {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.16); box-shadow: 0 0 0 10px rgba(32,183,120,.14); }
    70% { transform: scale(1.05); }
}

@keyframes fx-timer-warning {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes fx-timer-danger {
    0%, 100% { transform: scale(1); filter: saturate(1); }
    50% { transform: scale(1.14); filter: saturate(1.6); }
}

@keyframes fx-streak-banner {
    0% { opacity: 0; transform: translateX(50%) translateY(-24px) scale(.85); }
    22%, 78% { opacity: 1; transform: translateX(50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(50%) translateY(-10px) scale(.95); }
}

@keyframes fx-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes fx-prize-arrive {
    0% { opacity: 0; transform: translateY(30px) scale(.55) rotate(-10deg); }
    65% { opacity: 1; transform: translateY(-8px) scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes fx-gift-open {
    0% { opacity: 0; transform: translateY(34px) scale(.55) rotate(-8deg); }
    35% { opacity: 1; transform: translateY(0) scale(1.05) rotate(0); }
    48% { transform: translateY(-7px) scale(1.08) rotate(-4deg); }
    60% { transform: translateY(-7px) scale(1.08) rotate(4deg); }
    78% { transform: translateY(-14px) scale(1.13) rotate(0); filter: brightness(1.2) drop-shadow(0 22px 22px rgba(11,50,105,.2)); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes fx-countdown-pop {
    0% { opacity: 0; transform: scale(.35); }
    55% { opacity: 1; transform: scale(1.18); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes fx-trophy-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes fx-star-award {
    0% { opacity: 0; transform: translateY(18px) scale(.2) rotate(-30deg); }
    65% { opacity: 1; transform: translateY(-5px) scale(1.2) rotate(8deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes fx-current-player {
    0% { transform: scale(.97); opacity: .4; }
    60% { transform: scale(1.015); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes fx-badge-turn {
    0% { transform: rotateY(0) scale(1); }
    50% { transform: rotateY(180deg) scale(1.16); }
    100% { transform: rotateY(360deg) scale(1); }
}

@media (max-width: 640px) {
    .fx-celebration-card {
        padding: 30px 18px 22px;
        border-radius: 26px;
    }

    .fx-celebration-image-wrap {
        width: 160px;
        height: 160px;
    }

    .fx-celebration-image {
        width: 142px;
        height: 142px;
    }

    .fx-celebration-actions {
        flex-direction: column;
    }

    .fx-celebration-action {
        width: 100%;
    }

    .fx-streak-banner {
        max-width: calc(100vw - 24px);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .fx-ready [data-fx-reveal]:not(.fx-visible),
    .fx-ready .game-card:not(.fx-visible),
    .fx-ready .recommend-card:not(.fx-visible),
    .fx-ready .level-card:not(.fx-visible),
    .fx-ready .home-stat-grid > article:not(.fx-visible),
    .fx-ready .leader-row:not(.fx-visible),
    .fx-ready .achievement-item:not(.fx-visible),
    .fx-ready .result-metric:not(.fx-visible) {
        opacity: 1;
        transform: none;
    }
}

[data-haptics-toggle] .game-tools-sound-icon {
    color: #1768f2;
    font-size: 25px;
    font-weight: 900;
}

.order-tile {
    transition: transform 180ms var(--fx-ease), border-color 180ms ease, background 180ms ease, box-shadow 220ms var(--fx-ease), opacity 180ms ease;
}

.order-tile:hover {
    transform: translateY(-2px);
}

.order-tile.is-correct-position {
    animation: fx-tile-correct 620ms var(--fx-ease);
}

.feedback-panel.is-success .feedback-icon {
    animation: fx-feedback-success 650ms var(--fx-ease);
}

.feedback-panel.is-error .feedback-icon {
    animation: fx-feedback-error 420ms ease;
}

.feedback-panel:not([hidden]),
.report-dialog:not([hidden]),
.game-tools-menu:not([hidden]) {
    animation: fx-dialog-arrive 420ms var(--fx-ease) both;
}

.status-pill.is-success {
    position: relative;
    overflow: hidden;
}

.status-pill.is-success::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.7), transparent 80%);
    transform: translateX(130%);
    animation: fx-shine 4.8s ease-in-out infinite;
}

@keyframes fx-tile-correct {
    0% { transform: scale(1); }
    45% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(32,183,120,.12); }
    100% { transform: scale(1); }
}

@keyframes fx-feedback-success {
    0% { transform: scale(.2) rotate(-30deg); opacity: 0; }
    65% { transform: scale(1.18) rotate(7deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

@keyframes fx-feedback-error {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
}

@keyframes fx-dialog-arrive {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.level-card.fx-newly-unlocked {
    z-index: 2;
    animation: fx-newly-unlocked 1.5s var(--fx-ease) 2;
}

@keyframes fx-newly-unlocked {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 10px 30px rgba(23,104,242,.08); }
    45% { transform: translateY(-9px) scale(1.035); box-shadow: 0 22px 54px rgba(23,104,242,.3), 0 0 0 8px rgba(23,104,242,.08); }
}