/* Bottom Navigation */
.bottom-navigation {
    position: fixed;
    bottom: -2.75%;
    left: 0;
    width: 100%;
    background: rgb(255 251 238);
    backdrop-filter: blur(8px) brightness(1);
    display: flex;
    justify-content: space-around;
    /*border-top-left-radius: 18px;
    border-top-right-radius: 18px;*/
    padding: 0px 0 10px 0;
    color: #000000B2;
    box-shadow: inset 0 -2px 5px rgb(0 0 0 / 0%), 0 -5px 25px rgb(0 0 0 / 20%);
    border-top: 1px solid rgba(164, 129, 53, 0.2);
    z-index: 1001;
    -webkit-touch-callout: none; /* Блокирует меню при долгом нажатии */
    user-select: none;          /* Запрещает выделение текста */
}

* {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Allow text selection for input fields and textareas */
        input, textarea {
            -webkit-user-select: text;
            -khtml-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }

.free {
    margin-bottom: 20%;
}

/* Access Code Screen */
.access-code-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.access-code-screen.show {
    opacity: 1;
}

.access-code-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px;
    max-width: 350px;
    width: 100%;
}

.access-code-title {
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 30px 0;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.access-code-input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #333;
    border-radius: 12px;
    background: #111;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease 0.2s forwards;
    transition: border-color 0.3s ease;
}

.access-code-input:focus {
    outline: none;
    border-color: #FF9400;
}

.access-code-input::placeholder {
    color: #666;
}

.access-code-button {
    width: 100%;
    padding: 15px 20px;
    background: white;
    color: black;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease 0.4s forwards;
    transition: all 0.3s ease;
}

.access-code-button:hover {
    background: #f0f0f0;
}

.access-code-button:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
}

.access-code-error {
    color: #ff4444;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 15px;
    min-height: 20px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.access-code-error.show {
    opacity: 1;
    transform: translateY(0);
}

.access-code-error.vibrate {
    animation: vibrate 0.6s ease;
}

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

@keyframes vibrate {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffe7af;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    z-index: 10000;
    transition: opacity 0.5s ease;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.minsk-image {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 130%;
    max-width: none;
    opacity: 1;
    z-index: 2;
}

.taska-image {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    width: 60%;
    max-width: 200px;
    opacity: 0;
    z-index: 3;
}

.greeting-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #333;
    width: 90%;
    max-width: 400px;
    text-align: center;
    z-index: 4;
    opacity: 0;
    padding: 0 20px;
    box-sizing: border-box;
}

@keyframes slideUpFromBottom {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0%);
    }
}

@keyframes fadeInAndScale {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.powered-by {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    visibility: hidden;
    z-index: 15;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    animation: subtleGlow1 3s ease-in-out infinite;
    text-align: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

@keyframes subtleGlow1{
    0%, 100% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    50% {
        text-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.7),
            0 0 15px rgba(255, 255, 255, 0.3);
    }
}

body {
    margin: 1% 5%;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    background-color: #FBF8EF;
}

.nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    padding: 8px;
    height: 60px;
    transition:all 0.3s ease;
}

#my-cafe-nav-button img {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(44%) sepia(17%) saturate(1256%) hue-rotate(18deg) brightness(95%) contrast(90%);
}

.icon {
    display: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.8);
    opacity: 0;
}

.icon.yes {
    display: block;
    transform: scale(1);
    opacity: 1;
}

/*nav*/
/*////////////////////////////////////////////////////////////////*/
/*main*/
.page {
    display: none;
}

.page.on {
    display: block;
}

h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: black;
    text-align: center;
}

.map-container {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

.map {
    display: block;
    margin: 0 auto;
    width: 100%;
    border-radius: 8px;
    z-index: 0;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.map-point {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid #FF9400;
    box-shadow: 0 0 5px rgba(255, 148, 0, 0.6);
    border-radius: 50%;
    top: 50%;
    transition: all 0.5s ease-in-out;
    transform: translateY(-50%);
    z-index: 10;
    transition: all 0.5s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.map-point-light{
    position: absolute;
    width: 40px;
    height: 40px;
    /*border: 3px solid #FF9400;*/
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: all 0.5s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#transparentPoint1{
    top: 18%;
    left: 18%;
}

#transparentPoint2{
    top: 44%;
    left: 64%;
}

#transparentPoint3{
    top: 41%;
    left: 3%;
}

#transparentPoint4{
    top: 73%;
    left: 55%;
    z-index: 1;
}

#transparentPoint5{
    top: 23%;
    left: 79%;
    z-index: 1;
}

#transparentPoint6{
    top: 68%;
    left: 24%;
}

#transparentPoint7{
    top: 38%;
    left: 42%;
    z-index: 1;
}

.left-point, .right-point {
    background-image: url('/images/pilligreen-logo.webp');
}

.center-point {
    background-image: url('/images/memories-logo.webp');
}

.map-point.active {
    transition: all 0.5s ease-in-out;
    transform: translateY(-50%) scale(1.1);
    background-color: #FF9400;
    box-shadow: 0 0 20px rgba(255, 148, 0, 0.6);
    animation: pointGlow 1.5s ease-in-out infinite;
    
}

.map-point.fade-out {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
}

.left-point {
    top: 35%;
    left: 79%;
}

.right-point {
    top: 22%;
    right: 9%;
}

.center-point {
    top: 65%;
    left: 71%;
}

.bottom-point {
    background-image: url('/images/bake-logo.webp');
    top: 34%;
    left: 40%;
}

.top-point {
    background-image: url('/images/po_lubvi.webp');
    top: 80%;
    left: 51%;
}

.map-go-button {
    position: absolute;
    background-color: #FF9400;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    z-index: 15;
    transition: all 0.5s ease;
    box-shadow: 0 4px 15px rgba(255, 148, 0, 0.4);
    top: 88%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
}

.map-go-button.show {
    opacity: 1;
    visibility: visible;
}

.map-go-button:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 148, 0, 0.5);
}

.cafe-info-popup {
    position: absolute;
    background: white;
    border-radius: 15px;
    padding: 7px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border: 2px solid #FF9400;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(10px);
    max-width: 200px;
    text-align: center;
}

.cafe-info-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cafe-info-popup h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin: 0 0 5px 0;
}

.cafe-info-popup p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #626262;
    margin: 0;
}

.cafe-info-popup::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #FF9400;
}

@keyframes pointGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 148, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 148, 0, 0.9);
    }
}

.left-point.active, .right-point.active {
    transform: translateY(-50%) scale(1.1);
}

.center-point.active {
    transform: translateY(-50%) scale(1.1);
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* Map interaction styles removed */


.page.on .main-buttons {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: 10px auto;
    max-width: 400px;
    width: 100%;
    background-color: #FBF8EF;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height: 80px;
}

/* Initial hidden state for elements */
.map-container,
.main-buttons,
.daily-bonuses-container,
.cafes {
    opacity: 0;
    transform: scale(1.5) translateY(-50px);
    transition: opacity 0.4s cubic-bezier(0.5, 1.5, 0.5, 1),
    transform 0.4s cubic-bezier(0.5, 1.5, 0.5, 1);
}

/* Animation classes for appearing elements */
.map-container.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.main-buttons.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.daily-bonuses-container.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
    max-width: 400px;
    margin: 0 auto 15px auto;
}

.cafes.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Individual button animations within main-buttons */
.main-buttons .button-container {
    opacity: 0;
    transform: scale(0.8) translateY(-30px);
    transition: opacity 0.4s cubic-bezier(0.5, 1.5, 0.5, 1),
                transform 0.4s cubic-bezier(0.5, 1.5, 0.5, 1);
}

.main-buttons.animate-in .button-container {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.main-buttons.animate-in .button-container:nth-child(1) {
    transition-delay: 0.08s;
}

.main-buttons.animate-in .button-container:nth-child(2) {
    transition-delay: 0.16s;
}

.main-buttons.animate-in .button-container:nth-child(3) {
    transition-delay: 0.24s;
}

/* Individual cafe animations */
.cafes .cafe {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
    transition: opacity 0.4s cubic-bezier(0.5, 1.5, 0.5, 1),
                transform 0.4s cubic-bezier(0.5, 1.5, 0.5, 1);
    max-width: 400px;
    margin: 0 auto 15px auto;
}

.cafes.animate-in .cafe {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.cafes.animate-in .cafe:nth-child(1) {
    transition-delay: 0.12s;
}

.cafes.animate-in .cafe:nth-child(2) {
    transition-delay: 0.24s;
}

.page.on .button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 0 5px;
    height: 100%;
}

.page.on #rules-button,
.page.on #tasks-button,
.page.on #rating-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    border: none;
    cursor: pointer;
    border-radius: 20px;
    width: 80px;
    height: 65px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.page.on #rules-button {
    background-color: #FBF8EF;
    color: black;
}

.page.on #tasks-button {
    background-color:#ff9400;/* #6F4E37DB;*/
    color: white;
    width: 120%;
    height: 100%;
}

.page.on #rating-button {
    background-color: #FBF8EF;
    color: black;
}

.page.on #rules-button img {
    margin-bottom: 5px;
    margin-top: 15px;
    width: 37px;
    filter: brightness(0);
}

.page.on #rating-button img {
    margin-bottom: 5px;
    margin-top: 15px;
    width: 30px;
    filter: brightness(0);
}

.page.on #tasks-button img {
    margin-bottom: 4px;
    width: 40px;
    height: 42px;
    filter: brightness(0) invert(1);
}

