/* ============================================================
   GalereLand — Prédits (glassmorphism v4)
   Remplace entièrement assets/css/predictions.css
   ============================================================ */

:root {
    --pred-violet: #a970ff;
    --pred-violet-soft: rgba(169, 112, 255, .15);
    --pred-violet-glow: rgba(169, 112, 255, .45);
    --pred-green: #2bd17e;
    --pred-green-soft: rgba(43, 209, 126, .15);
    --pred-green-glow: rgba(43, 209, 126, .55);
    --pred-red: #ff4757;
    --pred-red-soft: rgba(255, 71, 87, .15);
    --pred-red-glow: rgba(255, 71, 87, .5);
    --pred-gold: #ffce5b;
    --pred-glass-bg: rgba(20, 20, 30, .65);
    --pred-glass-border: rgba(255, 255, 255, .08);
    --pred-glass-border-strong: rgba(255, 255, 255, .15);
}

@keyframes predFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes predScaleIn {
    from { opacity: 0; transform: scale(.85) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes predSlideDown {
    from { opacity: 0; transform: translateY(-12px); max-height: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 1500px; }
}
@keyframes predShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-10px); }
    30% { transform: translateX(10px); }
    45% { transform: translateX(-8px); }
    60% { transform: translateX(8px); }
    75% { transform: translateX(-4px); }
    90% { transform: translateX(4px); }
}
@keyframes predPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--pred-violet-glow); }
    50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes predBounceIn {
    0% { transform: scale(.3); opacity: 0; }
    50% { transform: scale(1.08); }
    70% { transform: scale(.95); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes predGoldShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes predConfetti {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(-300px) rotate(720deg); opacity: 0; }
}

.pred-shake { animation: predShake .5s cubic-bezier(.36, .07, .19, .97) both; }

.pred-aura-inline {
    object-fit: contain;
    vertical-align: -2px;
    display: inline-block;
    margin: 0 1px;
}
.pred-human-inline {
    vertical-align: -2px;
    display: inline-block;
}

#ccPredShowTops, #ccPredTops { display: none !important; }

/* ============================================================
   WIDGET PRINCIPAL
   ============================================================ */
.cc-pred {
    margin: 0 0 10px 0;
    background: var(--pred-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--pred-glass-border);
    border-radius: 0 0 14px 14px;
    color: var(--text-primary, #e8e8f0);
    font-size: 13px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: predScaleIn .4s cubic-bezier(.2, .9, .3, 1.3) both;
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.cc-pred.hidden { display: none !important; }

.cc-pred[data-status="active"]::before,
.cc-pred[data-status="resolved"]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 0 0 14px 14px;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}
.cc-pred[data-status="active"]::before {
    background: linear-gradient(135deg, var(--pred-violet-glow), transparent 50%, var(--pred-violet-glow));
}
.cc-pred[data-status="resolved"]::before {
    background: linear-gradient(135deg, var(--pred-green-glow), transparent 50%, var(--pred-green-glow));
}

/* ============================================================
   HEADER — 2 modes
   ============================================================ */


.cc-pred-header {
    background: linear-gradient(
        110deg, 
        rgba(169, 112, 255, 0.4) 0%, 
        rgba(62, 197, 255, 0.4) 10%, 
        rgba(43, 209, 126, 0.4) 20%, 
        rgba(255, 206, 91, 0.4) 30%,
        rgba(255, 71, 87, 0.4) 40%,
        rgba(169, 112, 255, 0.4) 50%,  /* Milieu exact = Début du 2eme cycle */
        rgba(62, 197, 255, 0.4) 60%,
        rgba(43, 209, 126, 0.4) 70%,
        rgba(255, 206, 91, 0.4) 80%,
        rgba(255, 71, 87, 0.4) 90%,
        rgba(169, 112, 255, 0.4) 100%
    );
    background-size: 200% 100%;
    animation: predHeaderMesh var(--mesh-speed, 24s) linear infinite;
    border-bottom: 1px solid var(--pred-glass-border);
    border-radius: 0;
    user-select: none;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

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


/* Mode collapsed — tout le layout (les vues -view sont stylées plus bas) */
.cc-pred-header-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.cc-pred-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-pred-header-status {
    display: flex;
    align-items: center;
    gap: 7px;
}
.cc-pred-header-status .cc-pred-icon {
    color: #fff;
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}
.cc-pred-header-question {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.cc-pred-header-timer {
    font-size: 11px;
    color: var(--text-secondary, #b0b0c0);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.cc-pred-header-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    padding-top: 2px;
}
.cc-pred-header-total-val {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cc-pred-header-total-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-top: 1px;
}

/* Barre cumulative */
.cc-pred-cumbar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    background: rgba(0, 0, 0, .35);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.cc-pred-cumbar-seg {
    height: 100%;
    transition: width .6s cubic-bezier(.2, .9, .3, 1);
    box-shadow: 0 0 8px currentColor;
}

/* Toggle bouton collapsed : positionné en haut à droite absolu sur le header */
.cc-pred-header-toggle-wrap {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Mode expanded — header simple (utilise les mêmes styles de fond que le header de base) */

.cc-pred-header-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.cc-pred-header-left .cc-pred-icon {
    color: #fff;
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

.cc-pred-label {
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: linear-gradient(90deg, #fff, #a0a0b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.cc-pred-toggle {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--pred-glass-border);
    color: var(--text-secondary, #9a9ab0);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s, border-color .25s;
    flex-shrink: 0;
}
.cc-pred-toggle:hover {
    background: var(--pred-violet-soft);
    color: var(--pred-violet);
    border-color: var(--pred-violet-glow);
}
.cc-pred-toggle svg { transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.cc-pred[data-collapsed="1"] .cc-pred-toggle svg { transform: rotate(180deg); }

/* ============================================================
   BODY
   ============================================================ */
.cc-pred-body {
    padding: 14px;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.2, .9, .3, 1),
                padding .3s ease,
                opacity .3s ease;
    max-height: 3000px;
    opacity: 1;
    border-radius: 0 0 14px 14px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.cc-pred[data-collapsed="1"] .cc-pred-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.cc-pred-title {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #fff;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    flex-shrink: 0;
}

/* ============================================================
   OUTCOMES
   ============================================================ */
.cc-pred-outcomes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cc-pred-outcome {
    position: relative;
    background: color-mix(in srgb, var(--oc, var(--pred-violet)) 10%, rgba(255, 255, 255, .02));
    border: 1px solid color-mix(in srgb, var(--oc, var(--pred-violet)) 35%, var(--pred-glass-border));
    border-radius: 12px;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.3),
                box-shadow .25s,
                border-color .25s;
}
.cc-pred-outcome.cc-pred-new {
    animation: predScaleIn .4s cubic-bezier(.2, .9, .3, 1.4) both;
}
.cc-pred-outcome:hover {
    transform: translateY(-2px);
    border-color: var(--oc, var(--pred-violet));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4),
                0 0 0 1px color-mix(in srgb, var(--oc, var(--pred-violet)) 60%, transparent),
                0 0 24px color-mix(in srgb, var(--oc, var(--pred-violet)) 35%, transparent);
}
.cc-pred-outcome.won {
    border-color: var(--pred-green);
    background: var(--pred-green-soft);
    box-shadow: 0 0 24px var(--pred-green-glow), inset 0 0 12px rgba(43, 209, 126, .1);
}
.cc-pred-outcome.won.cc-pred-new {
    animation: predBounceIn .6s cubic-bezier(.2, .9, .3, 1.5) both;
}
.cc-pred-outcome.lost {
    opacity: .4;
    filter: grayscale(.5);
}
.cc-pred-outcome-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--oc, var(--pred-violet)) 0%, transparent 100%);
    opacity: .22;
    transition: width .7s cubic-bezier(.2, .9, .3, 1);
    pointer-events: none;
}
.cc-pred-outcome-content {
    position: relative;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cc-pred-outcome-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    min-height: 18px;
}
.cc-pred-outcome-title-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-pred-mine-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pred-gold);
    box-shadow: 0 0 10px var(--pred-gold), 0 0 16px var(--pred-gold);
    animation: predPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.cc-pred-win-tag {
    background: linear-gradient(135deg, var(--pred-green), #4eea9c);
    color: #061a10;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
    box-shadow: 0 2px 8px var(--pred-green-glow);
    flex-shrink: 0;
}

.cc-pred-outcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 4px 0 2px;
    gap: 6px;
}
.cc-pred-outcome-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.cc-pred-outcome-ratio {
    justify-content: flex-start;
    font-size: 22px;
    font-weight: 900;
    color: var(--oc, var(--pred-violet));
    text-shadow: 0 0 14px color-mix(in srgb, var(--oc, var(--pred-violet)) 50%, transparent);
    letter-spacing: -0.3px;
}
.cc-pred-outcome-aura {
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}
.cc-pred-outcome-aura-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}
.cc-pred-outcome-players {
    justify-content: flex-end;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}
.cc-pred-outcome-players svg {
    color: var(--text-secondary, #b0b0c0);
    flex-shrink: 0;
}

.cc-pred-bet-btn {
    background: linear-gradient(135deg, var(--oc, var(--pred-violet)), color-mix(in srgb, var(--oc, var(--pred-violet)) 65%, white));
    color: #fff;
    border: 0;
    padding: 9px 12px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    font-size: 11px;
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.3),
                box-shadow .2s,
                filter .2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    position: relative;
    overflow: hidden;
}
.cc-pred-bet-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .25), transparent 70%);
    transform: translateX(-100%);
    transition: transform .6s;
}
.cc-pred-bet-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    filter: brightness(1.15);
}
.cc-pred-bet-btn:hover:not(:disabled)::before { transform: translateX(100%); }
.cc-pred-bet-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.cc-pred-bet-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
    filter: grayscale(.6);
}

