/* ============================================
   Casino de Corbak — roue de la fortune
   15 segments (1 oeuf + 14 vides). Theme corruption
   (violet + or), aligne sur l'identite cendres corrompues.
   ============================================ */

.panel-casino {
    padding: 28px;
}

.casino-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(var(--gold-rgb), 0.28);
}
.casino-corbak-icon {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 16px rgba(176, 102, 255, 0.5))
        drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.3));
}

.casino-stage {
    display: grid;
    grid-template-columns: minmax(520px, 620px) 1fr;
    gap: 56px;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1080px) {
    .casino-stage {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* ============================================
   WHEEL — structure en 4 couches superposees
   1. outer rim (or) avec etoiles decoratives
   2. wheel body (segments)
   3. hub central
   4. pointer (par-dessus tout)
   ============================================ */

.casino-wheel-wrap {
    position: relative;
    width: 560px;
    height: 560px;
    margin: 0 auto;
    --wheel-size: 560px;
}
@media (max-width: 1080px) {
    .casino-wheel-wrap {
        width: 480px;
        height: 480px;
        --wheel-size: 480px;
    }
}

/* Halo violet autour de la roue pour la reliure a l'identite corruption */
.casino-wheel-wrap::before {
    content: '';
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(176, 102, 255, 0.22) 0%,
        rgba(176, 102, 255, 0.08) 45%,
        transparent 70%);
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
}

/* Pointer : grosse fleche doree depuis le haut, legere ombre portee */
.casino-wheel-pointer {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-top: 42px solid var(--gold);
    z-index: 10;
    filter:
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 12px rgba(var(--gold-rgb), 0.6));
}
.casino-wheel-pointer::before {
    /* Pastille doree juste au-dessus de la pointe, comme un clou decoratif */
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe49a 0%, #c89b3c 60%, #5a3d0e 100%);
    border: 2px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Rim exterieur or — double bordure, avec animation de glow subtile */
.casino-wheel-rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            rgba(var(--gold-rgb), 0.85) 0%,
            rgba(var(--gold-rgb), 0.45) 50%,
            rgba(var(--gold-rgb), 0.85) 100%);
    padding: 14px;
    box-shadow:
        0 0 40px rgba(var(--gold-rgb), 0.35),
        inset 0 0 8px rgba(0, 0, 0, 0.6);
    z-index: 1;
}
/* 12 studs decoratifs equidistants sur le rim */
.casino-wheel-studs {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.casino-wheel-stud {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe49a 0%, #c89b3c 50%, #3a2506 100%);
    box-shadow:
        0 0 6px rgba(255, 220, 140, 0.6),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
    /* position calculee via --angle (degres) et --radius (px, calc depuis wheel-size) */
    transform:
        rotate(var(--angle))
        translate(0, calc(calc(var(--wheel-size) * -0.5) + 20px));
}

/* Wheel body (15 segments) — utilise un conic-gradient pour les tranches
   circulaires, plus propre que 15 clip-path triangulaires. from=-12deg pour
   que le segment 0 soit centre sur le nord (12h). */
.casino-wheel {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    overflow: hidden;
    background:
        conic-gradient(from -12deg,
            /* Seg 0 : egg (or chaud) */
            rgba(200, 140, 60, 0.82) 0deg,
            rgba(200, 140, 60, 0.82) 24deg,
            /* Seg 1 : alt violet fonce */
            rgba(46, 22, 78, 0.85)  24deg,
            rgba(46, 22, 78, 0.85)  48deg,
            /* Seg 2 : base violet clair */
            rgba(66, 34, 100, 0.85) 48deg,
            rgba(66, 34, 100, 0.85) 72deg,
            rgba(46, 22, 78, 0.85)  72deg,
            rgba(46, 22, 78, 0.85)  96deg,
            rgba(66, 34, 100, 0.85) 96deg,
            rgba(66, 34, 100, 0.85) 120deg,
            rgba(46, 22, 78, 0.85)  120deg,
            rgba(46, 22, 78, 0.85)  144deg,
            rgba(66, 34, 100, 0.85) 144deg,
            rgba(66, 34, 100, 0.85) 168deg,
            rgba(46, 22, 78, 0.85)  168deg,
            rgba(46, 22, 78, 0.85)  192deg,
            rgba(66, 34, 100, 0.85) 192deg,
            rgba(66, 34, 100, 0.85) 216deg,
            rgba(46, 22, 78, 0.85)  216deg,
            rgba(46, 22, 78, 0.85)  240deg,
            rgba(66, 34, 100, 0.85) 240deg,
            rgba(66, 34, 100, 0.85) 264deg,
            rgba(46, 22, 78, 0.85)  264deg,
            rgba(46, 22, 78, 0.85)  288deg,
            rgba(66, 34, 100, 0.85) 288deg,
            rgba(66, 34, 100, 0.85) 312deg,
            rgba(46, 22, 78, 0.85)  312deg,
            rgba(46, 22, 78, 0.85)  336deg,
            rgba(66, 34, 100, 0.85) 336deg,
            rgba(66, 34, 100, 0.85) 360deg
        ),
        radial-gradient(circle at center,
            rgba(40, 24, 66, 1) 0%,
            rgba(16, 8, 28, 1) 70%);
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.45),
        inset 0 0 40px rgba(176, 102, 255, 0.08);
    transform: rotate(0deg);
    will-change: transform;
    z-index: 3;
}