.page.on .main-buttons span {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 0;
}

.page.on .button-container:nth-child(1) span,
.page.on .button-container:nth-child(3) span {
    color: black;
    margin-bottom: 8%;
}

.page.on .button-container:nth-child(2) span {
    color: white;
    margin-bottom: -5%;
}

.page.on .cafes {
    display: flex;
    flex-direction: column;
}

.page.on .cafes .cafe {
    background-color: #FBF8EF;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin-bottom: 15px;
}

.page.on .cafes .cafe img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: 0;
}

.page.on .cafes .cafe .gradgor{
    width: 100%;
    height: 50px;
   /*mask-image: linear-gradient(to bottom, transparent 0%, #FBF8EF 100%); Градиент сверху вниз */
    background: linear-gradient(to bottom, transparent 0%, #FBF8EF 100%);
    position: relative;
    top: -50px;
}

.page.on .cafes .cafe h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #333;
    margin: -60px 0px 5px 15px;
}

.page.on .cafes .cafe p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #626262;
    margin: 0px 0 2px 16px;
}

.page.on .cafes .cafe p:last-child {
    margin-bottom: 10px;
}
/* Fortune Wheel Button */
.fortune-wheel-button-container {
    position: relative;
    margin: 20px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.fortune-wheel-button {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #FF9400 0%, #FF9400 50%, #FF9400 100%);
    border: none;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 148, 0, 0.4);
    overflow: hidden;
    animation: fortuneButtonPulse 2s ease-in-out infinite;
}


.fortune-wheel-button .wheel-icon {
    font-size: 28px;
    animation: wheelRotate 3s linear infinite;
}

.fortune-wheel-button span {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: sparkleFloat 2s ease-in-out infinite;
}

.sparkle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.sparkle:nth-child(2) {
    top: 30%;
    right: 25%;
    animation-delay: 0.7s;
}

.sparkle:nth-child(3) {
    bottom: 25%;
    left: 30%;
    animation-delay: 1.4s;
}

@keyframes fortuneButtonPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(255, 148, 0, 0.36);
    }
    50% {
        box-shadow: 0 12px 35px rgba(255, 148, 0, 0.58);
    }
}

@keyframes wheelRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes sparkleFloat {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translateY(0px);
    }
    50% {
        opacity: 1;
        transform: scale(1) translateY(-10px);
    }
}

/* Fortune Wheel Button Animation */
.fortune-wheel-button-container {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fortune-wheel-button-container.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Tutorial Modal Styles */
.tutorial-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tutorial-modal.show {
    opacity: 1;
}

.guide-selection-content {
        background: #FBF8EF;
        border-radius: 20px;
        padding: 0px 30px;
        max-width: 350px;
        width: 80%;
        text-align: center;
        transform: scale(0.8) translateY(50px);
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tutorial-modal.show .guide-selection-content {
    transform: scale(1) translateY(0);
}

.taska-logo-tutorial {
    width: 150px;
        height: auto;
        margin: 0 auto 0px auto;
        display: block;
}

.guide-selection-title {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    margin: 0 0 30px 0;
}

.guides-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 30px;
}

.guide-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.guide-image {
    width: 120px;
        height: 180px;
        border-radius: 10px;
        object-fit: cover;
        margin-bottom: 5px;
        border: 3px solid transparent;
        transition: all 0.3s ease;
}

.guide-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.guide-button:hover {
    background: #e8840a;
    transform: translateY(-2px);
}

/* Tutorial Guide Message */
.tutorial-guide-message {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 10003;
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tutorial-guide-message.show {
    transform: translateY(0);
    opacity: 1;
}

.tutorial-guide-avatar {
    width: 120px;
    height: 170px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    /* border: 2px solid #FF9400;*/
}

.tutorial-message-content {
    flex: 1;
}

.tutorial-message-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.tutorial-continue-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tutorial-continue-button:hover {
    background: #e8840a;
}

/* Tutorial Pulse Indicator */
.tutorial-pulse {
    position: absolute;
    border: 3px solid #FF9400;
    border-radius: 50%;
    background: rgba(255, 148, 0, 0.2);
    animation: tutorialPulse 2s infinite;
    pointer-events: none;
    z-index: 10001;
}

@keyframes tutorialPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Daily Bonuses Section */
.daily-bonuses-container {
    position: relative;
    margin: 20px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.daily-bonuses-card {
    background-color: #FBF8EF;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.daily-bonuses-card h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    margin: 0 0 8px 0;
}

.daily-bonuses-card p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #666;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

.daily-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.daily-day {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.daily-day.completed {
    background: #FF9400;
    color: white;
    transform: scale(1.1);
    font-weight: 700;
}

.daily-day.current {
    background: #FF9400;
    color: white;
    animation: dailyPulse 2s infinite;
    transform: scale(1.1);
}

.daily-day.locked {
    background: #fbeed7;
    color: #ffb957;
    cursor: not-allowed;
}

.daily-status {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

@keyframes dailyPulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 4px 15px rgba(255, 148, 0, 0.4);
    }
}

/*main*/
/*////////////////////////////////////////////////////////////////*/
/*rule*/

.instructions-container {
    background-color: white;
    border-radius: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;

    color: #333;
    padding: 10px;
}

h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: black;
    text-align: left;
}

.rules-container {
    display: flex;
    flex-direction: column;
}

.rule {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

.rule img {
    margin-right: 10px;
}

.gameplay-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gameplay-item {
    background: linear-gradient(135deg, white 0%, #F8F4FF 100%);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(164, 129, 53, 0.1);
    border: 2px solid rgba(164, 129, 53, 0.1);
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.gameplay-item.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


.gameplay-title {
    font-size: 18px;
    font-weight: 700;
    color: #A48135;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.gameplay-description {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #4B5563;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.gameplay-line {
    width: 100%;
    height: 3px;
    background: #FF9400;
    margin: 15px 0;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(255, 148, 0, 0.3);
}

.rules-container .rule {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease-out;
    margin-bottom: 15px;
}

.rules-container .rule.visible {
    opacity: 1;
    transform: translateX(0);
}

.rule img {
    transition: transform 0.3s ease;
}

.rule:hover img {
    transform: scale(1.2) rotate(10deg);
}

@keyframes shimmerMove {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.button-rules {
    background-color: #FF9400;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border-radius: 15px;
    border: none;
    padding: 10px 140px;
    cursor: pointer;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.3s ease;
}



/*rule*/
/*////////////////////////////////////////////////////////////////*/
/*task main*/

#tasks-main {
    display: none;
}

#tasks-main.on {
    display: block;
}

.info-user-tasks {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 15px;
}

.info-user-tasks .lvl {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: black;
    text-align: left;
    position: relative;
    padding: 15px 20px;
    border-radius: 15px;
    background: #fbf8ef;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-user-tasks .lvl::before {
    content: 'Уровень ';
    color: black;
    font-weight: 600;
    font-size: 14px;
    order: 1;
}

.info-user-tasks .lvl::after {
    content: '⭐';
    font-size: 18px;
    order: 3;
}

.info-user-tasks .coins {
    flex: 1;
    text-align: right;
    color: black;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
    position: relative;
    padding: 15px 20px;
    border-radius: 15px;
    background: #fbf8ef ;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.info-user-tasks .coins img {
    width: 20px;
    height: 20px;
    order: 2;
}
.bonus-description{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: black;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.5;
    padding: 0 10px
}

/* Task Status Modal */
.task-status-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.task-status-modal.show {
    opacity: 1;
}

.task-status-content {
    background: white;
    border-radius: 20px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.task-status-modal.show .task-status-content {
    transform: scale(1);
}

.task-status-header h3 {
    margin: 0 0 20px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #333;
}

.task-status-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.task-status-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.task-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.task-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 15px;
}

.task-status-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 30px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.task-status-button:hover {
    background: #e8850a;
    transform: translateY(-2px);
}

/* Employee Task Styles */
.employee-task-item {
    border-left: 4px solid #FF9400;
    background: linear-gradient(135deg, rgba(255, 148, 0, 0.05) 0%, rgba(255, 148, 0, 0.02) 100%);
}

.employee-task-item .task-title {
    color: #FF9400;
    font-weight: 600;
}

.task-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #666;
    margin: 8px 0;
    line-height: 1.4;
}


.list-tasks-base,
.list-tasks-cafe {
    display: flex;
    flex-direction: column;
    gap: 15px;
}



.task-button{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    border-radius: 10px;
    padding: 10px 20px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
}

.cafe-task-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FBF8EF;
    border-radius: 10px;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
}


.task-button span {
    flex: 1;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: black;
}

.cafe-task-button span {
    flex: 1;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: rgb(51, 51, 51);
}

.cafe-task-button .task-cafe-i {
    flex: 0 0 auto;
    width: 50%;
    height: 100px;
    object-fit: cover;
    padding: 0;
    margin-left: -2%;
}

.cafe-task-button {
    position: relative;
    overflow: hidden;
}

.back {
    transform: rotate(180deg);
    opacity: 0.6;
    width: 1em;
    height: 1em;
}
.cafe-task-button .grad {
    position: absolute;
    left: 14%;
    top: 0;
    height: 100%;
    width: 35%;
    background: linear-gradient(to right, transparent, #fbf8ef);
    pointer-events: none;
}

.cafe-task-button img:nth-of-type(1) {
    flex: 0 0 auto;
    margin-right: 10px;
}

.cafe-task-button img:nth-of-type(3) {
    transform: rotate(180deg);
}

/*task cafe*/
/*////////////////////////////////////////////////////////////////*/
/*daily rewards*/

.tasks-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reward-progress {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding: 0 10px;
}

.progress-day {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    transition: all 0.3s ease;
}

.progress-day.completed {
    background-color: #FF9400;
    color: white;
}

.progress-day.pending {
    background-color: #f0f0f0;
    color: #999;
    border: 2px solid #ddd;
}

.progress-day.current {
    background-color: #FFE5B4;
    color: #FF9400;
    border: 2px solid #FF9400;
}

/*daily rewards*/
/*////////////////////////////////////////////////////////////////*/
/*monthly tasks*/

#monthly-tasks {
    display: none;
}

#monthly-tasks.on {
    display: block;
}

.monthly-description {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: black;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.5;
    padding: 0 10px;
}

.monthly-cafes-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.monthly-cafe-card {
    position: relative;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(164, 129, 53, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    height: 120px;
}

.monthly-cafe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(164, 129, 53, 0.2);
}

.monthly-cafe-card img {
    width: 40%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.monthly-cafe-gradient {
    position: absolute;
    top: 0;
    left: 40%;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, white 100%);
    pointer-events: none;
    z-index: 1;
}

.monthly-cafe-card h3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #473818;
    margin: 0;
    z-index: 2;
}

