:root{
    --card-bg: #0f1724;      /* fondo del card */
    --card-accent: #06b6d4;  /* color principal */
    --card-contrast: #ffffff;
    --muted: #94a3b8;
    --glass: rgba(255,255,255,0.04);
    --radius: 12px;
    --shadow: 0 6px 18px rgba(2,6,23,0.6);
    --gap: 12px;
    --fw-bold: 700;
    --fw-medium: 600;
}


body,html{
    height: 100%;
    width: 100%;
}

:root{
    --bg: #0f172a;
    --card: #1e293b;
    --accent: #22d3ee;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --radius: 14px;
    --shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* contenedor general */
.ruleta-wrapper{
    width: 100%;
    max-width: 720px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* boton jugar */
.play-button{
    background: var(--accent);
    color: #06333c;
    border: none;
    padding: 14px 26px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: 0.15s ease;
}
.play-button:hover{
    transform: scale(1.05);
}
.play-button:active{
    transform: scale(0.97);
}

/* contenedor del resultado */
.result-container{
    background: var(--card);
    padding: 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    color: var(--text);
}

/* cada item */
.result-item{
    flex: 1;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* etiquetas */
.result-item label{
    font-size: 0.8rem;
    color: var(--muted);
    text-transform: uppercase;
}

/* valores */
.result-item p{
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* color extra para las secciones */
.result-item.action p{ color: #38bdf8; }
.result-item.target p{ color: #c084fc; }
.result-item.time p{ color: #f87171; }

/* responsive */
@media (max-width: 540px){
    .result-container{
        flex-direction: column;
    }
}

/* Spinner */
.loading-spinner{
    width: 26px;
    height: 26px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #22d3ee;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin: auto;
}
@keyframes spin{
    to { transform: rotate(360deg); }
}


.result-appear{
    opacity: 0;
    transform: scale(0.85) translateY(8px);
    animation: slotAppear 0.45s cubic-bezier(.18,.89,.33,1.1) forwards;
}

@keyframes slotAppear{
    0%{
        opacity: 0;
        transform: scale(0.85) translateY(8px);
    }
    60%{
        opacity: 1;
        transform: scale(1.03) translateY(0);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

.slot-vibration{
    animation: vibration 0.2s ease-in-out 1;
}
@keyframes vibration{
    0%{ transform: translateX(0); }
    20%{ transform: translateX(-2px); }
    40%{ transform: translateX(2px); }
    60%{ transform: translateX(-1px); }
    80%{ transform: translateX(1px); }
    100%{ transform: translateX(0); }
}