/* Dividers radiaux entre segments (14 traits or fins) dessines via un
   second conic-gradient superpose. */
.casino-wheel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from -12deg,
        transparent 0deg, transparent calc(24deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(24deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 24deg,
        transparent 24deg, transparent calc(48deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(48deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 48deg,
        transparent 48deg, transparent calc(72deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(72deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 72deg,
        transparent 72deg, transparent calc(96deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(96deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 96deg,
        transparent 96deg, transparent calc(120deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(120deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 120deg,
        transparent 120deg, transparent calc(144deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(144deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 144deg,
        transparent 144deg, transparent calc(168deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(168deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 168deg,
        transparent 168deg, transparent calc(192deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(192deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 192deg,
        transparent 192deg, transparent calc(216deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(216deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 216deg,
        transparent 216deg, transparent calc(240deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(240deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 240deg,
        transparent 240deg, transparent calc(264deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(264deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 264deg,
        transparent 264deg, transparent calc(288deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(288deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 288deg,
        transparent 288deg, transparent calc(312deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(312deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 312deg,
        transparent 312deg, transparent calc(336deg - 0.3deg),
        rgba(var(--gold-rgb), 0.35) calc(336deg - 0.3deg), rgba(var(--gold-rgb), 0.35) 336deg,
        transparent 336deg, transparent 360deg
    );
    z-index: 1;
}

/* Hub central avec icone cendre corrompue */
.casino-wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(255, 220, 140, 0.35) 0%,
            rgba(35, 18, 50, 0.95) 60%,
            rgba(10, 4, 16, 1) 100%);
    border: 3px solid rgba(var(--gold-rgb), 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow:
        0 0 22px rgba(176, 102, 255, 0.5),
        0 0 8px rgba(var(--gold-rgb), 0.4),
        inset 0 0 16px rgba(0, 0, 0, 0.6);
}
.casino-center-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* ============================================
   SEGMENTS
   15 triangles isoceles, chacun rotate de i*24deg via JS.
   Couleurs alternees (2 tons) + segment "egg" special.
   ============================================ */

/* Segments = conteneurs de positionnement SEULEMENT (les couleurs des
   tranches sont sur .casino-wheel via conic-gradient). Ici on rotate
   le conteneur vers le segment voulu et on place le contenu a mi-radius. */
.casino-segment {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    z-index: 4; /* au-dessus du conic + dividers (z 1) */
    pointer-events: none;
}
.casino-segment.is-egg {
    filter: drop-shadow(0 0 8px rgba(255, 220, 140, 0.6));
    animation: casino-egg-pulse 2.6s ease-in-out infinite;
}
@keyframes casino-egg-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 220, 140, 0.5)); }
    50%      { filter: drop-shadow(0 0 14px rgba(255, 220, 140, 0.85)); }
}

/* Contenu interne : se trouve sur le rayon du segment, a ~70% du rayon
   depuis le centre. La rotation parent place le conteneur a la bonne
   angulaire ; le translateY(-N%) pousse radialement. */
.casino-segment-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;   /* center on parent origin (wheel center) */
    transform: translateY(calc(var(--wheel-size, 560px) * -0.34));
    display: inline-block;
    overflow: hidden;
    z-index: 5;
}
.casino-segment-inner > i {
    display: block;
    width: 128px;
    height: 128px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto;
    transform: scale(0.406);
    transform-origin: top left;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.casino-segment-empty {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    transform: translateY(calc(var(--wheel-size, 560px) * -0.36));
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 220, 140, 0.9) 0%,
        rgba(var(--gold-rgb), 0.45) 60%,
        transparent 100%);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.55);
    z-index: 5;
}

/* ============================================
   INFO SIDE — prize card + controls
   ============================================ */

.casino-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 280px;
}

.casino-prize {
    background: linear-gradient(180deg,
        rgba(176, 102, 255, 0.08) 0%,
        rgba(16, 8, 28, 0.85) 100%);
    border: 1px solid rgba(176, 102, 255, 0.35);
    border-radius: 14px;
    padding: 22px 20px;
    text-align: center;
    box-shadow:
        0 0 26px rgba(176, 102, 255, 0.12),
        inset 0 1px 0 rgba(var(--gold-rgb), 0.08);
}
.casino-prize-label {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #cba8ff;
    opacity: 0.9;
    margin-bottom: 14px;
}
.casino-prize-egg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Preview de l'oeuf : 112x112 container, <i> 128x128 scale(0.875) */
.casino-egg-preview {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 112px;
    height: 112px;
    background:
        radial-gradient(circle,
            rgba(255, 220, 140, 0.15) 0%,
            rgba(0, 0, 0, 0.4) 70%);
    border-radius: 50%;
    border: 2px solid rgba(var(--gold-rgb), 0.45);
    box-shadow:
        0 0 18px rgba(255, 220, 140, 0.2),
        inset 0 0 12px rgba(0, 0, 0, 0.5);
}
.casino-egg-preview > i {
    display: block;
    width: 128px;
    height: 128px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto;
    transform: scale(0.875);
    transform-origin: top left;
}

.casino-prize-name {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: var(--gold);
    letter-spacing: 1.2px;
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.3);
}
.casino-prize-timer {
    margin-top: 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 1px;
}
.casino-prize-timer span {
    color: #cba8ff;
    font-weight: 600;
    font-size: 14px;
}

/* ============================================
   CONTROLS (cost + button + result)
   ============================================ */

.casino-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.casino-cost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    color: #cba8ff;
    letter-spacing: 0.5px;
}
.casino-cost img {
    width: 22px;
    height: 22px;
}

.casino-spin-btn {
    min-width: 240px;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 24px;
    background: linear-gradient(180deg,
        rgba(var(--gold-rgb), 0.2) 0%,
        rgba(var(--gold-rgb), 0.08) 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.65);
    color: var(--gold);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s ease;
    box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.2);
}
.casino-spin-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(180deg,
        rgba(var(--gold-rgb), 0.32) 0%,
        rgba(var(--gold-rgb), 0.14) 100%);
    box-shadow: 0 0 28px rgba(var(--gold-rgb), 0.45);
}
.casino-spin-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

.casino-result {
    min-height: 28px;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-align: center;
    max-width: 280px;
    line-height: 1.5;
}
.casino-win {
    color: #ffdf88;
    text-shadow: 0 0 16px rgba(255, 220, 140, 0.7);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
}
.casino-lose {
    color: var(--text-secondary);
    font-style: italic;
}