.monthly-cafes-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.monthly-cafe-mosaic-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 120px;
    transition: all 0.3s ease;
}

.monthly-cafe-mosaic-item.not-visited {
    filter: grayscale(100%);
    opacity: 0.6;
}

.monthly-cafe-mosaic-item.visited {
    filter: grayscale(0%);
    border: 2px solid #FF9400;
    box-shadow: 0 4px 15px rgba(255, 148, 0, 0.3);
}

.monthly-cafe-mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.monthly-cafe-mosaic-item .cafe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}

.monthly-cafe-mosaic-item h4 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: white;
    margin: 0;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.monthly-reward-section {
    text-align: center;
    margin-top: 30px;
}

.claim-monthly-reward-btn {
    background: #ccc;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 15px 30px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: not-allowed;
    transition: all 0.3s ease;
}

.claim-monthly-reward-btn:not(:disabled) {
    background: #FF9400;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 148, 0, 0.3);
}

.claim-monthly-reward-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 148, 0, 0.4);
}

.monthly-status-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #666;
    margin-top: 15px;
}

.visit-checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FF9400;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(255, 148, 0, 0.5);
}

/*monthly tasks*/
/*////////////////////////////////////////////////////////////////*/
/*task cafe*/

.lvl-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.level-block {
    background: #FBF8EF;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border: none;
    transition: none;
    position: relative;
    overflow: hidden;
}

.level-block.available {
    background: #FBF8EF;
}

.level-block.completed {
    background: #FBF8EF;
}

.level-block.locked {
    background: #FBF8EF;
    opacity: 0.6;
    cursor: not-allowed;
}

.level-title {
    position: relative;
    z-index: 2;
}

.level-status {
    position: relative;
    z-index: 2;
    text-align: left;
}

.progress-line {
    position: relative;
    background-color: #EDEDED;
    overflow: hidden;
    z-index: 2;
}

.progress-fill {
    height: 100%;
    background: #FF9400;
    border-radius: 4px;
    transition: none;
    animation: none;
    box-shadow: none;
    position: relative;
}

.progress-fill::after {
    display: none;
}

@keyframes progressShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.task-completion-status {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #666;
    text-align: left;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

.continue-button {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.continue-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 148, 0, 0.3);
}

.continue-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

@keyframes progressGlow {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(255, 148, 0, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 148, 0, 0.7);
    }
}

/*task cafe*/
/*////////////////////////////////////////////////////////////////*/
/*task lvl*/

#tasks-lvl {
    background-color: #FBF8EF;
}

.tasks-container .task-item {
    background: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.tasks-container .task-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/*task lvl*/
/*////////////////////////////////////////////////////////////////*/
/*ranking*/

.rate-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 120px; /* Space for user rating panel */
}

.rate-list > div {
    background: linear-gradient(135deg, white 0%, #fafbfc 100%);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(164, 129, 53, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rate-list > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}


.ranking-avatar-initial {
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}

.ranking-position {
    color: black;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* Fire animation for ranking panel */
@keyframes fireFlicker {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 100, 0, 0.8), 0 0 40px rgba(255, 150, 0, 0.6), 0 0 60px rgba(255, 200, 0, 0.4);
    }
    25% { 
        box-shadow: 0 0 25px rgba(255, 120, 0, 0.9), 0 0 45px rgba(255, 170, 0, 0.7), 0 0 65px rgba(255, 220, 0, 0.5);
    }
    50% { 
        box-shadow: 0 0 30px rgba(255, 80, 0, 0.95), 0 0 50px rgba(255, 140, 0, 0.8), 0 0 70px rgba(255, 190, 0, 0.6);
    }
    75% { 
        box-shadow: 0 0 22px rgba(255, 110, 0, 0.85), 0 0 42px rgba(255, 160, 0, 0.65), 0 0 62px rgba(255, 210, 0, 0.45);
    }
}

@keyframes fireGlow {
    0%, 100% { background: linear-gradient(135deg, #FFF9E6, #FFE8CC); }
    50% { background: linear-gradient(135deg, #FFE8CC, #FFDD99); }
}

/* Ranking Panel */
#userRankingPanel {
    position: fixed;
    bottom: 100px;
    left: 0%;
    transform: translateX(-50%);
    width: 90%;
    background: linear-gradient(135deg, #FFF9E6, #FFE8CC);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.8), 0 0 40px rgba(255, 150, 0, 0.6), 0 0 60px rgba(255, 200, 0, 0.4);
    z-index: 1000;
    animation: fireFlicker 3s ease-in-out infinite;
    border: 2px solid rgba(255, 140, 0, 0.3);
}

/*ranking*/
/*////////////////////////////////////////////////////////////////*/
/*shop*/

#shop {
    display: none;
}

#shop.on {
    display: block;
}

.shop-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #626262;
    text-align: center;
    /*margin: 10px 20px 20px 20px;*/
    line-height: 1.4;
}

.balance-shop {
    background: #fbf8ef;
    border-radius: 15px;
    margin: 20px 0px 20px 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.balance-shop span {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    color: #000000;
}

.shop-section {
    margin: 0 0px 30px 0px;
}

.shop-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #626262;
    text-align: left;
    margin: 0 0 15px 0;
}

.general-products-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.product-card:hover {
    transform: translateY(-2px);
}

.product-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #FFF2E6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FF9400;
    overflow: hidden;
    margin: 10px;
}

.product-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.product-details h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #333;
    margin: 0 0 5px 0;
}

.product-details p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

.product-purchase {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #FF9400;
}

.product-price img {
    width: 20px;
    height: 20px;
}

.buy-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.buy-button:hover {
    background: #e880a;
    transform: translateY(-1px);
}

.cafe-products-list {
    display: grid;
    overflow-y: scroll;
}

