/* Lucky Wheel - Premium Casino Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --gold:       #ffd700;
    --gold-light: #ffecb3;
    --gold-mid:   #c8960c;
    --gold-dark:  #8a6a00;
    --gold-shine: #fffbe6;
    --text-white: #f0ead6;
    --text-muted: #6b6555;
    --win-gold:   #c8960c;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background: transparent;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100dvh - 3.5rem);
}

/* ============ SCREENS ============ */
.screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #06050a;
    color: var(--text-white);
    z-index: 1000;
}

.screen.hidden { display: none; }

.loading-spinner {
    width: 54px;
    height: 54px;
    border: 3px solid rgba(255,215,0,0.15);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

#loading-screen p {
    margin-top: 18px;
    color: var(--gold-mid);
    font-size: 15px;
    letter-spacing: 1px;
}

.login-content { text-align: center; }
.login-icon { font-size: 56px; margin-bottom: 18px; }
.login-content h2 { color: var(--gold); margin-bottom: 8px; }
.login-content p { color: var(--text-muted); }

/* ============ GAME CONTAINER ============ */
#game-container {
    width: 100%;
    max-width: 480px;
    height: 100%;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    position: relative;
}

#game-container.hidden { display: none; }

/* ============ HEADER ============ */
#game-header {
    width: 100%;
    padding: 6px 0;
    display: flex;
    justify-content: center;
}

.balance-display {
    background: linear-gradient(180deg, rgba(255,215,0,0.1) 0%, rgba(184,134,11,0.05) 100%);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 20px;
    padding: 7px 20px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.balance-label { color: var(--text-muted); font-size: 12px; letter-spacing: 0.5px; }

#balance-value {
    color: var(--gold-light);
    font-size: 20px;
    font-weight: 700;
    min-width: 70px;
    text-align: right;
}

.balance-currency { color: var(--gold-dark); font-size: 11px; }

/* ============ GAME TITLE TOP ============ */
.game-title-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0 6px;
    width: 100%;
}

.title-label {
    color: var(--gold);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(200,150,12,0.5);
}

.title-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,150,12,0.4), transparent);
    max-width: 60px;
}

/* ============ WHEEL SECTION ============ */
#wheel-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    padding: 8px;
}

/* Pointer — metallic needle */
.wheel-pointer {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    justify-content: center;
}

.pointer-needle {
    width: 6px;
    height: 48px;
    background: linear-gradient(180deg, #fffbe6 0%, #c8960c 40%, #5a3a00 100%);
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
    transition: transform 0.08s ease;
}

.pointer-needle.bounce {
    animation: pointerBounce 0.1s ease;
}

@keyframes pointerBounce {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(0.88) translateY(2px); }
}

/* Wheel Container */
.wheel-container {
    position: relative;
    width: 290px;
    height: 290px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Outer decorative ring — repeating gold segments */
.wheel-outer-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        #3a2800 0deg 22.5deg,
        #c8960c 22.5deg 23.5deg,
        #6a4800 23.5deg 45deg
    );
    box-shadow:
        0 0 0 2px #0f0c04,
        0 0 32px rgba(200,150,12,0.3),
        inset 0 0 12px rgba(0,0,0,0.6);
    pointer-events: none;
}

