.dsr-root {
    direction: rtl;
    min-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: radial-gradient(1200px 500px at 80% -10%, #183a2a 0%, transparent 35%),
                radial-gradient(1000px 500px at 10% -20%, #1a1a2e 0%, transparent 40%),
                #07090d;
    color: #eaf3f0;
    padding: 20px;
    font-family: Inter, Arial, sans-serif;
}

body.dsr-fullscreen-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #07090d !important;
}

#dsr-fullscreen-root {
    margin: 0;
    padding: 0;
}

.dsr-root * {
    box-sizing: border-box;
}

.dsr-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(15, 20, 28, 0.75);
    backdrop-filter: blur(6px);
}

.dsr-back {
    border: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(38, 52, 64, 0.8);
    color: #9de5c1;
    font-size: 20px;
    transform: rotate(180deg);
}

.dsr-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: 0.3px;
}

.dsr-info {
    margin-inline-start: auto;
    font-size: 0.9rem;
    color: #9cb1bf;
}

.dsr-main {
    margin-top: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(22, 28, 36, 0.9), rgba(8, 10, 14, 0.95));
    padding: 14px;
}

.dsr-strip-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(9, 11, 15, 1), rgba(16, 22, 28, 1));
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px;
    height: 192px;
}

.dsr-strip {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.dsr-strip-inner {
    display: flex;
    gap: 14px;
    will-change: transform;
    direction: ltr;
    opacity: 1;
}

.dsr-center-marker {
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 10px;
    transform: translateX(-50%);
    pointer-events: none;
}

.dsr-center-marker::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(95, 246, 155, 0), rgba(95, 246, 155, 0.9), rgba(95, 246, 155, 0));
    box-shadow: 0 0 30px rgba(75, 223, 136, 0.9);
}

.dsr-card {
    width: 132px;
    min-width: 132px;
    height: 150px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, #151b23, #0e1319);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    text-align: center;
}

.dsr-card-image {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.04);
}

.dsr-card-image img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

.dsr-card-icon {
    font-size: 2rem;
}

.dsr-card-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ecf5ff;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsr-rarity-common { border-color: rgba(180, 190, 200, 0.5); }
.dsr-rarity-rare { border-color: rgba(79, 170, 255, 0.9); box-shadow: 0 0 14px rgba(79, 170, 255, 0.24); }
.dsr-rarity-epic { border-color: rgba(183, 109, 255, 0.95); box-shadow: 0 0 14px rgba(183, 109, 255, 0.22); }
.dsr-rarity-legendary { border-color: rgba(255, 203, 84, 0.95); box-shadow: 0 0 16px rgba(255, 203, 84, 0.3); }

.dsr-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.dsr-spin-btn {
    border: 0;
    padding: 12px 22px;
    border-radius: 11px;
    background: linear-gradient(90deg, #2dff8f, #07d36f);
    color: #04170d;
    font-weight: 900;
    font-size: 1rem;
    min-width: 160px;
}

.dsr-spin-btn.spinning {
    filter: brightness(1.1);
}

.dsr-cooldown {
    color: #a8bbc8;
    font-weight: 700;
}

.dsr-history {
    margin-top: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(10, 14, 20, 0.85);
    padding: 12px;
}

.dsr-history h3 {
    margin: 0 0 10px;
}

.dsr-history-list {
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow: auto;
}

.dsr-history-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 7px;
}

.dsr-history-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(180deg, #202b34, #11161d);
}

.dsr-history-name {
    font-weight: 700;
}

.dsr-history-meta {
    color: #9db2c1;
    font-size: 0.78rem;
}

.dsr-guest {
    text-align: center;
    padding: 26px 12px;
}

.dsr-result,
.dsr-back-daily {
    display: none;
}

.dsr-result-overlay,
.dsr-golden-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(4, 7, 10, 0.72);
    backdrop-filter: blur(4px);
}

.dsr-result-box,
.dsr-golden-box {
    width: min(92vw, 430px);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    color: #fff;
}

.dsr-result-box {
    background: linear-gradient(180deg, #111a22, #0b1118);
    border: 1px solid rgba(108, 255, 170, 0.35);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

.dsr-result-golden {
    border-color: rgba(255, 208, 90, 0.5);
}

.dsr-result-icon {
    font-size: 52px;
    margin-bottom: 8px;
}

.dsr-result-icon img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
}

.dsr-result-title {
    margin: 4px 0 8px;
}

.dsr-result-desc {
    margin: 0 0 12px;
    color: #b8c8d4;
}

.dsr-result-close,
.dsr-golden-spin-btn,
.dsr-golden-cancel {
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 800;
}

.dsr-result-close {
    background: linear-gradient(90deg, #2dff8f, #07d36f);
    color: #042412;
}

.dsr-golden-box {
    background: linear-gradient(180deg, #2e2206, #1b1405);
    border: 1px solid rgba(255, 213, 107, 0.4);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.7);
}

.dsr-golden-box h2 {
    color: #ffd475;
}

.dsr-golden-cta {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dsr-golden-spin-btn {
    background: linear-gradient(90deg, #ffdf7f, #ffbc36);
    color: #2c1d03;
}

.dsr-golden-cancel {
    background: #2f3440;
    color: #d6e2ef;
}

.dsr-golden-active .dsr-center-marker::before {
    background: linear-gradient(180deg, rgba(255, 218, 120, 0), rgba(255, 218, 120, 0.95), rgba(255, 218, 120, 0));
    box-shadow: 0 0 30px rgba(255, 201, 77, 0.85);
}

.dsr-golden-active .dsr-spin-btn {
    background: linear-gradient(90deg, #ffdf7f, #ffbc36);
    color: #2b1e07;
}

@media (max-width: 740px) {
    .dsr-root {
        padding: 10px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .dsr-info { display: none; }
    .dsr-strip-wrap { height: 156px; }
    .dsr-card { width: 98px; min-width: 98px; height: 122px; }
    .dsr-card-image { width: 56px; height: 56px; }
    .dsr-card-icon { font-size: 1.5rem; }
    .dsr-card-label { font-size: 0.75rem; }
}