.cafe-block {
    background: rgba(164, 129, 53, 0.08);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cafe-header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cafe-header:hover {
    background: rgba(164, 129, 53, 0.12);
}

.cafe-info-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.cafe-logo {
    width: 45%;
    border-radius: 8px;
    display: block;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.cafe-logo-m {
    width: 45%;
    border-radius: 8px;
    display: block;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    animation: subtleGlow 3s ease-in-out infinite;
}

@keyframes subtleGlow {
    0%, 100% {
        box-shadow: 0 0 10px #FF9400;
    }
    50% {
        box-shadow: 0 0 20px #f9af48;
    }
}

.cafe-text h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #333;
    margin: 0 0 5px 0;
}

.cafe-text p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

.cafe-arrow {
    width: 16px;
    height: 16px;
    transform: rotate(270deg);
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.cafe-block.expanded .cafe-arrow {
    transform: rotate(90deg);
}

.cafe-products {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.cafe-products.show {
    max-height: 1000px;
    padding: 0 20px 20px 20px;
}

.cafe-products .product-card {
    margin-bottom: 15px;
}

.cafe-products .product-card:last-child {
    margin-bottom: 0;
}

.cafe-products .product-icon::after {
    background: #eae0d6;
}

.cafe-products .product-card.locked .product-icon::after {
    background: #d4d2d3;
}

/* Product Preview Modal */
.product-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 3500;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.product-preview-modal.show {
    background: rgba(0, 0, 0, 0.8);
}

.product-preview-content {
    background: #fbf8ef;
    border-radius: 20px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.7) translateY(50px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-preview-modal.show .product-preview-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.product-preview-image {
    width: 100%;
    height: 300px;
    margin: 0 auto 20px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.product-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.product-preview-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #333;
    margin: 0 0 15px 0;
}

.product-preview-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 25px 0;
}

.product-preview-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #FF9400;
    margin: 0 0 30px 0;
}

.product-preview-price img {
    width: 24px;
    height: 24px;
}

.product-preview-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.product-preview-buy {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 30px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-preview-buy:hover {
    background: #e6850e;
    transform: translateY(-2px);
}

.product-preview-close {
    background: #f0f0f0;
    color: #666;
    border: none;
    border-radius: 12px;
    padding: 12px 30px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-preview-close:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
}

/* Shop Tabs Styles */
.shop-tabs-container {
    /*margin: 0 20px;*/
}


/* Bonus Sub-tabs Styles */
.bonus-sub-tabs {
    display: flex;
    background: #fbeed7;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 15px;
    gap: 3px;
}

.bonus-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 16px;
    border-radius: 7px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #ffb957;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bonus-tab.active {
    background: #FF9400;
    color: white;
    text-align: center;
    box-shadow: 0 2px 6px rgba(255, 148, 0, 0.25);
}

.bonus-tab-content {
    opacity: 0;
    display: none;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bonus-tab-content.active {
    opacity: 1;
    display: block;
    transform: translateY(0);
}
.profiled-main-tabs,
.shop-main-tabs {
    display: flex;
    background: #fbeed7;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    gap: 4px;
}

.rate-main-tabs {
    display: flex;
    background: #fbeed7;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    gap: 4px;
}
.profiled-tab,
.shop-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffb957;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rate-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 0px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #ffb957;
    cursor: pointer;
    transition: all 0.3s ease;
}
.profiled-tab.active,
.shop-tab.active {
    background: #FF9400;
    color: white;
    box-shadow: 0 2px 8px rgba(255, 148, 0, 0.3);
}

.rate-tab.active {
    background: #FF9400;
    color: white;
    box-shadow: 0 2px 8px rgba(255, 148, 0, 0.3);
}

.tab-content {
    opacity: 0;
    display: none;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tab-content.active {
    opacity: 1;
    display: block;
    transform: translateY(0);
}

.profile-background {
    width: 100vw;
    background: linear-gradient(to bottom, rgba(255, 148, 0, 1), rgba(255, 148, 0, 0));
    position: absolute;
    top: -4px;
    left: -6%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden; /* объекты внутри него не заходят за его пределы */
}

.profile-sub-tabs {
    display: flex;
    background: #fbeed7;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 15px;
    gap: 3px;
}

.profile-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 16px;
    border-radius: 7px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #ffb957;
    text-align:center;

    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-tab.active {
    background: #FF9400;
    color: white;
    text-align:center;
    box-shadow: 0 2px 6px rgba(255, 148, 0, 0.25);
}
.profiled-tab-content,
.profile-tab-content {
    opacity: 0;
    display: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.profiled-tab-content.active,
.profile-tab-content.active {
    opacity: 1;
    display: block;
    transform: translateY(0);
}

.profile-products-grid {
    display: block;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 15px 0;
}
.cafe-statistics {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    background: rgba(255, 148, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    border: 2px solid #FF9400;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-item img {
    position: absolute;
    bottom: -23%;
    left: 1%;
    width: 14%;
    height: auto;
    opacity: 0.3;
    filter: brightness(0);
    object-fit: contain;
}

.stat-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding-left: 13%;
    color: #000000;
}

.stat-value {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FF9400;
}
.profile-product-card {
    background: #fbf8ef;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.profile-product-card:active {
    transform: scale(0.95);
}

.profile-product-preview {
    width: 100px;
    height: 120px;
    margin: 0 auto 10px;
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #FBEED7;
}

.profile-product-preview.background {
    border-radius: 10px;
}

.profile-product-preview.border .circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid;
}

.profile-product-preview.taska {
    background: none;
    border: 3px solid #FF9400;
    position: relative;
    overflow: visible;
    animation: taskaGlow 2s ease-in-out infinite;
}

.taska {
    background: none;
    border: 3px solid #FF9400;
    position: relative;
    overflow: visible;
    animation: taskaGlow 2s ease-in-out infinite;
}

.profile-product-preview.taska::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #FF9400;
    border-radius: inherit;
    animation: taskaRadialPulse 2s ease-in-out infinite;
    z-index: -1;
}

.taska::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #FF9400;
    border-radius: inherit;
    animation: taskaRadialPulse 2s ease-in-out infinite;
    z-index: -1;
}

.profile-product-preview.coffee {
    background: none;
    border: 3px solid #6F4423;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 10px rgba(111, 68, 35, 0.5);
    animation: coffeeGlow 3s ease-in-out infinite;
}

.coffee {
    background: none;
    border: 3px solid #6F4423;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 10px rgba(111, 68, 35, 0.5);
    animation: coffeeGlow 3s ease-in-out infinite;
}

@keyframes coffeeGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(111, 68, 35, 0.9), 0 -5px 20px rgb(128, 101, 82, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(200, 200, 200, 0.5), 0 5px 25px rgba(111, 68, 35, 0.9);
    }
}

.profile-product-preview.coin {
    background: none;
    border: 2px solid #FFD700;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    animation: coinShimmer 3s ease-in-out infinite;
}
.coin {
    background: none;
    border: 2px solid #FFD700;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    animation: coinShimmer 3s ease-in-out infinite;
}

.profile-product-preview.coin::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #FFD700;
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.6);
    animation: coinShimmer 3s ease-in-out infinite;
    z-index: -1;
}

.coin::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #FFD700;
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.6);
    animation: coinShimmer 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes coinShimmer {
    0%, 100% {
        box-shadow: inset 0 0 5px rgba(255, 215, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.85);
    }
}

.profile-product-name {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

.profile-product-price {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.profile-product-price img {
    width: 16px;
    height: 16px;
}

.profile-buy-btn {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: Inter, sans-serif;
    width: 100%;
}

.profile-buy-btn:hover {
    background: #e6850e;
    transform: translateY(-1px);
}

.profile-buy-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Partners Styles */
.partners-list {
    display: flex;
    flex-direction: column;
}

.partner-block {
    background: #F8F4EA;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: rgb(56, 56, 56, 0.2) 0px 5px 5px;
}

.partner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.3s ease;
}

.partner-info {
    flex: 1;
}

.partner-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

.partner-logo {
    width: 40%;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 15px;
}

.partner-arrow {
    width: 16px;
    height: 16px;
}

.arrow-icon {
    width: 100%;
    height: 100%;
    transform: rotate(270deg);
    transition: transform 0.3s ease;
    opacity: 0.6;
    margin-left: -50%;
}

.partner-block.expanded .arrow-icon {
    transform: rotate(90deg);
}

.partner-products {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 5px 20px 5px;
    transition: all 0.3s ease;
}

.partner-products.show {
    max-height: 1000px;
    opacity: 1;
    padding: 0 5px 20px 5px;
}

.partner-product {
    background: #FBF8EF;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}


.partner-product:last-child {
    margin-bottom: 0;
}

.partner-product .product-image {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.partner-product {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.partner-product .product-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #333;
    margin: 0;
}

.partner-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-direction: row;
}
.product-purchase {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.partner-product .product-price {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #FF9400;
}


.product-price img {
    width: 40%;
    height: auto;
}

.partner-product .buy-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}


.profile-purchased-btn {
    background: #4CAF50;
    color: white;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 9px;
    font-weight: 600;
    font-family: Inter, sans-serif;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.loading-message, .empty-message, .error-message {
    text-align: center;
    padding: 20px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #666;
}

.error-message {
    color: #f44336;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes taskaGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 148, 0, 0.6);
        border-color: #FF9400;
    }
    25% {
        box-shadow: 0 0 25px rgba(255, 148, 0, 0.8), 5px 0 15px rgba(255, 148, 0, 0.4);
        border-color: #FFB800;
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 148, 0, 0.9);
        border-color: #FF9400;
    }
    75% {
        box-shadow: 0 0 25px rgba(255, 148, 0, 0.8), -5px 0 15px rgba(255, 148, 0, 0.4);
        border-color: #FFB800;
    }
}

@keyframes taskaRadialPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

@keyframes coffeeSteam {
    0% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(-10px) scale(1.2);
    }
    100% {
        opacity: 0.1;
        transform: translateX(-50%) translateY(-20px) scale(1.5);
    }
}

@keyframes coinRotatingGlow {
    0% {
        transform: rotate(0deg);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 15px 0 20px rgba(255, 215, 0, 0.4);
    }
    25% {
        transform: rotate(90deg);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 15px 20px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: rotate(180deg);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), -15px 0 20px rgba(255, 215, 0, 0.4);
    }
    75% {
        transform: rotate(270deg);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 -15px 20px rgba(255, 215, 0, 0.4);
    }
    100% {
        transform: rotate(360deg);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 15px 0 20px rgba(255, 215, 0, 0.4);
    }
}

/* Cards collection animations */
@keyframes borderShimmer {
    0% {
        box-shadow: 0 0 15px rgba(255, 148, 0, 0.6), inset 0 0 15px rgba(255, 148, 0, 0.2);
    }
    25% {
        box-shadow: 0 0 20px rgba(255, 148, 0, 0.8), inset 0 0 20px rgba(255, 148, 0, 0.3), 5px 0 15px rgba(255, 148, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 148, 0, 1.0), inset 0 0 25px rgba(255, 148, 0, 0.4);
    }
    75% {
        box-shadow: 0 0 20px rgba(255, 148, 0, 0.8), inset 0 0 20px rgba(255, 148, 0, 0.3), -5px 0 15px rgba(255, 148, 0, 0.4);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 148, 0, 0.6), inset 0 0 15px rgba(255, 148, 0, 0.2);
    }
}

/* Cards tab container styles */
.cards-tab-container {
    display: flex;
    background: #fbeed7;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    gap: 4px;
}

.cards-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 8px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #ffb957;
    cursor: pointer;
    transition: all 0.3s ease, transform 0.2s ease;
}

.cards-tab.active {
    background: #FF9400;
    color: white;
    box-shadow: 0 2px 8px rgba(255, 148, 0, 0.3);
    transform: scale(1.05);
}

/*fortune wheel*/

