/* ============================================================
   SHAIYA BLUR — PRIZE WHEEL V2
   Dark Fantasy / MMORPG / Metal / Gold / Blur Cyan
   ============================================================ */

#blur-roulette-page {
    width: 115%;
    box-sizing: border-box;
    padding: 24px 18px 50px;
    color: #dce7ed;
}

#blur-roulette-page *,
#blur-roulette-page *::before,
#blur-roulette-page *::after {
    box-sizing: border-box;
}

/* ============================================================
   SELECTOR
   ============================================================ */

#blur-roulette-page .roulette-selector {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 28px;
    border: 1px solid #344952;
    background:
        radial-gradient(circle at 50% 0%, rgba(45,117,145,.18), transparent 38%),
        linear-gradient(180deg, #121c22, #080e12 80%);
    box-shadow:
        0 24px 70px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.roulette-selector-header {
    text-align: center;
    margin-bottom: 24px;
}

.roulette-selector-header > span {
    color: #caa75d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 4px;
}

.roulette-selector-header h2 {
    margin: 6px 0;
    color: #e9e4d7;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: 2px;
    text-shadow: 0 3px 8px #000;
}

.roulette-selector-header p {
    margin: 0;
    color: #74858e;
    font-size: 12px;
}

.roulette-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.roulette-mode-card {
    position: relative;
    min-height: 190px;
   
    overflow: hidden;
    border: 1px solid #4d5960;
    color: #dce7ed;
    background:
        radial-gradient(circle at 50% 0%, rgba(61,135,160,.16), transparent 45%),
        linear-gradient(145deg, #18242b, #0b1217);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 12px 28px rgba(0,0,0,.35);
    cursor: pointer;
    text-align: center;
    transition: .18s ease;
}

.roulette-mode-card::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #b58a3c, transparent);
}

.roulette-mode-card:hover {
    transform: translateY(-3px);
    border-color: #8f713d;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 16px 35px rgba(0,0,0,.55),
        0 0 22px rgba(57,144,175,.1);
}

.roulette-mode-card.premium {
    background:
        radial-gradient(circle at 50% 0%, rgba(178,132,50,.15), transparent 45%),
        linear-gradient(145deg, #211c14, #0d1113);
}

.mode-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border: 1px solid #8d6d37;
    border-radius: 50%;
    color: #e2c16f;
    font-size: 21px;
    background: radial-gradient(circle, #3a3322, #11171a 72%);
    box-shadow: 0 0 20px rgba(208,165,72,.12);
}

.mode-kicker {
    display: block;
    color: #8da5af;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
}

.roulette-mode-card strong {
    display: block;
    margin: 7px 0;
    color: #e8e2d4;
    font-size: 18px;
    letter-spacing: 1px;
}

.roulette-mode-card small {
    display: block;
    color: #75858d;
    font-size: 10px;
}

.roulette-mode-card b {
    display: inline-block;
    margin-top: 15px;
    color: #d9b968;
    font-size: 10px;
    letter-spacing: 1px;
}

/* ============================================================
   CARD PRINCIPAL
   ============================================================ */

.blur-roulette-card {
    position: relative;
    width: min(100%, 1240px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #3c4c54;
    color: #dce7ed;
    background:
        radial-gradient(ellipse at 50% 12%, rgba(48,108,133,.16), transparent 42%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.7), transparent 60%),
        linear-gradient(180deg, #111a20, #070c10);
    box-shadow:
        0 25px 70px rgba(0,0,0,.72),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.blur-roulette-card::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border: 1px solid rgba(125,150,160,.13);
    box-shadow: inset 0 0 35px rgba(0,0,0,.7);
}

.blur-roulette-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8d6a31, #e0b95c, #8d6a31, transparent);
    box-shadow: 0 0 14px rgba(225,180,75,.35);
}

/* ============================================================
   HEADER
   ============================================================ */

.roulette-header {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(100,117,126,.3);
    background: linear-gradient(180deg, #1a252c, #10171c);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.roulette-back {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #46555d;
    padding: 7px 10px;
    color: #93a5ae;
    background: #0d1418;
    font-size: 9px;
    cursor: pointer;
}

.roulette-back:hover {
    color: #e0c47a;
    border-color: #866d3b;
}

.roulette-header-emblem {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid #8d6d37;
    border-radius: 50%;
    color: #d9b664;
    background: radial-gradient(circle, #3b3424, #121719 72%);
    box-shadow: inset 0 0 12px #000, 0 0 12px rgba(210,166,65,.15);
}

.roulette-header-content > span {
    color: #9c7b3e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
}

.roulette-header-content h2 {
    margin: 2px 0;
    color: #e8e4da;
    font-size: 20px;
    letter-spacing: 1.5px;
}

.roulette-header-content p {
    margin: 0;
    color: #778890;
    font-size: 10px;
}

.roulette-balance {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(420px, calc(100% - 40px));
    margin: 14px auto 0;
    padding: 9px 13px;
    border: 1px solid #665331;
    background: rgba(45,34,18,.5);
}

.roulette-balance span {
    color: #92733b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.roulette-balance strong {
    color: #e3c574;
    font-size: 14px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.roulette-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 28px;
    align-items: start;
    padding: 28px;
}

.roulette-stage {
    min-width: 0;
    text-align: center;
}

/* ============================================================
   RUEDA / MARCO
   ============================================================ */

.roulette-wheel-wrap {
    position: relative;
    width: min(560px, 100%);
    aspect-ratio: 1;
    margin: 0 auto 20px;
}

.roulette-wheel-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: 78%;
    height: 78%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #000;
    filter: blur(22px);
    opacity: .82;
}

.roulette-wheel-frame {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 69%, #0b1013 70% 72%, #737b7e 73% 74%, #171c1f 75% 78%, #080b0d 79%);
    box-shadow:
        0 20px 35px rgba(0,0,0,.72),
        inset 0 0 30px rgba(255,255,255,.05);
}

.roulette-wheel-frame::before,
.roulette-wheel-frame::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    pointer-events: none;
}

.roulette-wheel-frame::before {
    border: 2px solid rgba(202,166,87,.5);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.55);
}

.roulette-wheel-frame::after {
    inset: 2px;
    border: 1px solid rgba(255,255,255,.08);
}

.roulette-bolts {
    position: absolute;
    z-index: 100;
    width: 14px;
    height: 14px;
    border: 2px solid #788187;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d1d5d6, #4b5357 45%, #15191b 70%);
    box-shadow: 0 2px 4px #000;
}

.bolt-top { left: 50%; top: 7px; transform: translateX(-50%); }
.bolt-right { right: 7px; top: 50%; transform: translateY(-50%); }
.bolt-bottom { left: 50%; bottom: 7px; transform: translateX(-50%); }
.bolt-left { left: 7px; top: 50%; transform: translateY(-50%); }

.roulette-wheel {
    position: absolute;
    z-index: 10;
    inset: 34px;
    overflow: hidden;
    border-radius: 50%;
    border: 7px solid #303b40;
    background: #172127;
    transform: rotate(var(--rotation, 0deg));
    transform-origin: 50% 50%;
    transition: transform 5.2s cubic-bezier(.08,.72,.12,1);
    box-shadow:
        0 0 0 3px #101519,
        0 0 0 5px #697277,
        0 0 0 8px #161b1e,
        inset 0 0 0 3px rgba(255,255,255,.12),
        inset 0 0 30px rgba(0,0,0,.75);
    will-change: transform;
}

.roulette-wheel::before {
    content: "";
    position: absolute;
    z-index: 60;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid rgba(226,196,124,.6);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.55);
    pointer-events: none;
}