/* Metallic inner border ring */
.wheel-outer-ring::before {
    content: '';
    position: absolute;
    top: 5px; left: 5px;
    right: 5px; bottom: 5px;
    border-radius: 50%;
    border: 2px solid rgba(200,150,12,0.35);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.wheel {
    width: 268px;
    height: 268px;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}

.wheel.spinning { transition: none; }

/* Center cap */
.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    background: radial-gradient(circle at 40% 38%, #fffbe6 0%, #c8960c 35%, #8a6a00 70%, #3a2800 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
        0 0 0 3px #5a4200,
        0 0 0 5px #c8960c,
        0 0 0 7px #3a2800,
        0 6px 18px rgba(0,0,0,0.7);
    z-index: 10;
}

/* CSS 10-point star */
.center-star {
    width: 20px;
    height: 20px;
    background: rgba(255,248,220,0.9);
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Sector labels rendered by JS */
.sector-label {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

/* ============ WIN DISPLAY ============ */
#win-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(180deg, rgba(200,150,12,0.96) 0%, rgba(90,60,0,0.96) 100%) padding-box,
        linear-gradient(180deg, #fffbe6 0%, #8a6a00 50%, #fffbe6 100%) border-box;
    border: 2px solid transparent;
    border-radius: 18px;
    padding: 18px 40px;
    box-shadow: 0 0 50px rgba(200,150,12,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
    z-index: 100;
    text-align: center;
    animation: winPopup 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#win-display.hidden { display: none; }

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

.win-label {
    display: block;
    color: #0a0700;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 2px;
}

#win-amount {
    display: block;
    color: #0a0700;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1;
}

.win-currency {
    display: block;
    color: #0a0700;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-top: 3px;
}

/* ============ MESSAGE DISPLAY ============ */
#message-display {
    position: absolute;
    bottom: 210px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(180,20,40,0.85);
    backdrop-filter: blur(6px);
    padding: 8px 22px;
    border-radius: 10px;
    border: 1px solid rgba(220,60,60,0.5);
    z-index: 100;
    white-space: nowrap;
}

#message-display.hidden { display: none; }
#message-text { color: var(--text-white); font-size: 13px; }

/* ============ SPINS INFO ============ */
#spins-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
}

.free-spins {
    display: flex;
    align-items: center;
    gap: 5px;
    background:
        rgba(0,0,0,0.25) padding-box,
        linear-gradient(180deg, #6a5000 0%, #2a1e00 50%, #6a5000 100%) border-box;
    border: 1px solid transparent;
    padding: 6px 18px;
    border-radius: 18px;
}

.spins-label { color: var(--text-muted); font-size: 12px; letter-spacing: 0.3px; }

#free-spins-count {
    color: var(--gold);
    font-size: 18px;
    font-weight: 700;
}

.spins-max { color: var(--text-muted); font-size: 12px; }

#buy-spin-btn {
    padding: 8px 20px;
    background:
        linear-gradient(180deg, #c8960c 0%, #7a5800 40%, #c8960c 100%) padding-box,
        linear-gradient(180deg, var(--gold-shine) 0%, #8a6a00 50%, var(--gold-shine) 100%) border-box;
    border: 1px solid transparent;
    border-radius: 18px;
    color: #0a0700;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 12px rgba(200,150,12,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}

#buy-spin-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(200,150,12,0.5);
}

#buy-spin-btn.hidden { display: none; }

#buy-spin-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ============ SPIN BUTTON ============ */
#spin-button {
    width: 195px;
    height: 52px;
    background:
        linear-gradient(180deg, #c8960c 0%, #7a5800 40%, #c8960c 100%) padding-box,
        linear-gradient(180deg, var(--gold-shine) 0%, #8a6a00 50%, var(--gold-shine) 100%) border-box;
    border: 1px solid transparent;
    border-radius: 26px;
    cursor: pointer;
    box-shadow:
        0 6px 22px rgba(200,150,12,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 0 rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    margin: 4px 0;
}

#spin-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 32px rgba(200,150,12,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
}

#spin-button:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 3px 12px rgba(200,150,12,0.35);
}

#spin-button:disabled {
    background: linear-gradient(180deg, #2a2520 0%, #1a1510 100%);
    border-color: #3a3020;
    box-shadow: none;
    cursor: not-allowed;
}

.spin-text {
    color: #0a0700;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

#spin-button:disabled .spin-text { color: #4a4030; }

#spin-button.pulse {
    animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% { box-shadow: 0 6px 22px rgba(200,150,12,0.4); }
    50%       { box-shadow: 0 6px 36px rgba(200,150,12,0.7); }
}

/* ============ PRIZE STRIP ============ */
#prize-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 5px 10px;
    background:
        rgba(0,0,0,0.2) padding-box,
        linear-gradient(180deg, #6a5000 0%, #2a1e00 50%, #6a5000 100%) border-box;
    border: 1px solid transparent;
    border-radius: 12px;
    width: auto;
}

.prize-item {
    padding: 4px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s ease;
}

.prize-item .prize-value {
    color: var(--gold-mid);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.prize-sep {
    width: 1px;
    height: 18px;
    background: rgba(200,150,12,0.3);
}

.prize-item.winner {
    background: rgba(200,150,12,0.15);
    border-radius: 8px;
}

.prize-item.winner .prize-value {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(200,150,12,0.7);
    animation: prizeWin 0.5s ease infinite;
}

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

/* ============ GAME TITLE BOTTOM ============ */
.game-title {
    padding: 5px;
}

.title-text {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ============ PARTICLES ============ */
#particles-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.particle {
    position: absolute;
    font-size: 22px;
    animation: particleFall 2s ease-out forwards;
}

@keyframes particleFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.5); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 400px) {
    .wheel-container { width: 250px; height: 250px; }
    .wheel { width: 230px; height: 230px; }
    .wheel-center { width: 44px; height: 44px; }
    .pointer-needle { width: 5px; height: 40px; }
    #spin-button { width: 165px; height: 46px; }
    .spin-text { font-size: 15px; }
    .prize-item { padding: 4px 10px; }
    .prize-item .prize-value { font-size: 12px; }
}

@media (max-height: 750px) {
    #wheel-section { padding: 4px; }
    .wheel-container { width: 240px; height: 240px; }
    .wheel { width: 222px; height: 222px; }
    #prize-list { display: none; }
}