#fortune-timer {
    background: linear-gradient(135deg, #FFE8CC, #FFF9E6);
    border-radius: 15px;
    padding: 15px 20px;
    margin: 15px auto;
    max-width: 280px;
    border: 2px solid rgba(255, 148, 0, 0.3);
    box-shadow: 0 4px 15px rgba(255, 148, 0, 0.2);
    text-align: center;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease-out;
}

#fortune-timer.show {
    opacity: 1;
    transform: translateY(0);
}

#fortune-timer .timer-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

#timer-countdown {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #FF9400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#my-cafe {
    padding: 0;
    text-align: center;
    opacity: 0;
    display: none;
    transform: translateY(30px);
    background-color: #492C20;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    overflow: hidden;
}

#my-cafe.on {
    display: flex;
}

.my-cafe-content {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Notebook Interface */
.notebook-container {
    position: fixed;
    bottom: 0%;
    left: -2%;
    z-index: 25;
}

.notebook-closed {
   /* width: 100%;*/
    height: 33vh;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(255, 148, 0, 0.6));
    animation: notebookGlow 2s ease-in-out infinite alternate;
}



@keyframes notebookGlow {
    0% {
        filter: drop-shadow(0 0 8px rgba(255, 148, 0, 0.4));
    }
    100% {
        filter: drop-shadow(0 0 12px rgba(255, 148, 0, 0.63));
    }
}

.notebook-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease;
}

.notebook-overlay.show {
    background: rgba(0, 0, 0, 0.7);
}

.notebook-content {
    top: -8%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.book {

}
.notebook-open {
    width: 140%;
    left: -23%;
    position: relative;
    opacity: 1;
}

.book {
    opacity: 0;
    transform: translateY(250px) rotate(-45deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notebook-overlay.show .book {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.notebook-list-area {
    position: absolute;
    top: 21%;
    left: 1%;
    transform: translateX(-50%);
    width: 60%;
    max-height: 48%;
    overflow-y: auto;
    padding: 20px;
    background: transparent;
    opacity: 0;
    transition: all 0.8s ease;
}

.notebook-overlay.show .notebook-list-area {
    opacity: 1;
}

.notebook-list-area.animate-in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.notebook-list-area.animate-out {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

/* Enhanced notebook content animations */
.notebook-list-area .menu-item-card,
.notebook-list-area .furniture-item-card,
.notebook-list-area .employee-card {
    opacity: 0;
    transform: translateY(15px);
    animation: notebookItemFadeIn 0.5s ease-out forwards;
}

.notebook-list-area .menu-item-card:nth-child(1) { animation-delay: 0.1s; }
.notebook-list-area .menu-item-card:nth-child(2) { animation-delay: 0.2s; }
.notebook-list-area .menu-item-card:nth-child(3) { animation-delay: 0.3s; }
.notebook-list-area .menu-item-card:nth-child(4) { animation-delay: 0.4s; }
.notebook-list-area .menu-item-card:nth-child(5) { animation-delay: 0.5s; }

.notebook-list-area .furniture-item-card:nth-child(1) { animation-delay: 0.1s; }
.notebook-list-area .furniture-item-card:nth-child(2) { animation-delay: 0.2s; }
.notebook-list-area .furniture-item-card:nth-child(3) { animation-delay: 0.3s; }
.notebook-list-area .furniture-item-card:nth-child(4) { animation-delay: 0.4s; }
.notebook-list-area .furniture-item-card:nth-child(5) { animation-delay: 0.5s; }

.notebook-list-area .employee-card:nth-child(1) { animation-delay: 0.1s; }
.notebook-list-area .employee-card:nth-child(2) { animation-delay: 0.2s; }
.notebook-list-area .employee-card:nth-child(3) { animation-delay: 0.3s; }
.notebook-list-area .employee-card:nth-child(4) { animation-delay: 0.4s; }
.notebook-list-area .employee-card:nth-child(5) { animation-delay: 0.5s; }

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

.notebook-tabs {
    top: 32%;
        position: absolute;
        color: black;
        flex-direction: column;
        display: flex;
        left: 66%;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        transition-delay: 0.3s;
        justify-content: center;
        align-items: center;
}
.notebook-tab {
    color:black;
    background: #FBF8EF;
    border: 2px solid #FF9400;
    border-radius: 15px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px;
    flex: 1;
    width: 70%;
}

.notebook-overlay.show .notebook-tabs {
    opacity: 1;
    transform: translateY(0);
}

.notebook-close-button {
    background: #ff9400;
    border:none;
    color: white;
    border-radius: 15px;
    padding: 12px 40px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.5s;
    width:85%;
    margin-top: -38%;
}

.notebook-overlay.show .notebook-close-button {
    opacity: 1;
    transform: translateY(0);
}




.notebook-tab.active {
    background: #FF9400;
    color: white;
}

.notebook-tab img {
    width: 24px;
    height: 24px;
    filter: brightness(0.5);
    transition: filter 0.3s ease;
}

.notebook-tab.active img {
    filter: brightness(1) invert(1);
}

.notebook-tab span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
}



.notebook-loading {
    text-align: center;
    padding: 50px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #666;
}

/* Adjust content styles for notebook */
.notebook-list-area .menu-item-card,
.notebook-list-area .furniture-item-card,
.notebook-list-area .employee-card {
    margin-bottom: 15px;
    font-size: 12px;
}

.notebook-list-area .menu-item-card .menu-item-name,
.notebook-list-area .furniture-item-card .furniture-item-name,
.notebook-list-area .employee-card .employee-name {
    font-size: 14px;
}

.notebook-list-area .menu-item-button,
.notebook-list-area .furniture-item-button,
.notebook-list-area .give-task-button {
    padding: 8px 12px;
    font-size: 11px;
}

/* Hide notebook when closed */
.notebook-closed.hide {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.5s ease;
}

game-start-btn.hide {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.5s ease;
}

/* My Cafe Loading Animation */
.my-cafe-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(73, 44, 32, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.my-cafe-loading.show {
    opacity: 1;
    visibility: visible;
}

.my-cafe-loading.hide {
    opacity: 0;
    visibility: hidden;
}

.my-cafe-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.my-cafe-loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 148, 0, 0.2);
    border-left: 4px solid #FF9400;
    border-radius: 50%;
    animation: my-cafe-spin 1s linear infinite;
}

.my-cafe-loading-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #FBF8EF;
    text-align: center;
}

@keyframes my-cafe-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* My Cafe General Styles */
.my-cafe-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/game.webp') no-repeat center center;
    background-size: cover;
    opacity: 0.6;
}

.game-cafe {
    position: fixed;
    bottom: 12%;
    left: 47%;
    width:40%;
    z-index: 100;
}

.game-start-btn {
    background-color: #FF9400;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 25px;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    
    cursor: pointer;
    width: 100%;
    opacity: 1;
    transform: translateY(0px);
    transition: all 0.3s ease;
}

.pass-content{
    flex-direction: column;
        display: flex;
        width: 100%;
        height: 100%;
        position: relative;
    align-items: center;
}
.pass-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/lvlPro2.webp) no-repeat center center;
    background-size: cover;
    opacity: 0.85;
}
#competition-page{
    padding: 0;
    text-align: center;
    background-color: #492C20;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    overflow: hidden;
}
.comp-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/clan-war.webp) no-repeat center center;
    background-size: cover;
    opacity: 0.9;
}

.cafe-stats {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 100;
}

.cafe-level-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.cafe-level-circle-game {
    font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 25px;
        padding: 0px 10px;
        color: #ff9400;
        text-align: center;
        line-height: 1.2;
        background-color: #fbf8ef;
        border-radius: 20px;
        width: 90%;
        height: 45px;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        flex-shrink: 0;
}

.cafe-xp-section {
        border-radius: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0px 4px;
}

.cafe-xp-bar-container {
    background-color: rgb(251 238 215);
    border-radius: 10px;
    height: 10px;
    border: 2px solid #fbf8ef;
    overflow: hidden;
    position: relative;
}

.cafe-xp-bar {
        height: 100%;
        background: linear-gradient(90deg, #FF9400, #ff9400);
        border-radius: 0px;
        transition: width 0.8s ease;
        position: relative;
}
/*
.cafe-xp-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: xpShimmer 2s infinite;
}
*/
.cafe-xp-text {
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 10px;
        color: #666;
        display: flex;
}

.cafe-beans {
        background-color: #fbf8ef;
        border-radius: 20px;
        padding: 9px 15px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        flex-shrink: 0;
}

.cafe-beans .beans-icon {
    width: 18px;
    height: 18px;
    margin-left: 8px;
}

.cafe-beans .beans-count {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
}

@keyframes xpShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

.menu-items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 10px 0;
    max-height: calc(100% - 60px);
    overflow-y: auto;
}

.menu-item-card {
    background: #fbf8ef;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
}

.menu-item-image {
    position: relative;
    width: 45%;
    height: 100%;
    border-radius: 8px;
    flex-shrink: 0;
}

.menu-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.cafe-logo-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #FF9400;
    overflow: hidden;
}

.cafe-logo-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-item-info {
    flex: 1;
}

.menu-item-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
}

.menu-item-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
}

.menu-item-cost, .menu-item-xp {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #666;
}

.menu-item-cost .icon {
    font-size: 14px;
}

.menu-item-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-item-button:hover {
    background: #e8840a;
    transform: translateY(-1px);
}

.menu-item-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.menu-item-purchased {
    color: #FF9400;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
}