.roulette-wheel::after {
    content: "";
    position: absolute;
    z-index: 70;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), transparent 23%, transparent 70%, rgba(0,0,0,.34));
}

.roulette-wheel-gloss {
    position: absolute;
    z-index: 75;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.13), transparent 25%);
}

/* ============================================================
   CASILLAS INDIVIDUALES
   ============================================================ */

.roulette-segment {
    position: absolute;
    z-index: 30;
    left: 50%;
    top: 50%;
    width: 104px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    pointer-events: none;
}

.segment-slot {
    width: 104px;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px 4px;
    border: 1px solid rgba(225,194,115,.16);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(13,22,27,.36), rgba(3,8,11,.55));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 4px 8px rgba(0,0,0,.25);
    transition: .25s ease;
}

.segment-icon-wrap {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(210,175,91,.42);
    border-radius: 8px;
    background:
        radial-gradient(circle, rgba(69,107,119,.28), rgba(7,13,16,.82));
    box-shadow:
        inset 0 0 12px rgba(0,0,0,.8),
        0 3px 8px rgba(0,0,0,.55);
}

.roulette-segment img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,.85));
}

.roulette-segment span {
    width: 98px;
    margin-top: 5px;
    overflow: hidden;
    color: #efe5cc;
    font-size: 7px;
    font-weight: 800;
    line-height: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 3px #000;
}

