html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-width: 100vw;
    max-height: 100vh;
    touch-action: none;
}
body {
    font-family: sans-serif;
    background: #19363D;
    color: white;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding-top: 16px;
}
.wheel-wrapper {
    position: relative;
    width: 260px;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 130px auto 0 auto;
}
.canvas-holder {
    width: 100%;
    height: 100%;
    max-width: 90vmin;
    max-height: 90vmin;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding: 0;
    box-sizing: border-box;
    box-shadow: 0 -35px 50px 50px rgba(154, 255, 160, 0.5);
    border-radius: 50%;
}
.wheel img {
    width: 100%;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.spin-btn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    background-color: #ffcc00;
    color: #333;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}
.spin-btn:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}
/* --- Pulse Animation --- */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes spin-and-pulse {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.spin-active {
    animation: spin-and-pulse 2s linear infinite;
}
.result-frame {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    color: #000;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 30px 2px rgba(154, 255, 160, 0.3);
    z-index: 9999;
    text-align: center;
    min-width: 280px; /* или 360px, если нужно ещё больше */
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    color: #96D52B;
}
.pointer {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #fff;
    z-index: 10;
}
.center-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 5;
}
.spin-overlay {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.56);
    width: 80px;
    height: 80px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.spin-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.spin-layer.layer2 {
    transform: scale(0.85);
}

.spin-layer.layer3 {
    pointer-events: auto;
    cursor: pointer;
}
.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #DAFF9C;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Adaptive banner & wheel for mobile screens --- */
@media (max-height: 720px), (max-width: 380px) {
    .promo-banner {
    transform: scale(0.7);
    top: 4px;
    }

    .wheel-wrapper {
    transform: scale(0.8);
    margin-top: 90px;
    }
}

/* --- Adaptive for extra-small screens --- */
@media (max-height: 670px) {
    .promo-banner {
    transform: scale(0.65);
    top: 5px;
    }
    .wheel-wrapper {
    transform: scale(0.65);
    margin-top: 55px;
    }
    .info-box {
    transform: scale(0.85);
    margin-top: 0;
    margin-bottom: 0;
    }
    #mainContent > div[style*="margin-top: 30px"] {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    }
    #inviteBtnMain {
    transform: scale(0.85);
    }
}

/* --- Landscape & small height adaptations --- */
@media (max-height: 550px) {
    .promo-banner {
    transform: scale(0.65);
    top: 5px;
    }
    .wheel-wrapper {
    transform: scale(0.65);
    margin-top: 65px;
    }
    .info-box {
    transform: scale(0.85);
    margin-top: 0;
    margin-bottom: 0;
    }
    #spinActionBtn {
    transform: scale(0.9);
    margin-top: 5px;
    }
    #mainContent > div[style*="margin-top: 30px"] {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    }
    #inviteBtnMain {
    transform: scale(0.9);
    }
}

/* --- Adaptations for very small height screens --- */
@media (max-height: 450px) {
    .promo-banner {
    transform: scale(0.55);
    top: 2px;
    }
    .wheel-wrapper {
    transform: scale(0.55);
    margin-top: 35px;
    }
    .info-box {
    transform: scale(0.75);
    margin-top: -15px;
    }
    #spinActionBtn {
    transform: scale(0.8);
    margin-top: -10px;
    }
    #mainContent > div[style*="margin-top: 30px"] {
    margin-top: 8px !important;
    transform: scale(0.85);
    }
    #inviteBtnMain {
    transform: scale(0.85);
    margin-top: -5px;
    }
}