/*
 * TTS Ludo — Shared Mobile Footer
 * Home footer artwork is the visual master everywhere.
 * The grayscale base turns the Home-selected artwork neutral, then the
 * clipped active layer restores the selected tab's gold treatment.
 */
:root {
    --tts-footer-height: 75px;
}

.tts-global-footer {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100vw, 430px);
    height: calc(var(--tts-footer-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    background: #04245f;
    isolation: isolate;
}

.tts-global-footer-art,
.tts-global-footer-active-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tts-global-footer-art img,
.tts-global-footer-active-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.tts-global-footer-art img {
    filter: grayscale(1) brightness(1.11);
}

/* The active copy is clipped to exactly one footer cell. */
.tts-global-footer-active-art {
    display: none;
    mix-blend-mode: color;
}

.tts-global-footer-active-art img {
    filter: saturate(7) sepia(.95) hue-rotate(345deg) brightness(1.1);
}

.tts-global-footer.is-home .tts-global-footer-art img {
    filter: none;
}

.tts-global-footer.is-home .tts-global-footer-active-art {
    display: none;
}

.tts-global-footer.is-tournaments .tts-global-footer-active-art,
.tts-global-footer.is-shop .tts-global-footer-active-art,
.tts-global-footer.is-friends .tts-global-footer-active-art,
.tts-global-footer.is-profile .tts-global-footer-active-art {
    display: block;
}

.tts-global-footer.is-tournaments .tts-global-footer-active-art {
    clip-path: inset(0 60% 0 20%);
}

.tts-global-footer.is-shop .tts-global-footer-active-art {
    clip-path: inset(0 40% 0 40%);
}

.tts-global-footer.is-friends .tts-global-footer-active-art {
    clip-path: inset(0 20% 0 60%);
}

.tts-global-footer.is-profile .tts-global-footer-active-art {
    clip-path: inset(0 0 0 80%);
}

/* Extra active glow/underline so the selected item remains obvious even on
   browsers where mix-blend-mode is rendered differently. */
.tts-global-footer::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 2px;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 20%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 213, 54, .13), rgba(255, 213, 54, .025));
    box-shadow: inset 0 2px #ffd63c, 0 -2px 16px rgba(255, 214, 60, .12);
    border-radius: 0 0 14px 14px;
}

.tts-global-footer.is-home::before { left: 0; }
.tts-global-footer.is-tournaments::before { left: 20%; }
.tts-global-footer.is-shop::before { left: 40%; }
.tts-global-footer.is-friends::before { left: 60%; }
.tts-global-footer.is-profile::before { left: 80%; }

.tts-global-footer-hotspot {
    position: absolute;
    z-index: 10;
    top: 0;
    width: 20%;
    height: 100%;
    display: block;
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.tts-global-footer-hotspot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
    border-radius: 9px;
}

.tts-footer-home { left: 0; }
.tts-footer-tournaments { left: 20%; }
.tts-footer-shop { left: 40%; }
.tts-footer-friends { left: 60%; }
.tts-footer-profile { left: 80%; }

/*
 * DAILY BONUS FLOATING BUTTON
 * One shared implementation for all normal mobile pages.
 * It sits just above the fixed footer and stays anchored while scrolling.
 */
.tts-daily-bonus-fab {
    position: fixed;
    z-index: 1100;
    left: max(12px, calc(50% - 203px));
    bottom: calc(var(--tts-footer-height) + env(safe-area-inset-bottom) + 10px);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 214, 73, .95);
    border-radius: 16px;
    text-decoration: none;
    background:
        radial-gradient(circle at 30% 20%, rgba(107, 219, 255, .35), transparent 36%),
        linear-gradient(145deg, #083b8b 0%, #071d59 58%, #1f1065 100%);
    box-shadow:
        0 7px 18px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(67, 186, 255, .2) inset,
        0 0 20px rgba(43, 184, 255, .2);
    transform-origin: center bottom;
    -webkit-tap-highlight-color: transparent;
    animation: ttsDailyBonusFloat 3.4s ease-in-out infinite;
}

.tts-daily-bonus-fab::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 12px;
    border: 1px solid rgba(255, 244, 182, .3);
    pointer-events: none;
}

.tts-daily-bonus-fab:active {
    transform: scale(.94);
}

.tts-daily-bonus-fab:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.tts-daily-bonus-fab-icon {
    position: relative;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    animation: ttsDailyGiftWiggle 3.4s ease-in-out infinite;
}

.tts-daily-bonus-fab-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tts-daily-bonus-fab-glow {
    position: absolute;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 208, 61, .42);
    filter: blur(10px);
    animation: ttsDailyBonusGlow 3.4s ease-in-out infinite;
}

.tts-daily-bonus-fab-spark {
    position: absolute;
    z-index: 4;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff6b0;
    box-shadow: 0 0 7px rgba(255, 240, 154, .9);
    pointer-events: none;
}

.tts-daily-bonus-fab .spark-1 {
    top: 8px;
    right: 7px;
    animation: ttsDailySparkOne 2.4s ease-in-out infinite;
}

.tts-daily-bonus-fab .spark-2 {
    bottom: 9px;
    left: 7px;
    animation: ttsDailySparkTwo 2.8s ease-in-out infinite .35s;
}

.tts-daily-bonus-fab .spark-3 {
    top: 18px;
    left: 5px;
    width: 3px;
    height: 3px;
    animation: ttsDailySparkThree 2.1s ease-in-out infinite .2s;
}

@keyframes ttsDailyBonusFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-2px) scale(1.015); }
    50% { transform: translateY(-3px) scale(1.025); }
    58% { transform: translateY(-1px) scale(1.01); }
}

@keyframes ttsDailyGiftWiggle {
    0%, 100% { transform: rotate(0deg); }
    45% { transform: rotate(-3deg); }
    52% { transform: rotate(4deg); }
    59% { transform: rotate(-2deg); }
    66% { transform: rotate(0deg); }
}

@keyframes ttsDailyBonusGlow {
    0%, 100% { opacity: .46; transform: scale(.88); }
    50% { opacity: .85; transform: scale(1.12); }
}

@keyframes ttsDailySparkOne {
    0%, 100% { opacity: .3; transform: scale(.8) translateY(1px); }
    48% { opacity: 1; transform: scale(1.25) translateY(-2px); }
}

@keyframes ttsDailySparkTwo {
    0%, 100% { opacity: .35; transform: scale(.8); }
    55% { opacity: 1; transform: scale(1.18) translateY(-1px); }
}

@keyframes ttsDailySparkThree {
    0%, 100% { opacity: .2; transform: scale(.7); }
    45% { opacity: .9; transform: scale(1.15); }
}

@media (max-width: 340px) {
    :root { --tts-footer-height: 66px; }
    .tts-daily-bonus-fab {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        left: 10px;
    }
    .tts-daily-bonus-fab-icon {
        width: 31px;
        height: 31px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tts-daily-bonus-fab,
    .tts-daily-bonus-fab-icon,
    .tts-daily-bonus-fab-glow,
    .tts-daily-bonus-fab-spark {
        animation: none !important;
    }
}