/* Premio ganador */
.roulette-segment.winner .segment-slot {
    border-color: #f0c969;
    background:
        radial-gradient(circle, rgba(213,167,65,.22), rgba(7,12,15,.65));
    box-shadow:
        0 0 0 2px rgba(240,201,105,.22),
        0 0 22px rgba(237,190,78,.5),
        inset 0 0 18px rgba(240,190,70,.18);
    animation: blurWinnerSlot 1.1s ease-in-out infinite alternate;
}

.roulette-segment.winner .segment-icon-wrap {
    border-color: #f3cc72;
    box-shadow:
        0 0 18px rgba(239,194,82,.55),
        inset 0 0 12px rgba(0,0,0,.8);
}

@keyframes blurWinnerSlot {
    from { filter: brightness(1); }
    to   { filter: brightness(1.35); }
}

/* ============================================================
   CENTRO — se contra-rota para no girar visualmente
   ============================================================ */

.roulette-wheel-core {
    position: absolute;
    z-index: 90;
    left: 50%;
    top: 50%;
    width: 116px;
    height: 116px;
    transform:
        translate(-50%, -50%)
        rotate(calc(0deg - var(--rotation, 0deg)));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 7px solid #606a6e;
    border-radius: 50%;
    color: #e4c575;
    background:
        radial-gradient(circle at 35% 25%, #53636a, #151c20 68%);
    box-shadow:
        0 7px 16px rgba(0,0,0,.85),
        0 0 0 3px #11171a,
        0 0 0 5px rgba(192,153,70,.48),
        inset 0 0 22px rgba(0,0,0,.85);
    text-align: center;
}

.roulette-wheel-core span {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 0 2px 4px #000, 0 0 9px rgba(226,183,78,.3);
}

.roulette-wheel-core small {
    margin-top: 3px;
    color: #a7b6bd;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* ============================================================
   PUNTERO
   ============================================================ */

.roulette-pointer {
    position: absolute;
    z-index: 120;
    left: 50%;
    top: -4px;
    width: 60px;
    height: 76px;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.85));
    pointer-events: none;
}

/* ============================================================
   EFECTO DE PARADA
   ============================================================ */

.roulette-wheel.winner-flash::after {
    animation: blurWheelFlash .9s ease-out;
}

@keyframes blurWheelFlash {
    0%   { opacity: 1; filter: brightness(1.7); }
    100% { opacity: 1; filter: brightness(1); }
}

/* ============================================================
   BOTÓN
   ============================================================ */

.roulette-spin {
    position: relative;
    min-width: 250px;
    padding: 14px 28px;
    border: 1px solid #b4863e;
    border-radius: 4px;
    color: #f6e8c1;
    background: linear-gradient(180deg, #8a652d, #5b3d18 50%, #3d2812);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -2px 0 rgba(0,0,0,.4),
        0 7px 17px rgba(0,0,0,.62);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-shadow: 0 2px 3px #000;
    cursor: pointer;
    transition: .16s ease;
}

.roulette-spin:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 9px 22px rgba(0,0,0,.7),
        0 0 20px rgba(211,163,65,.22);
}

.roulette-spin:active:not(:disabled) {
    transform: translateY(1px);
}

.roulette-spin:disabled {
    opacity: .42;
    cursor: not-allowed;
    filter: grayscale(.3);
}

.spin-icon {
    margin-right: 7px;
    color: #f0c968;
}