/* Furniture items grid */
.furniture-items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 10px 0;
    max-height: calc(100% - 60px);
    overflow-y: auto;
}

.furniture-item-card {
    background: #fbf8ef;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
}

.furniture-item-image {
    position: relative;
    width: 45%;
    height: 100%;
    border-radius: 8px;
    flex-shrink: 0;
}

.furniture-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.furniture-item-info {
    flex: 1;
}

.furniture-item-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
}

.furniture-item-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
}

.furniture-item-cost, .furniture-item-xp {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #666;
}

.furniture-item-cost .icon {
    font-size: 14px;
}

.furniture-item-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.furniture-item-button:hover {
    background: #e8840a;
    transform: translateY(-1px);
}

.furniture-item-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.furniture-item-completed {
    color: #ff9400;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
}

/* Employees panel styles */
.employees-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 0;
    max-height: calc(100% - 60px);
    overflow-y: auto;
}

.employee-card {
    background: #fbf8ef;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 15px;
}

.employee-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #FF9400;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.employee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-info {
    flex: 1;
}

.employee-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.employee-actions {
    margin-top: 10px;
}

.give-task-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#fortune-wheel {
    padding: 20px;
    text-align: center;
    opacity: 0;
    display: none;
    transform: translateY(30px);
}

.fortune-balance-display {
    background: linear-gradient(135deg, #fbf8ef, #fbf8ef);
    border-radius: 15px;
    padding: 0px 20px;
    margin: 5% auto 15% auto;
    max-width: 280px;
    box-shadow: 0 4px 15px rgb(0, 0, 0, 0.2);
}

.fortune-balance-display span {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #826651;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fortune-wheel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 400px;
    margin: 0 auto;
}

.wheel-wrapper {
    position: relative;
    height: 320px;
}

.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 49%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 40px solid #FF9400;
    z-index: 15;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.wheel-pointer::after {
    content: '';
    position: absolute;
    top: -38px;
    left: -18px;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 36px solid #FFB800;
    z-index: -1;
}

.wheel {
    margin: 0 auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    position: relative;
    border: 12px solid #FF9400;
    /*box-shadow: 
        0 0 40px rgba(255, 148, 0, 0.6),
        inset 0 0 30px rgba(255, 255, 255, 0.3);*/
    background: conic-gradient(
        from 0deg,
        #FFF9E6 0deg 45deg,
        #FFE8CC 45deg 90deg,
        #FFF9E6 90deg 135deg,
        #FFE8CC 135deg 180deg,
        #FFF9E6 180deg 225deg,
        #FFE8CC 225deg 270deg,
        #FFF9E6 270deg 315deg,
        #FFD700 315deg 360deg
    );
    overflow: hidden;
    will-change: transform;
    transform: rotate(0deg);
    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.wheel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FF9400, #FFB800);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.wheel-segment {
    top: 2%;
    left: 15%;
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 72% 97%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.wheel-segment:nth-child(1) { transform: rotate(0deg) translate(-20px, -20px); }
.wheel-segment:nth-child(2) { transform: rotate(45deg) translate(-20px, -20px); }
.wheel-segment:nth-child(3) { transform: rotate(90deg) translate(-20px, -20px); }
.wheel-segment:nth-child(4) { transform: rotate(135deg) translate(-20px, -20px); }
.wheel-segment:nth-child(5) { transform: rotate(180deg) translate(-20px, -20px); }
.wheel-segment:nth-child(6) { transform: rotate(225deg) translate(-20px, -20px); }
.wheel-segment:nth-child(7) { transform: rotate(270deg) translate(-20px, -20px); }
.wheel-segment:nth-child(8) { transform: rotate(315deg) translate(-20px, -20px); }

.segment-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transform: rotate(-22.5deg);
    margin-top: -40px;
    margin-right: -25px;
    text-align: center;
    position: relative;
}

.prize-icon {
    font-size: 28px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    margin-bottom: 2px;
}

.prize-text {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #333;
    background: linear-gradient(45deg, #333, #555);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.wheel-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 280px;
    margin-bottom: -12%;
}

.spin-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 8px 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 148, 0, 0.4);
    position: relative;
    overflow: hidden;
    text-align: center;
    line-height: 1.2;
    transition: all 0.3s ease-in-out;
}

.spin-button #spin-button-cost {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
}

.spin-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.chances-button {
    background: rgba(255, 148, 0, 0.1);
    color: #FF9400;
    border: 2px solid #FF9400;
    border-radius: 15px;
    padding: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chances-button:hover {
    background: rgba(255, 148, 0, 0.2);
    transform: translateY(-1px);
}

@keyframes shimmer {
    0% {
        transform: rotate(45deg) translateX(-200%);
    }
    100% {
        transform: rotate(45deg) translateX(200%);
    }
}

/* Fortune Timer Styles */
.fortune-timer {
    background: linear-gradient(135deg, #FFF9E6, #FFE8CC);
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    border: 2px solid rgba(255, 148, 0, 0.3);
    box-shadow: 0 4px 15px rgba(255, 148, 0, 0.2);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.fortune-timer.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fortune-timer .timer-icon {
    font-size: 24px;
    margin-bottom: 10px;
    animation: timerPulse 2s ease-in-out infinite;
}

.fortune-timer .timer-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.fortune-timer .timer-countdown {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #FF9400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes countdownPulse {
    0%, 100% {
        color: #FF9400;
    }
    50% {
        color: #FFB800;
    }
}

/* Chances Section */
.chances-section {
    max-width: 320px;
    margin: 30px 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 148, 0, 0.2);
}

.chances-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 15px 0 0 0;
}

.chance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #FFF9E6;
    border-radius: 10px;
    border: 1px solid rgba(255, 148, 0, 0.2);
}

.chance-item.jackpot-chance {
    background: linear-gradient(135deg, #ffdc7b, #FFA500);
    color: white;
    font-weight: 700;
    animation: jackpotGlow 2s ease-in-out infinite;
}

.chance-icon {
    font-size: 20px;
    margin-right: 10px;
}

.chance-name {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.chance-percent {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FF9400;
}

.jackpot-chance .chance-percent {
    color: white;
}

@keyframes jackpotGlow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 6px 25px rgba(255, 215, 0, 0.8);
    }
}

/* Fortune Prize Modal */
.fortune-prize-modal {
    text-align: center;
    padding: 40px 30px;
    background: #FBF8EF;
}

/* Profile Edit Modal */
.profile-edit-modal {
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 25px;
}

.profile-edit-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
}

.profile-edit-tab {
    background: transparent;
    border: none;
    padding: 12px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    flex: 1;
}

.profile-edit-tab.active {
    color: #FF9400;
    background: #fff;
    border-bottom: 2px solid #FF9400;
    margin-bottom: -2px;
}

.profile-edit-content {
    min-height: 300px;
}

.profile-edit-tab-content {
    display: none;
}

.profile-edit-tab-content.active {
    display: block;
}

.profile-edit-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.profile-edit-option {
    position: relative;
}

.profile-edit-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.profile-edit-label {
    display: block;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.profile-edit-preview {
    width: 100%;
    height: 80px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #666;
    background: #f8f8f8;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.profile-edit-preview.no-selection {
    background: #fff;
    border-style: dashed;
}

.profile-edit-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.profile-edit-preview.background {
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.profile-edit-preview.sticker {
    background: none;
}

.profile-edit-preview.border {
    border-width: 4px;
}

.profile-edit-option input[type="radio"]:checked + .profile-edit-label .profile-edit-preview {
    border-color: #FF9400;
    box-shadow: 0 0 0 3px rgba(255, 148, 0, 0.2);
    transform: scale(1.05);
}

.profile-edit-option input[type="radio"]:checked + .profile-edit-label .profile-edit-preview::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 5px;
    background: #FF9400;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.prize-animation {
    margin: 30px 0;
    position: relative;
}

.prize-icon-big {
    font-size: 80px;
    margin-bottom: 20px;
    animation: prizeIconBounce 1s ease-out;
}

.prize-amount {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #FF9400;
    text-shadow: 0 2px 4px rgb(255 148 0 / 33%);
    animation: prizeAmountGlow 1s ease-out;
}

.fortune-prize-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 15px 40px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fortune-prize-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 148, 0, 0.6);
}