.cc-pred-mybet {
    margin-top: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(255, 206, 91, .12), rgba(255, 206, 91, .04));
    border: 1px solid rgba(255, 206, 91, .25);
    border-left: 3px solid var(--pred-gold);
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
    backdrop-filter: blur(10px);
    animation: predSlideDown .4s cubic-bezier(.2, .9, .3, 1.3) both;
    flex-shrink: 0;
}
.cc-pred-mybet.hidden { display: none; }
.cc-pred-mybet strong { color: var(--pred-gold); }

.cc-pred-meta {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-secondary, #b0b0c0);
    text-align: center;
    padding: 9px 8px;
    background: rgba(0, 0, 0, .2);
    border-radius: 8px;
    border: 1px solid var(--pred-glass-border);
    flex-shrink: 0;
}
.cc-pred-meta strong {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cc-pred-meta-sep {
    color: var(--pred-violet);
    margin: 0 4px;
    font-weight: 800;
    opacity: .6;
}
.cc-pred-warn {
    color: var(--pred-red);
    font-weight: 700;
    font-size: 11px;
}

/* ============================================================
   TOOLTIP TOP 5
   ============================================================ */
#ccPredTop5Tooltip {
    position: fixed;
    background: rgba(12, 12, 20, .96);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--pred-violet);
    border-radius: 12px;
    padding: 12px 14px;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.96);
    transition: opacity .2s, transform .2s cubic-bezier(.2, .9, .3, 1.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .7);
    max-width: 320px;
    min-width: 220px;
}
#ccPredTop5Tooltip.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
#ccPredTop5Tooltip .tt-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
#ccPredTop5Tooltip .tt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#ccPredTop5Tooltip .tt-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #b0b0c0;
    padding: 3px 0;
}
#ccPredTop5Tooltip .tt-list li .rank {
    width: 20px;
    font-weight: 800;
    color: var(--pred-violet);
    font-size: 11px;
}
#ccPredTop5Tooltip .tt-list li:nth-child(1) .rank { color: var(--pred-gold); font-size: 13px; }
#ccPredTop5Tooltip .tt-list li:nth-child(2) .rank { color: #c0c0d0; }
#ccPredTop5Tooltip .tt-list li:nth-child(3) .rank { color: #cd7f32; }
#ccPredTop5Tooltip .tt-list li img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .1);
}
#ccPredTop5Tooltip .tt-list li .name {
    flex: 1;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