.roulette-countdown {
    min-height: 18px;
    margin-top: 10px;
    color: #75868f;
    font-size: 10px;
}

/* ============================================================
   PANEL DE PREMIOS
   ============================================================ */

.roulette-prizes {
    position: relative;
    min-width: 0;
    padding: 17px;
    border: 1px solid #394b54;
    background:
        linear-gradient(180deg, rgba(22,32,38,.97), rgba(7,12,16,.99));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 28px rgba(0,0,0,.55),
        0 10px 25px rgba(0,0,0,.35);
}

.prizes-kicker {
    color: #94743c;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
}

.roulette-prizes h3 {
    margin: 5px 0 10px;
    color: #dfcf9d;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.prizes-line {
    height: 1px;
    margin-bottom: 5px;
    background: linear-gradient(90deg, #8f6e39, rgba(143,110,57,0));
}

.roulette-prize {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 57px;
    padding: 7px 5px;
    border-bottom: 1px solid rgba(96,113,122,.18);
    transition: .18s ease;
}

.roulette-prize:hover {
    background: rgba(173,133,55,.06);
}

.roulette-prize.winner {
    border-left: 2px solid #d9b35c;
    background: linear-gradient(90deg, rgba(207,165,72,.14), transparent);
    box-shadow: inset 0 0 16px rgba(205,161,68,.08);
}

.prize-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border: 1px solid #44545c;
    background: #0c1317;
}

.roulette-prize img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.8));
}

.prize-info {
    min-width: 0;
}