@keyframes prizeIconBounce {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

@keyframes prizeAmountGlow {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Jackpot Animation */
.jackpot-animation .prize-icon-big {
    animation: jackpotCelebration 2s ease-out;
    font-size: 100px;
}

.jackpot-animation .prize-amount {
    animation: jackpotTextExplosion 2s ease-out;
    font-size: 28px;
    background: linear-gradient(45deg, #FFD700, #FF9400, #FFE60F);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes jackpotCelebration {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    25% {
        transform: scale(1.5) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
    }
    75% {
        transform: scale(1.4) rotate(270deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

@keyframes jackpotTextExplosion {
    0% {
        opacity: 0;
        transform: scale(0) translateY(50px);
    }
    50% {
        opacity: 1;
        transform: scale(1.3) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/*profile*/

.page#profile {
    display: none;
}

.page#profile.on {
    display: block;
}

.profile-content {
    border-radius: 25px;
    padding: 25px;
    margin-bottom: 20px;
    position: relative;
    top: 2%;
}

/* Support Button */
.support-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF9400;
    color: white;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

/* Profile page styles */
.profile-content {
    text-align: center;
    padding: 0px;
    position: relative;
}

.avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background:#FF9400;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px auto;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#profile-name {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgb(0, 0, 0, 0.35);
}

.cassa{
    cursor: pointer;
    width: 165%;
    opacity: 1;
    margin: 0% 0% -34% -21%;
    transform: translateY(0px);
    transition: all 0.3s ease;
    animation: notebookGlow 2s ease-in-out infinite alternate;
}

.cassa.hide {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.5s ease;
}

.edit-profile-btn {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto 25px auto;
    display: block;
}



.profile-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.stat-block {
    background: #fbf8ef;
    border-radius: 15px;
    text-align: center;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}



.stat-block p:first-child {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    margin-top: 0;
}

.stat-block p:last-child {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
    margin-bottom: 0;
    text-shadow: 0 2px 4px rgb(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}



/* Profile Action Buttons */
.profile-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.profile-action-btn {
    background: #FF9400;
    color: white;
    border: 2px solid #FF9400;
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    width:100%;
    justify-content:center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



.profile-action-btn img {
    width: 24px;
    height: 24px;
    transition: filter 0.3s ease;
    filter: brightness(0) invert(1);
}


.profile-action-btn span {
    line-height: 1.2;
}

/* Telegram ID Section */
.telegram-id-section {
    background: #fbf8ef;
    border-radius: 20px;
    padding: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(164, 129, 53, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.telegram-id-section h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    margin: 0 0 8px 0;
}

.telegram-id-section p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #666;
    margin: 0 0 0px 0;
    line-height: 1.4;
}

/* QR Code Section */
.qr-code-section {
    background: linear-gradient(135deg, white 0%, #fff4e5 100%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(164, 129, 53, 0.1);
    border: 2px solid rgba(164, 129, 53, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.qr-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.qr-text {
    flex: 1;
}

.qr-text h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #FF9400;
    margin: 0 0 8px 0;
}

.qr-text p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.qr-code-container {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-code-container canvas {
    border-radius: 5px;
}

/* QR Modal */
.qr-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 3000;
    transition: background 0.5s ease;
}

.qr-modal.show {
    background: rgba(0, 0, 0, 0.7);
}

.qr-modal-content {
    position: absolute;
    background: white;
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-100vh) scale(0.8);
}

.qr-modal.show .qr-modal-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.qr-modal-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #333;
    margin: 0 0 25px 0;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease 0.3s;
}

.qr-modal.show .qr-modal-title {
    opacity: 1;
    transform: translateY(0);
}

.qr-modal-code {
    margin: 25px 0;
    display: flex;
    justify-content: center;
    transition: all 0.5s ease 0.1s;
}

.qr-modal-code canvas {
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#qrModalInput {
    width: 100%;
    max-width: 300px;
    padding: 15px;
    border: 2px solid rgba(164, 129, 53, 0.2);
    border-radius: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    background: rgba(164, 129, 53, 0.05);
    color: #FF9400;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.4s;
}

.qr-modal.show #qrModalInput {
    opacity: 1;
    transform: translateY(0);
}

#qrModalInput:focus {
    outline: none;
    border-color: #FF9400;
    box-shadow: 0 0 15px rgba(255, 148, 0, 0.3);
}

.refer-code-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#referral-code {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: #fbeed7;
    color: #333;
    border: 2px solid rgb(255 148 0);
    transition: all 0.3s ease;
    height: 4px;
    width:100%;
}

#referrals-list, #bonus-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.invite-button {
    width: 100%;
    background:#FF9400;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    padding: 7px 0;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.collect-button {
    width: 100%;
    background: #FF9400;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    
    cursor: pointer;
    margin: 4% 0% -4% 0%;
    transition: all 0.3s ease;
}

.collect-button:disabled {
    cursor: not-allowed;
}

.referral-item {
    background: #fbf8ef;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.referral-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.referral-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.referral-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #FF9400;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
    overflow: hidden;
}

.referral-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.referral-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.referral-coins {
    background: #fbeed7;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: #FF9400;
    border-radius: 10px;
    padding: 5px;
    border: 2px solid #FF9400;
}

.referral-progress-bar {
    width: 100%;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
}

.referral-progress-fill {
    height: 100%;
    background: #FF9400;
    transition: width 0.3s ease;
}



.button-copy {
    background: #FF9400;
    border: none;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}


.cafe-levels-block {
    margin: 20px 0;
    background: #fbf8ef;
    border-radius: 15px;
    padding: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cafe-levels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 0px;
    justify-items: center;
}

.cafe-level-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.cafe-circle-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #FF9400;
    overflow: hidden;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}



.cafe-circle-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cafe-circle-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #333;
    margin-bottom: 5px;
    text-align: center;
    line-height: 1.2;
    max-width: 90px;
}

.cafe-circle-rank {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #FF9400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 148, 0, 0.1);
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 148, 0, 0.2);
}

.button-copy img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 1020;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.modal.show {
    background-color: rgba(0,0,0,0.6);
}

.modal-content {
    background-color: #FBF8EF;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 500px;
    position: relative;
    transform: translateY(-100px);
    transition: all 0.5s ease;
    opacity: 0;
}

.modal.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal.closing .modal-content {
    transform: translateY(100px);
    opacity: 0;
}

.modal.closing {
    background-color: rgba(0,0,0,0);
    transition: background-color 0.3s ease;
}

.close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    z-index: 10;
}

.close:hover {
    color: #000;
}

.modal h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-align:center;
    color: #000000;
}

.modal p {
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    text-align: center;
}

#taskModalInput {
    width: 100%;
    padding: 12px;
    border: 1px solid #FF9400;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#taskModalInput:focus {
    outline: none;
    border: 3px solid #FF9400;
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-button {
    padding: 8px 20px;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-button.primary {
    background-color: #FF9400;
    color: white;
}

.modal-button.primary:hover {
    background-color: #e8850a;
}

.modal-button.secondary {
    background-color: #fbeed7;
    color: #ffb957;
}


/* Daily Bonus Modal */
.daily-bonus-modal {
    text-align: center;
    padding: 15px 15px;
}

.daily-bonus-modal h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #000;
    margin: 0% 0 5% 0;
}

.daily-bonus-modal p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #666;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

#dailyBonusModalReward {
    font-size: 18px;
    margin-bottom: 25px;
}

#dailyBonusModalReward span {
    color: #FF9400;
    font-weight: 700;
    font-size: 20px;
    text-shadow: 0px -1px 3px #ffc26d;
}

.daily-bonus-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 15px 40px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

/* Success Animation Overlay */
.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 148, 0, 0.1), rgba(255, 230, 15, 0.1), rgba(255, 148, 0, 0.1));
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
    backdrop-filter: blur(10px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: none; /* Hidden by default */
}

.success-overlay[style*="display: flex"] {
    visibility: visible;
}

.success-animation {
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(255, 148, 0, 0.3);
}

.success-checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-block;
    stroke-width: 2;
    stroke: #FF9400;
    stroke-miterlimit: 10;
    margin: 0 auto 20px;
    box-shadow: inset 0px 0px 0px #FF9400;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.success-checkmark .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #FF9400;
}

.success-checkmark .check-icon::before,
.success-checkmark .check-icon::after {
    content: '';
    height: 100px;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    transform: rotate(-45deg);
}

.success-checkmark .check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
}

.success-checkmark .check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: rotate-circle 4.25s ease-in;
}

.success-checkmark .check-icon .icon-line {
    height: 2px;
    background-color: #FF9400;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

.success-checkmark .check-icon .icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}

.success-checkmark .check-icon .icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}

.success-checkmark .check-icon .icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: rgba(0, 0, 0, 0.8);
}

.success-checkmark .check-icon .icon-circle {
    top: -2px;
    left: -2px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 148, 0, .2);
    position: absolute;
}

#successMessage {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 10px;
    color: white;
}

#successReward {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #FFE60F;
}

@keyframes modalBackdropIn {
    from { 
        background-color: rgba(0,0,0,0);
    }
    to { 
        background-color: rgba(0,0,0,0.6);
    }
}

@keyframes modalBackdropOut {
    from { 
        background-color: rgba(0,0,0,0.6);
    }
    to { 
        background-color: rgba(0,0,0,0);
    }
}

@keyframes modalSlideIn {
    from { 
        transform: translateY(-100vh) scale(0.9);
    }
    to { 
        transform: translateY(0) scale(1);
    }
}

@keyframes modalSlideOut {
    from { 
        transform: translateY(0) scale(1);
    }
    to { 
        transform: translateY(100vh) scale(0.9);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 60px #FF9400;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 148, 0, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 148, 0, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 148, 0, 0.5);
    }
}

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

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

/* Daily Rewards Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 148, 0, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 25px rgba(255, 148, 0, 0.6);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 4px 15px rgba(255, 148, 0, 0.4);
        transform: scale(1);
    }
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes celebration {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    75% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.daily-reward-card {
    position: relative;
}

.daily-reward-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(255, 148, 0, 0.1), transparent);
    border-radius: 22px;
    z-index: -1;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.claim-button:active {
    animation: celebration 0.6s ease-out;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes deductionShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Beautiful Task Success Animations */
@keyframes drawCircle {
    0% {
        stroke-dasharray: 0 377;
        transform: rotate(-90deg);
    }
    100% {
        stroke-dasharray: 377 377;
        transform: rotate(0deg);
    }
}