#ccPredTop5Tooltip .tt-list li .amount {
    color: var(--pred-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
#ccPredTop5Tooltip .tt-list li.empty {
    color: #9a9ab0;
    font-style: italic;
    text-align: center;
    justify-content: center;
}

/* ============================================================
   MODAL DE MISE (viewer)
   ============================================================ */
.cc-pred-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: none;
}
.cc-pred-modal.hidden { display: none; }
.cc-pred-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 12, .65);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    animation: predFadeIn .4s ease both;
}
.cc-pred-modal-card {
    position: relative;
    background: var(--pred-glass-bg);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--pred-glass-border-strong);
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
    animation: predScaleIn .4s cubic-bezier(.2, .9, .3, 1.4) both;
    animation-delay: .25s;
}
.cc-pred-modal-card.shake { animation: predShake .5s cubic-bezier(.36, .07, .19, .97) both; }
.cc-pred-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    border: 1px solid var(--pred-glass-border);
    color: var(--text-secondary, #b0b0c0);
    font-size: 18px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
}
.cc-pred-modal-close:hover {
    background: var(--pred-red-soft);
    color: var(--pred-red);
    border-color: var(--pred-red);
}
.cc-pred-modal-title {
    font-size: 11px;
    color: var(--text-secondary, #b0b0c0);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 700;
}
.cc-pred-modal-outcome {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pred-glass-border);
}
.cc-pred-modal-outcome .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 12px currentColor;
}
.cc-pred-modal-balance {
    font-size: 12px;
    color: var(--text-secondary, #b0b0c0);
    margin-bottom: 10px;
    text-align: center;
}
.cc-pred-modal-balance strong {
    color: var(--pred-gold);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}
.cc-pred-modal-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.cc-pred-modal-input-row input {
    flex: 1;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    border: 1px solid var(--pred-glass-border);
    color: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    transition: border-color .2s, background .2s, box-shadow .2s;
    text-align: center;
}
.cc-pred-modal-input-row input::-webkit-outer-spin-button,
.cc-pred-modal-input-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cc-pred-modal-input-row input:focus {
    outline: none;
    border-color: var(--pred-violet);
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 0 3px var(--pred-violet-soft);
}
.cc-pred-modal-max {
    background: linear-gradient(135deg, var(--pred-violet-soft), transparent);
    border: 1px solid var(--pred-violet);
    color: var(--pred-violet);
    padding: 0 18px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.8px;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.cc-pred-modal-max:hover {
    background: var(--pred-violet);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--pred-violet-glow);
}
.cc-pred-modal-quick {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.cc-pred-modal-quick button {
    flex: 1;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(10px);
    border: 1px solid var(--pred-glass-border);
    color: #fff;
    padding: 9px 4px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 700;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.cc-pred-modal-quick button:hover {
    background: var(--pred-violet-soft);
    border-color: var(--pred-violet);
    transform: translateY(-2px);
    color: var(--pred-violet);
}
.cc-pred-modal-quick button:active { transform: translateY(0); }
.cc-pred-modal-gain {
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(10px);
    padding: 14px;
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-secondary, #b0b0c0);
    margin-bottom: 16px;
    text-align: center;
    border: 1px solid var(--pred-glass-border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.cc-pred-modal-gain strong {
    display: block;
    color: var(--pred-green);
    font-size: 24px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
    text-shadow: 0 0 16px var(--pred-green-glow);
}
.cc-pred-modal-confirm {
    width: 100%;
    background: linear-gradient(135deg, var(--pred-violet), #c79aff);
    color: #fff;
    border: 0;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s, filter .25s;
    box-shadow: 0 8px 24px var(--pred-violet-glow);
    position: relative;
    overflow: hidden;
}
.cc-pred-modal-confirm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .3), transparent 70%);
    transform: translateX(-100%);
    transition: transform .7s;
}
.cc-pred-modal-confirm:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 36px var(--pred-violet-glow);
    filter: brightness(1.1);
}
.cc-pred-modal-confirm:hover:not(:disabled)::before { transform: translateX(100%); }
.cc-pred-modal-confirm:active:not(:disabled) { transform: translateY(0) scale(.98); }
.cc-pred-modal-confirm:disabled { opacity: .5; cursor: wait; }

/* ============================================================
   ANIMATIONS CINEMATIQUES (WIN / LOSE)
   ============================================================ */
.cc-cinema-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 12, 0.85);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.cc-cinema-overlay.show { opacity: 1; pointer-events: all; }

.cc-cinema-card {
    z-index: 10002;
    position: relative;
    padding: 40px 50px;
    border-radius: 24px;
    text-align: center;
    max-width: 90vw;
    min-width: 320px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    transform: scale(0.5);
    opacity: 0;
}

/* --- THEME WIN (Jackpot) --- */
.cc-cinema-win {
    background: linear-gradient(135deg, rgba(255, 206, 91, 0.15), rgba(43, 209, 126, 0.15));
    border: 2px solid var(--pred-gold);
    box-shadow: 0 20px 80px rgba(255, 206, 91, 0.4), inset 0 0 40px rgba(255, 206, 91, 0.2);
    animation: cinemaWinEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cc-cinema-win .cc-cinema-title {
    color: var(--pred-gold);
    text-shadow: 0 0 20px var(--pred-gold);
}
.cc-cinema-win .cc-cinema-amount {
    color: #fff;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px var(--pred-green);
}

/* --- THEME LOSE (miroir du WIN, en rouge) --- */
.cc-cinema-lose {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.15), rgba(20, 20, 30, 0.85));
    border: 2px solid var(--pred-red);
    box-shadow: 0 20px 80px rgba(255, 71, 87, 0.4), inset 0 0 40px rgba(255, 71, 87, 0.2);
    animation: cinemaWinEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cc-cinema-lose .cc-cinema-title {
    color: var(--pred-red);
    text-shadow: 0 0 20px var(--pred-red);
}
.cc-cinema-lose .cc-cinema-amount {
    color: #fff;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px var(--pred-red);
}

/* --- TEXTES COMMUNS --- */
.cc-cinema-title {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.cc-cinema-amount {
    font-size: 54px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    line-height: 1;
}
.cc-cinema-amount img { width: 48px; height: 48px; object-fit: contain; }
.cc-cinema-sub {
    font-size: 14px;
    color: var(--text-secondary, #b0b0c0);
    margin-top: 16px;
    font-weight: 600;
}

/* --- KEYFRAMES --- */
@keyframes cinemaWinEnter {
    0% { transform: scale(0.2) translateY(100px); opacity: 0; }
    60% { transform: scale(1.1) translateY(-10px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@media (max-width: 600px) {
    .cc-cinema-card {
        padding: 30px 20px;
    }
    .cc-cinema-amount { font-size: 38px; }
    .cc-cinema-amount img { width: 34px; height: 34px; }

    .cc-pred-title { font-size: 13.5px; }
    .cc-pred-header-question { font-size: 12.5px; }
    .cc-pred-header-total-val { font-size: 19px; }
    .cc-pred-outcome-ratio { font-size: 18px; }
    .cc-pred-outcome-aura { font-size: 16px; }
    .cc-pred-outcome-players { font-size: 16px; }
    .cc-pred-outcome-aura-img { width: 16px; height: 16px; }
    .cc-pred-modal-input-row input { font-size: 16px; padding: 12px; }
    #ccPredTop5Tooltip { max-width: 90vw; }
}

@media (max-width: 768px) {
    /* Force le chat en flex column pour que ccPred puisse contraindre sa hauteur */
    .chat-box[data-mode="live"] .custom-chat { min-height: 0; }
    /* ccPred prend max 60% de la hauteur du chat quand ouvert */
    .chat-box[data-mode="live"] #ccPred[data-collapsed="0"] {
        max-height: 80%;
        min-height: 0;
        flex-shrink: 0;
    }
    .chat-box[data-mode="live"] #ccPred[data-collapsed="0"] .cc-pred-body {
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--pred-violet-soft) transparent;
        flex: 1 1 auto;
        min-height: 0;
    }
    .chat-box[data-mode="live"] #ccPred[data-collapsed="0"] .cc-pred-body::-webkit-scrollbar { width: 5px; }
    .chat-box[data-mode="live"] #ccPred[data-collapsed="0"] .cc-pred-body::-webkit-scrollbar-track { background: transparent; }
    .chat-box[data-mode="live"] #ccPred[data-collapsed="0"] .cc-pred-body::-webkit-scrollbar-thumb {
        background: var(--pred-violet-soft);
        border-radius: 3px;
    }
    /* Les messages du chat gardent leur flex:1 pour remplir le reste */
    .chat-box[data-mode="live"] .cc-messages { flex: 1 1 0; min-height: 0; }
}

@media (max-width: 600px) {
    .cc-pred-modal-card {
        padding: 22px;
        max-width: 92vw;
    }
}
/* --- NOUVEAUX STYLES DE TRANSITION HEADER --- */
.cc-pred-header-expanded-view {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 10px;
    opacity: 1;
    max-height: 60px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(.2, .9, .3, 1);
}
.cc-pred-header-collapsed-view {
    padding: 12px 14px 10px 14px;
    cursor: pointer;
    opacity: 1;
    max-height: 200px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(.2, .9, .3, 1);
}

.cc-pred[data-collapsed="0"] .cc-pred-header-collapsed-view {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border: 0;
}
.cc-pred[data-collapsed="1"] .cc-pred-header-expanded-view {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border: 0;
}