.roulette-prize b {
    display: block;
    overflow: hidden;
    color: #cdd9de;
    font-size: 9px;
    line-height: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roulette-prize small {
    display: block;
    margin-top: 3px;
    color: #70818a;
    font-size: 8px;
}

/* ============================================================
   AVISO
   ============================================================ */

.roulette-notice {
    position: relative;
    z-index: 5;
    min-height: 21px;
    padding: 9px 18px;
    border-top: 1px solid rgba(83,103,113,.25);
    color: #778991;
    background: rgba(4,8,11,.52);
    font-size: 10px;
    text-align: center;
}

.roulette-notice.good {
    color: #d8b864;
    text-shadow: 0 0 9px rgba(218,179,84,.25);
}

.roulette-notice.bad {
    color: #d17b7b;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
    .roulette-layout {
        grid-template-columns: 1fr;
    }

    .roulette-prizes {
        width: min(100%, 650px);
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    #blur-roulette-page {
        padding: 12px 8px 30px;
    }

    .roulette-selector-grid {
        grid-template-columns: 1fr;
    }

    .roulette-header {
        padding-right: 105px;
    }

    .roulette-header-content h2 {
        font-size: 15px;
    }

    .roulette-layout {
        padding: 18px 12px 22px;
    }

    .roulette-wheel {
        inset: 25px;
    }

    .roulette-wheel-core {
        width: 94px;
        height: 94px;
    }

    .roulette-wheel-core span {
        font-size: 15px;
    }

    .roulette-segment {
        width: 82px;
        height: 92px;
    }

    .segment-slot {
        width: 82px;
        min-height: 86px;
    }

    .segment-icon-wrap {
        width: 47px;
        height: 47px;
    }

    .roulette-segment img {
        width: 37px;
        height: 37px;
    }

    .roulette-segment span {
        width: 78px;
        font-size: 6px;
    }

    .roulette-pointer {
        width: 48px;
        height: 62px;
    }
}

@media (max-width: 440px) {
    .roulette-back {
        right: 10px;
        padding: 6px 7px;
        font-size: 8px;
    }

    .roulette-header-emblem {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .roulette-header-content > span {
        font-size: 7px;
    }

    .roulette-header-content h2 {
        font-size: 13px;
    }

    .roulette-header-content p {
        display: none;
    }

    .roulette-spin {
        min-width: 210px;
        padding: 12px 18px;
    }
}

/* Fortune Wheel: paneles dinámicos para diaria y premium. */
#blur-roulette-page .fortune-wheel { --fortune-gold:#e8bd62; --fortune-gold-soft:#9d7131; --fortune-line:rgba(219,172,82,.46); --fortune-panel:rgba(9,13,20,.9); max-width:1440px !important; margin:0 auto; border:1px solid rgba(204,152,57,.5); background:radial-gradient(ellipse at 50% 45%,rgba(96,59,118,.19),transparent 39%),radial-gradient(ellipse at 50% 105%,rgba(159,103,36,.14),transparent 42%),linear-gradient(140deg,#04080e,#111018 49%,#05080d); }
#blur-roulette-page .fortune-wheel.is-daily { --fortune-gold:#aee5ff; --fortune-gold-soft:#4e93b0; --fortune-line:rgba(102,188,222,.48); background:radial-gradient(ellipse at 50% 42%,rgba(38,116,151,.24),transparent 38%),radial-gradient(ellipse at 50% 100%,rgba(35,67,120,.3),transparent 43%),linear-gradient(140deg,#04090e,#0b1721 49%,#04070b); }
#blur-roulette-page .fortune-header { position:relative; display:grid; grid-template-columns:180px 1fr 180px; align-items:center; min-height:100px; padding:12px 30px; border:0; border-bottom:1px solid var(--fortune-line); background:linear-gradient(180deg,rgba(6,8,13,.94),rgba(14,12,17,.66)); box-shadow:inset 0 -18px 32px rgba(0,0,0,.26); }
#blur-roulette-page .fortune-header::before,#blur-roulette-page .fortune-header::after { content:'✦'; align-self:center; color:var(--fortune-gold); font-size:22px; text-shadow:0 0 15px currentColor; }
#blur-roulette-page .fortune-header::after { text-align:right; }
#blur-roulette-page .fortune-back { position:relative; z-index:1; justify-self:start; padding:7px 0; border:0; color:#bec8cf; background:transparent; font:700 10px/1 inherit; letter-spacing:.8px; cursor:pointer; }
#blur-roulette-page .fortune-back:hover { color:var(--fortune-gold); }
#blur-roulette-page .fortune-header-content { grid-column:2; grid-row:1; text-align:center; }
#blur-roulette-page .fortune-header-content>span,#blur-roulette-page .fortune-header-content>b { display:block; color:var(--fortune-gold); font-size:8px; font-weight:800; letter-spacing:3px; text-transform:uppercase; }
#blur-roulette-page .fortune-header h2 { margin:1px 0 2px; color:#f5dfac; font-family:Georgia,'Times New Roman',serif; font-size:clamp(26px,3.1vw,45px); font-weight:500; letter-spacing:3px; line-height:1; text-shadow:0 2px 0 #000,0 0 18px rgba(226,168,57,.22); }
#blur-roulette-page .fortune-header p { color:#aab1b7; font:500 11px/1.3 Georgia,serif; letter-spacing:.35px; }
#blur-roulette-page .fortune-header-content>b { margin-top:5px; font-size:7px; }
#blur-roulette-page .fortune-layout { position:relative; z-index:2; display:grid; grid-template-columns:minmax(205px,260px) minmax(500px,1fr) minmax(230px,285px); align-items:stretch; gap:clamp(14px,2vw,30px); padding:clamp(18px,2.5vw,34px); }
#blur-roulette-page .fortune-panel { position:relative; overflow:hidden; border:1px solid var(--fortune-line); background:linear-gradient(180deg,rgba(27,23,29,.78),var(--fortune-panel) 18%,rgba(3,7,11,.93)); box-shadow:inset 0 0 0 4px rgba(2,5,8,.5),inset 0 0 28px rgba(0,0,0,.6),0 12px 30px rgba(0,0,0,.34); }
#blur-roulette-page .fortune-panel::before { content:''; position:absolute; inset:5px; pointer-events:none; border:1px solid rgba(233,192,109,.15); }
#blur-roulette-page .fortune-panel>header { position:relative; z-index:1; padding:15px 13px 12px; border-bottom:1px solid rgba(230,183,82,.31); text-align:center; }
#blur-roulette-page .fortune-panel>header span,#blur-roulette-page .fortune-tokens-panel>span { display:block; color:var(--fortune-gold); font:700 9px/1 Georgia,serif; letter-spacing:1.5px; text-transform:uppercase; }
#blur-roulette-page .fortune-panel>header b { display:block; margin-top:4px; color:#ede3cd; font:600 12px/1.1 Georgia,serif; letter-spacing:.7px; text-transform:uppercase; }
#blur-roulette-page .fortune-rewards-panel { min-height:605px; }
#blur-roulette-page .fortune-rewards-scroll,#blur-roulette-page .fortune-winners-scroll { position:relative; z-index:1; overflow:auto; scrollbar-color:var(--fortune-gold-soft) rgba(0,0,0,.22); scrollbar-width:thin; }
#blur-roulette-page .fortune-rewards-scroll { max-height:554px; padding:4px 10px 10px; }
#blur-roulette-page .fortune-rewards-scroll .roulette-prize { min-height:49px; gap:8px; padding:7px 2px; border-bottom-color:rgba(229,189,99,.13); }
#blur-roulette-page .fortune-rewards-scroll .roulette-prize img { width:37px; height:37px; }
#blur-roulette-page .fortune-rewards-scroll .roulette-prize b { color:#e6e7ea; font-size:9px; }
#blur-roulette-page .fortune-rewards-scroll .roulette-prize small { color:#b7a372; font-size:8px; }
#blur-roulette-page .fortune-stage { display:flex; flex-direction:column; align-items:center; min-width:0; padding-top:0; text-align:center; }
#blur-roulette-page .fortune-stage .roulette-wheel-wrap { margin:0 auto 8px; }
#blur-roulette-page .fortune-stage .roulette-wheel-wrap::before { width:88%; height:88%; background:radial-gradient(circle,rgba(226,168,66,.16),#000 67%); opacity:.9; }
#blur-roulette-page .fortune-stage .roulette-wheel { border-color:#423a32; box-shadow:0 0 0 2px #0b0d10,0 0 0 5px #95713a,0 0 0 8px #161216,0 17px 35px rgba(0,0,0,.8),inset 0 0 0 3px rgba(255,255,255,.13),inset 0 0 0 7px rgba(0,0,0,.7),inset 0 0 35px rgba(0,0,0,.65); }
#blur-roulette-page .fortune-spin-cost { min-width:260px; margin-top:-2px; padding:8px 22px; border:1px solid var(--fortune-line); background:rgba(3,7,10,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.09); }
#blur-roulette-page .fortune-spin-cost span,#blur-roulette-page .fortune-spin-cost strong { display:inline-block; }
#blur-roulette-page .fortune-spin-cost span { margin-right:11px; color:#cfc6b6; font-size:9px; font-weight:800; letter-spacing:1.5px; }
#blur-roulette-page .fortune-spin-cost strong { color:var(--fortune-gold); font-size:11px; letter-spacing:.8px; }
#blur-roulette-page .fortune-stage .roulette-spin { min-width:min(310px,90%); margin-top:9px; padding:15px 32px; border-color:var(--fortune-gold-soft); border-radius:2px; background:linear-gradient(180deg,#7b472a,#482041 55%,#291020); color:#fff0c4; font-family:Georgia,serif; font-size:20px; letter-spacing:2px; }
#blur-roulette-page .is-daily .fortune-stage .roulette-spin { background:linear-gradient(180deg,#205e77,#14394d 55%,#0b202f); }
#blur-roulette-page .fortune-stage .roulette-countdown { color:#c0c5c8; font-size:10px; }
#blur-roulette-page .fortune-sidebar { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:15px; }
#blur-roulette-page .fortune-winners-panel { min-height:435px; }
#blur-roulette-page .fortune-winners-scroll { max-height:390px; padding:7px 10px 10px; }
#blur-roulette-page .fortune-winner { display:flex; align-items:center; gap:9px; min-height:53px; padding:7px 1px; border-bottom:1px solid rgba(228,186,91,.14); }
#blur-roulette-page .fortune-winner-icon { display:grid; width:37px; height:37px; flex:0 0 37px; place-items:center; border:1px solid rgba(226,185,97,.43); background:rgba(0,0,0,.38); }
#blur-roulette-page .fortune-winner-icon img { width:31px; height:31px; object-fit:contain; }
#blur-roulette-page .fortune-winner b,#blur-roulette-page .fortune-winner strong,#blur-roulette-page .fortune-winner small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#blur-roulette-page .fortune-winner b { color:var(--fortune-gold); font-size:8px; letter-spacing:.4px; }
#blur-roulette-page .fortune-winner strong { margin-top:2px; color:#e4e6e8; font-size:10px; }
#blur-roulette-page .fortune-winner small { margin-top:2px; color:#8ea0aa; font-size:8px; }
#blur-roulette-page .fortune-tokens-panel { padding:17px 15px; text-align:center; }
#blur-roulette-page .fortune-tokens-panel strong { display:block; margin:9px 0 3px; color:#f5d98f; font:700 22px/1 Georgia,serif; letter-spacing:1px; text-shadow:0 2px 3px #000; }
#blur-roulette-page .fortune-tokens-panel small { color:#83919a; font-size:8px; letter-spacing:1px; }
#blur-roulette-page .fortune-empty { position:relative; z-index:1; margin:22px 12px; color:#8d999f; font-size:10px; text-align:center; }
#blur-roulette-page .fortune-wheel .roulette-notice { border-top-color:var(--fortune-line); background:rgba(0,0,0,.28); }
@media (max-width:1080px) { #blur-roulette-page .fortune-layout { grid-template-columns:minmax(190px,230px) minmax(420px,1fr); } #blur-roulette-page .fortune-sidebar { grid-column:1 / -1; grid-template-columns:1fr minmax(220px,300px); grid-template-rows:auto; } #blur-roulette-page .fortune-winners-panel { min-height:0; } #blur-roulette-page .fortune-winners-scroll { max-height:205px; } }
@media (max-width:760px) { #blur-roulette-page .fortune-header { grid-template-columns:1fr; min-height:0; padding:17px; } #blur-roulette-page .fortune-header::before,#blur-roulette-page .fortune-header::after { display:none; } #blur-roulette-page .fortune-back { position:absolute; top:9px; left:13px; } #blur-roulette-page .fortune-header-content { grid-column:1; } #blur-roulette-page .fortune-header h2 { font-size:29px; } #blur-roulette-page .fortune-layout { grid-template-columns:1fr; padding:14px 10px 20px; } #blur-roulette-page .fortune-rewards-panel { order:2; min-height:0; } #blur-roulette-page .fortune-stage { order:1; } #blur-roulette-page .fortune-sidebar { order:3; grid-column:auto; grid-template-columns:1fr; } #blur-roulette-page .fortune-rewards-scroll { max-height:300px; } }

/* Corrige el espacio heredado de la estructura anterior de la ruleta. */
#blur-roulette-page .fortune-header { height:76px !important; min-height:76px !important; padding:7px 22px !important; }
#blur-roulette-page .fortune-layout { margin-top:0 !important; padding-top:18px !important; align-items:start !important; }
#blur-roulette-page .fortune-layout>.fortune-panel,#blur-roulette-page .fortune-layout>.fortune-stage,#blur-roulette-page .fortune-layout>.fortune-sidebar { margin-top:0 !important; align-self:start !important; }
#blur-roulette-page .fortune-wheel .roulette-wheel-wrap { width:min(540px,100%) !important; height:min(540px,100%) !important; }

/* Activos PNG independientes para el marco de rueda y el botón de giro. */
#blur-roulette-page .fortune-wheel .roulette-wheel-wrap::after { content:''; position:absolute; z-index:2; inset:0; pointer-events:none; background:center / contain no-repeat url('/img/roulette/fortune/wheel-premium-frame.png'); }
#blur-roulette-page .fortune-wheel.is-daily .roulette-wheel-wrap::after { background-image:url('/img/roulette/fortune/wheel-daily-frame.png'); }
#blur-roulette-page .fortune-wheel .roulette-wheel { inset:44px !important; border-color:#1a1519 !important; }
#blur-roulette-page .fortune-stage .roulette-spin { min-height:82px; border:0 !important; background:center / 100% 100% no-repeat url('/img/roulette/fortune/spin-premium.png') !important; box-shadow:none !important; }
#blur-roulette-page .fortune-wheel.is-daily .roulette-spin { background-image:url('/img/roulette/fortune/spin-daily.png') !important; }