@keyframes drawCheckmark {
    0% {
        stroke-dashoffset: 50;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-success-overlay {
    backdrop-filter: blur(5px);
}

.task-success-overlay svg {
    filter: drop-shadow(0 0 10px rgba(255, 148, 0, 0.5));
}

/* Modern Page Loading Animations */
@keyframes modernPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(255, 148, 0, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 15px 40px rgba(255, 148, 0, 0.5);
    }
}

@keyframes orbitDots {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(70px) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(70px) rotate(-360deg);
        opacity: 0.3;
    }
}

@keyframes textFade {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}

@keyframes progressLoad {
    0% {
        width: 0%;
        transform: translateX(-100%);
    }
    50% {
        width: 60%;
        transform: translateX(0%);
    }
    100% {
        width: 100%;
        transform: translateX(100%);
    }
}

/* Keep some coffee animations for compatibility */
@keyframes coffeeFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes coffeeWave {
    0%, 100% {
        border-radius: 20px 20px 0 0;
        transform: scaleX(1);
    }
    50% {
        border-radius: 15px 15px 0 0;
        transform: scaleX(0.95);
    }
}

@keyframes steamRise {
    0% {
        opacity: 0;
        transform: translateY(0px) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-10px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
}

@keyframes beanOrbit {
    0% {
        transform: rotate(0deg) translateX(60px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(60px) rotate(-360deg);
    }
}

/* Reward Success Animations */
@keyframes rewardPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes sparkleFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-15px) rotate(180deg);
        opacity: 1;
    }
}

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

@keyframes crownBounce {
    0% {
        transform: scale(0.3) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes textShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 2px 4px rgba(255, 148, 0, 0.3);
    }
    50% {
        text-shadow: 0 4px 8px rgba(255, 148, 0, 0.5);
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 148, 0, 0.2);
        border-color: rgba(255, 148, 0, 0.3);
    }
    50% {
        box-shadow: 0 6px 20px rgba(255, 148, 0, 0.4);
        border-color: rgba(255, 148, 0, 0.5);
    }
}

@keyframes goldenFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

@keyframes goldenConfettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(1080deg);
        opacity: 0;
    }
}

/* User Block Screen Animations */
@keyframes gradientWave {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-15px) rotate(5deg);
    }
    66% {
        transform: translateY(-5px) rotate(-3deg);
    }
}

@keyframes textPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) translateX(10px) rotate(180deg);
        opacity: 0.8;
    }
}

#taska-tasks {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#taska-tasks.on {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.taska-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: black;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.5;
    padding: 0 10px;
}

.taska-tasks-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.taska-task-element {
    background: #FBF8EF;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border: none;
    transition: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.taska-task-element.completed {
    opacity: 0.7;
    cursor: default;
}

.taska-task-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: black;
    margin-bottom: 8px;
    margin-top: 0;
}

.taska-task-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #6E6F76;
    margin-bottom: 15px;
    margin-top: 0;
    text-align: left;
}

.taska-task-reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.taska-reward-amount {
    display: flex;
    align-items: center;
    gap: 5px;
}

.taska-reward-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FF9400;
}

.taska-task-status {
    display: flex;
    align-items: center;
}

.taska-checkmark {
    font-size: 24px;
    color: #FF9400;
    font-weight: 700;
}

.taska-continue-button {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: 100%;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.taska-continue-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 148, 0, 0.3);
}

.taska-continue-button:disabled {
    background-color: #EDEDED;
    color: black;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Coffee Pass Page */
#coffee-pass {
    position: relative;
    min-height: 100vh;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
}

.coffee-pass-progress {
    position: relative;
    bottom: -33%;
    width: 90%;
    padding: 12px;
    z-index: 10;
    border-radius: 15px;
    margin-bottom: 10px;
    background: #fbf8effc;
}

.progress-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #000000;
    text-align: center;
    margin-bottom: 8px;
}

.progress-line-container {
    width: 100%;
    height: 12%;
    background-color: #fae6c3;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 4%;
}

.progress-line-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF9400, #ff9400);
    border-radius: 10px;
    transition: width 0.8s ease;
    position: relative;
}

.coffee-pass-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/lvlPro2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.coffee-pass-content {
    text-align: center;
    margin-top: 20%;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    flex-grow: 1;
}

#pass{
    padding: 0;
    text-align: center;
    background-color: #492C20;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    overflow: hidden;
}

.coffee-pass-content p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.coffee-pass-levels {
    position: relative;
    bottom: -32%;
    right: 1%;
    width: 100%;
    padding: 3%;
    z-index: 10;
    background-color: #f8f5ec8a;
    border: 3px solid #ff9400;
    /*background-color: #b84d04cf;
    border: 3px solid #77350b;*/
}

.levels-list {
    display: flex;
    gap: 50px;
    padding: 0 20px;
    min-width: max-content;
    position: relative;
}

.level-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.level-circle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #6b2c05;/*#FBF8EF;*/
    border: 5px solid #FBF8EF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.7);
    position: relative;
    z-index: 2;
}

.level-reward {
    margin-top: 10px;
    background: rgba(251, 248, 239, 0.9);
    border-radius: 20px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #333;
    backdrop-filter: blur(5px);
}

.level-reward img {
    width: 16px;
    height: 16px;
}

.level-connector {
    position: absolute;
    top: 34px;
    left: 97%;
    width: 20%;
    height: 8%;
    background-color: #FBF8EF;
    z-index: 1;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
/*
.level-item:last-child .level-connector {
    display: none;
}
*/
/* Scrollbar styling */
.levels-container {
    overflow-x: auto;
    overflow-y: hidden;
    width:101%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
    -webkit-overflow-scrolling: touch;
}

.levels-container::-webkit-scrollbar {
    height: 6px;
}

.levels-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0px;
}

.levels-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0px;
}

.levels-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.7);
} 

.clan-content {
    padding: 20px 0;
}

.clan-name-section {
    text-align: center;
    padding: 20px;
    border-radius: 15px;
}

.clan-name-section h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000000;
    text-align:center;
    margin: 0;
}

.clan-members-section {
    margin-bottom: 30px;
}

.clan-members-section h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #333;
    margin-bottom: 3%;
    text-align: center;
    margin-top: 0%;
}

.clan-members-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #FBF8EF;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 10px;
        border-radius: 10px;
}

.clan-member-item {
    background: #fbf8ef;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.clan-member-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.clan-member-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.clan-member-position {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FF9400;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
}

.clan-member-position.top3 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.clan-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF9400;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.clan-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clan-member-details {
    flex: 1;
}

.clan-member-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin-bottom: 2px;
}

.clan-member-points {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #666;
}

.user-clan-position {
    margin-bottom: 30px;
}

.info-clan-page {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #333;
    justify-content: space-between; /* Adjust space between items */
}

.clan-rank-page,
.clan-points-page,
.clan-wars-page,
.clan-per-page{
        color: #FF9400;
        background: #fbf0d7;
        padding: 5px;
        border-radius: 10px;
        border: 2px solid #FF9400;
        display: flex;
        align-items: center;
        justify-content: space-around;
}

.user-position-card {
    background: linear-gradient(135deg, rgba(255, 148, 0, 0.1), rgba(255, 184, 0, 0.1));
    border: 2px solid #FF9400;
    border-radius: 15px;
    padding: 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.position-info, .points-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.position-label, .points-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #666;
}

.position-value, .points-value {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #FF9400;
}

.clan-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.clan-action-btn {
    background: #FF9400;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#competition-page {
    display: none;
    background-color: #FBF8EF;
}

#competition-page.on {
    display: block;
}

.competition-content {
        flex-direction: column;
        display: flex;
        width: 100%;
        height: 100%;
        position: relative;
        align-items: center;
}

.competition-content h1 {
    z-index:1;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 40px;
}

.competition-circles {
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
        /* top: 45%; */
        /* max-width: 300px; */
        margin-bottom: 0px;
}

.competition-circle {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        /* background: #fbf8efb3; */
        padding: 2%;
        border-radius: 10px;
}

.circle-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #FF9400;
    box-shadow: 0 4px 15px rgba(255, 148, 0, 0.3);
    transition: all 0.3s ease;
}

.circle-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    text-align: center;
    max-width: 100px;
    word-wrap: break-word;
}

.competition-scores {
    z-index:1;
    top: 61%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: absolute;
        max-width: 300px;
        margin-bottom: 40px;
}

.score-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* background: #fbf8ef; */
        border-radius: 15px;
}

.score-value {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #FF9400;
    margin-bottom: 5px;
}

.score-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #666;
}

.competition-line-container {
    padding: 10px;
    width: 90%;
    /* max-width: 350px; */
    margin-bottom: 0px;
    position: absolute;
    bottom: 10%;
    background: #fbf8efb3;
    border-radius: 10px;
}

.competition-line {
    width: 100%;
    height: 8px;
    background: #ff0000;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.line-progress {
    height: 100%;
    background: #FF9400;
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.button-all-collection{
        width: 100%;
        background: #FF9400;
        color: white;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 16px;
        border-radius: 10px;
        border: none;
        padding: 8px 0;
        cursor: pointer;
        transition: all 0.3s ease;
}


@keyframes progressShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.competition-button-container {
    top: 75%;
    position: absolute;
    bottom: 100px;
    width: 100%;
    box-sizing: border-box;
}

.motivation-button {
    width: 100%;
    background: linear-gradient(135deg, #FF9400, #FF9400);
    color: white;
    border: none;
    border-radius: 15px;
    padding: 8px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-top:10px;
}

/* Animation for when circles are active/winning */
.competition-circle.winning .circle-avatar {
    border-color: #FFD700;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
    animation: winningGlow 2s ease-in-out infinite;
}

@keyframes winningGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.7);
    }
}