/* Upgrader page: wheel stage on top, two symmetric inventories below */
body.upgrader-page-body .main {
    padding-left: 6px;
    padding-right: 6px;
    max-width: none;
}

.upg-page {
    --upg-card: #161b29;
    --upg-card-2: #1d2333;
    --upg-border: rgba(181, 201, 255, 0.08);
    --upg-muted: rgba(181, 201, 255, 0.45);
    --upg-accent: #2ec963;            /* same green as the login button */
    --upg-accent-hover: #28b558;
    --upg-win: #2ecc71;
    --upg-lose: #e85c34;
    width: 100%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    color: #e2e8f5;
}

.upg-page *,
.upg-page *::before,
.upg-page *::after {
    box-sizing: border-box;
}

.upg-page .hidden {
    display: none !important;
}

/* ---------- Stage ---------- */
.upg-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 1.5rem 1.75rem;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(46, 201, 99, 0.08) 0%, rgba(46, 201, 99, 0) 45%),
        var(--upg-card);
    border: 1px solid var(--upg-border);
    overflow: hidden;
    flex-shrink: 0;
}

.upg-preview {
    min-width: 0;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.upg-preview-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 360px;
}

.upg-preview-items:empty {
    display: none;
}

.upg-preview-item {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--upg-card-2);
    border: 1px solid var(--upg-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.upg-preview-item:hover {
    border-color: var(--upg-lose);
}

.upg-preview-item img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* A single selected item is shown big */
.upg-preview-items.upg-single .upg-preview-item {
    width: 170px;
    height: 170px;
    background: none;
    border: none;
}

/* Soft shadow under the big item. A gradient ellipse instead of filter: drop-shadow — the filter was
   recomputed on every frame of the hover overlay animation and froze Safari on iPhone. */
.upg-preview-items.upg-single .upg-preview-item::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 2%;
    height: 14%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.upg-preview-items.upg-single .upg-preview-item img {
    position: relative;
}

.upg-preview-empty {
    color: var(--upg-muted);
    font-size: 0.95rem;
    text-align: center;
    max-width: 200px;
}

.upg-preview-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #36d486;
    font-variant-numeric: tabular-nums;
}

.upg-preview-value .upg-coin {
    width: 14px;
    height: 14px;
}

/* ---------- Wheel ---------- */
.upg-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}

.upg-wheel {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    touch-action: pan-y pinch-zoom;   /* a finger on the wheel still scrolls the page */
    user-select: none;
}

/* Needle: full-size layer rotated around the centre, the pointer sits at its top edge */
.upg-needle {
    position: absolute;
    inset: 0;
    z-index: 3;
    transform: rotate(0deg);
    pointer-events: none;
}

.upg-wheel-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.upg-wheel-outer {
    fill: rgba(9, 12, 20, 0.6);
    stroke: rgba(181, 201, 255, 0.1);
    stroke-width: 1;
}

.upg-wheel-range {
    fill: none;
    stroke: var(--upg-accent);
    stroke-width: 4;
    stroke-linecap: butt;
    stroke-dasharray: 0 1000;
    filter: drop-shadow(0 0 5px rgba(46, 201, 99, 0.7));
    transition: stroke 0.3s;
}

.upg-tick {
    stroke: rgba(181, 201, 255, 0.16);
    stroke-width: 1.6;
    stroke-linecap: round;
    transition: stroke 0.2s;
}

.upg-tick.on {
    stroke: var(--upg-accent);
}

.upg-wheel.upg-win .upg-wheel-range,
.upg-wheel.upg-win .upg-tick.on { stroke: var(--upg-win); }
.upg-wheel.upg-lose .upg-wheel-range,
.upg-wheel.upg-lose .upg-tick.on { stroke: var(--upg-lose); }
.upg-wheel.upg-lose .upg-wheel-range { filter: none; }

.upg-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 22px solid #fff;
    filter: drop-shadow(0 0 8px rgba(46, 201, 99, 0.9));
    pointer-events: none;
}

.upg-wheel-center {
    position: absolute;
    inset: 27%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #1d2a3f 0%, #121826 75%);
    box-shadow: 0 0 0 1px rgba(181, 201, 255, 0.08), 0 0 40px rgba(0, 0, 0, 0.5) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}

.upg-chance-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--upg-muted);
}

.upg-chance {
    font-size: 1.9rem;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}

.upg-chance.upg-chance-invalid { color: var(--upg-lose); }
.upg-wheel.upg-win .upg-chance { color: var(--upg-win); }
.upg-wheel.upg-lose .upg-chance { color: var(--upg-lose); }

.upg-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 300px;
    height: 6px;
    border-radius: 3px;
    background: var(--upg-card-2);
    outline: none;
    margin: 0;
    cursor: pointer;
}

.upg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--upg-accent);
    border: 3px solid #0c0f17;
    box-shadow: 0 0 8px rgba(46, 201, 99, 0.6);
    cursor: grab;
}

.upg-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--upg-accent);
    border: 3px solid #0c0f17;
    box-shadow: 0 0 8px rgba(46, 201, 99, 0.6);
    cursor: grab;
}

.upg-slider:disabled {
    opacity: 0.35;
    cursor: default;
}

.upg-btn {
    width: 100%;
    max-width: 300px;
    padding: 1rem;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 10px;
    background: var(--upg-accent);
    color: #07210f;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.upg-btn:hover:not(:disabled) {
    background: var(--upg-accent-hover);
    box-shadow: 0 6px 22px rgba(46, 201, 99, 0.3);
    transform: translateY(-1px);
}

.upg-btn:disabled {
    background: #217d46;
    color: rgba(0, 0, 0, 0.75);
    cursor: not-allowed;
}

/* ---------- Inventories ---------- */
.upg-inventories {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.upg-tabs {
    display: none;
}

.upg-panel {
    background: var(--upg-card);
    border: 1px solid var(--upg-border);
    border-radius: 16px;
    padding: 1.1rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.upg-panel-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
}

.upg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    justify-items: center;
    align-content: start;
    gap: 10px;
    height: 460px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2a3247 transparent;
}

.upg-page.upg-rolling .upg-panel,
.upg-page.upg-rolling .upg-preview {
    pointer-events: none;
}

.upg-page.upg-rolling .upg-panel {
    filter: brightness(0.8);
}

/* Item card: same look as the site's .item-card (rarity classes _godly, _ancient, ... come from foot.php) */
.upg-card {
    position: relative;
    width: 100px;
    height: 124px;
    padding: 2px;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    background: linear-gradient(180deg, #3a3a44 30%, #252b3d 60%);
}

.upg-card::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 12px;
    background: #1d2333;
}

.upg-card.selected {
    background: #32c16b;
}

.upg-card.upg-card-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.upg-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 0 10px 9px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.upg-card-content img {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 64px;
    height: 64px;
    margin-left: -32px;
    object-fit: contain;
    pointer-events: none;
}

.upg-card-name {
    margin: 0 0 7px;
    color: #e2e8f5;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upg-card-price {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
    color: #36d486;
    font-size: 14px;
    font-weight: 800;
}

.upg-coin {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg%20width='10'%20height='10'%20viewBox='0%200%2010%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%205C10%207.76142%207.76142%2010%205%2010C2.23858%2010%200%207.76142%200%205C0%202.23858%202.23858%200%205%200C7.76142%200%2010%202.23858%2010%205ZM0.840491%205C0.840491%207.29723%202.70277%209.15951%205%209.15951C7.29723%209.15951%209.15951%207.29723%209.15951%205C9.15951%202.70277%207.29723%200.840491%205%200.840491C2.70277%200.840491%200.840491%202.70277%200.840491%205Z'%20fill='%2332C16B'/%3E%3Cpath%20d='M5.19875%203.04604C5.26357%202.97517%205.3786%202.98803%205.42623%203.07147L6.51148%204.97237C6.54204%205.0259%206.53455%205.09307%206.49296%205.13854L4.83145%206.95396C4.76658%207.02483%204.65155%207.01198%204.60391%206.92853L3.51867%205.02764C3.48811%204.9741%203.4956%204.90693%203.53722%204.86146L5.19875%203.04604Z'%20fill='%2332C16B'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* ---------- Fast animation toggle ---------- */
.upg-fast {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--upg-border);
    background: var(--upg-card-2);
    color: var(--upg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.upg-fast:hover {
    color: #fff;
}

.upg-fast.active {
    color: var(--upg-accent);
}

.upg-fast::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 8px;
    background: #23293a;
    color: #e2e8f5;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.upg-fast:hover::after {
    opacity: 1;
}

/* ---------- Range under the chance ---------- */
.upg-range-text {
    min-height: 1em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--upg-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Site inventory tools: sort, price from/to, name search ---------- */
.upg-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.upg-panel-head .upg-panel-title {
    flex-shrink: 0;
}

.upg-tools {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.upg-tool-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--upg-card-2);
    color: var(--upg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.upg-tool-btn:hover {
    color: #fff;
}

#upg-sort path {
    fill: rgba(181, 201, 255, 0.25);
    transition: fill 0.2s;
}

#upg-sort.upg-sort-desc .upg-sort-down,
#upg-sort.upg-sort-asc .upg-sort-up {
    fill: #fff;
}

.upg-tool-filters {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
}

.upg-tool-label,
.upg-tool-range,
.upg-tool-search {
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(181, 201, 255, 0.12);
    background: transparent;
}

.upg-tool-label {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c8cedb;
}

.upg-tool-range {
    flex: 1.4 1 0;
    min-width: 0;
    display: flex;
}

.upg-tool-range input,
.upg-tool-search {
    min-width: 0;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
}

.upg-tool-range input {
    flex: 1;
    width: 50%;
    padding: 0 10px;
    border: none;
    background: none;
}

.upg-tool-range input + input {
    border-left: 1px solid rgba(181, 201, 255, 0.12);
}

.upg-tool-range input::placeholder,
.upg-tool-search::placeholder {
    color: var(--upg-muted);
}

.upg-tool-search {
    display: none;
    flex: 1;
    padding: 0 48px 0 14px;
    background: var(--upg-card-2);
    border-color: transparent;
}

/* Search open: the field replaces price filters and the magnifier sits inside it */
.upg-tools.searching .upg-tool-filters {
    display: none;
}

.upg-tools.searching .upg-tool-search {
    display: block;
}

.upg-tools.searching .upg-search-btn {
    margin-left: -48px;
    background: transparent;
    color: #fff;
}

/* ---------- Live wins ---------- */
.upg-live {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.upg-live-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
}

.upg-live-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--upg-win);
}

/* The pulse ring animates only transform + opacity, so it runs on the GPU and never repaints the page.
   (Animating box-shadow repainted the page every frame and made scrolling lag on phones.) */
.upg-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.6);
    animation: upg-live-pulse 1.6s infinite ease-out;
    will-change: transform, opacity;
}

@keyframes upg-live-pulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(2.75); opacity: 0; }
    100% { transform: scale(2.75); opacity: 0; }
}

.upg-live-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #2a3247 transparent;
    min-height: 136px;
}

.upg-live-card {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--upg-card);
    border: 1px solid var(--upg-border);
    min-width: 0;
}

.upg-live-card.upg-live-new {
    animation: upg-live-in 0.45s ease-out;
}

@keyframes upg-live-in {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}

.upg-live-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upg-live-val {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #36d486;
    font-variant-numeric: tabular-nums;
}

.upg-live-val .upg-coin,
.upg-live-profit .upg-coin {
    width: 12px;
    height: 12px;
}

.upg-live-profit {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(46, 204, 113, 0.18);
    color: #36d486;
    font-size: 1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.upg-live-items {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.upg-live-side {
    display: flex;
    align-items: center;
}

.upg-live-slot {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #0f131d;
    border: 1px solid rgba(181, 201, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--upg-muted);
}

.upg-live-side .upg-live-slot:first-child {
    margin-left: 0;
}

.upg-live-slot img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.upg-live-slot.upg-live-item {
    background: none;
    border: none;
    position: relative;
    z-index: 1;
}

.upg-live-arrow {
    flex-shrink: 0;
    color: var(--upg-muted);
}

.upg-live-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.upg-live-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--upg-card-2);
}

.upg-live-name {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upg-live-mult {
    font-size: 1.05rem;
    font-weight: 900;
    color: #36d486;
    font-variant-numeric: tabular-nums;
}

.upg-live-empty {
    align-self: center;
    color: var(--upg-muted);
    font-size: 0.85rem;
    padding: 0 0.5rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .upg-stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 1rem;
        gap: 1rem;
    }
    .upg-center {
        grid-column: 1 / -1;
        order: -1;
    }
    .upg-preview {
        min-height: 130px;
    }
    .upg-preview-items.upg-single .upg-preview-item {
        width: 100px;
        height: 100px;
    }
    .upg-preview-item {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 640px) {
    .upg-live-card {
        flex-basis: 270px;
    }
    .upg-live-slot {
        width: 32px;
        height: 32px;
        margin-left: -9px;
    }
    .upg-live-slot img {
        width: 36px;
        height: 36px;
    }
    /* One inventory block under the wheel; folder-style tabs switch between player and site */
    .upg-inventories {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
        background: #10141f;
        border: 1px solid var(--upg-border);
        border-radius: 16px;
        overflow: hidden;
    }
    .upg-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .upg-tab {
        padding: 14px 8px;
        background: transparent;
        border: none;
        border-radius: 16px 16px 0 0;
        color: var(--upg-muted);
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: color 0.2s, background 0.2s;
    }
    .upg-tab.active {
        background: var(--upg-card-2);
        color: #fff;
    }
    .upg-panel {
        padding: 1rem;
        background: var(--upg-card-2);
        border: none;
        border-radius: 0;
    }
    .upg-panel-title {
        display: none;
    }
    .upg-tool-btn,
    .upg-tool-label,
    .upg-tool-range,
    .upg-tool-search {
        height: 38px;
    }
    .upg-tool-btn {
        width: 38px;
        background: #161b29;
    }
    .upg-tool-search {
        background: #161b29;
    }
    .upg-fast::after {
        right: auto;
        left: auto;
        top: calc(100% + 8px);
        right: 0;
        transform: none;
    }
    .upg-inventories[data-tab="user"] .upg-panel-site,
    .upg-inventories[data-tab="site"] .upg-panel-user {
        display: none;
    }
    .upg-grid {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
        height: 400px;
    }
    .upg-wheel {
        max-width: 260px;
    }
}

/* The site's global "button" style adds 15px side padding and fixes svg height; reset it for icon buttons */
.upg-fast,
.upg-tool-btn {
    padding: 0;
    gap: 0;
}

.upg-fast svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.upg-tool-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#upg-sort svg {
    width: 14px;
}

.upg-btn,
.upg-tab {
    justify-content: center;
}

/* ---------- WON / LOST in the wheel centre ---------- */
.upg-wheel-center {
    overflow: hidden;
}

.upg-result {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease-out, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.upg-wheel.upg-show-result .upg-result {
    opacity: 1;
    transform: scale(1);
}

.upg-wheel.upg-show-result .upg-chance-label,
.upg-wheel.upg-show-result .upg-chance,
.upg-wheel.upg-show-result .upg-range-text {
    opacity: 0;
}

.upg-wheel.upg-win .upg-result {
    background: radial-gradient(circle, rgba(46, 201, 99, 0.28) 0%, rgba(46, 201, 99, 0) 70%);
}

.upg-wheel.upg-lose .upg-result {
    background: radial-gradient(circle, rgba(232, 92, 52, 0.24) 0%, rgba(232, 92, 52, 0) 70%);
}

.upg-result-title {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
}

.upg-wheel.upg-win .upg-result-title {
    color: var(--upg-accent);
    text-shadow: 0 0 18px rgba(46, 201, 99, 0.7);
}

.upg-wheel.upg-lose .upg-result-title {
    color: var(--upg-lose);
    text-shadow: 0 0 18px rgba(232, 92, 52, 0.6);
}

.upg-result-roll {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--upg-muted);
    font-variant-numeric: tabular-nums;
}

.upg-wheel.upg-win .upg-result-roll {
    color: #8fe3ad;
}

@media (max-width: 640px) {
    .upg-result-title {
        font-size: 2rem;
    }
}

/* Coinflip-modal style hover (.item-card__selection comes from foot.php) */
.upg-card .item-card__selection {
    top: 2px;
    left: 2px;
}

.upg-card.upg-card-disabled .item-card__selection {
    display: none;
}

.upg-preview-item {
    position: relative;
}

.upg-preview-item:hover {
    border-color: var(--upg-border);
}

.upg-preview-item .item-card__selection {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 12px;
}

.upg-preview-items.upg-single .upg-preview-item .item-card__selection {
    border-radius: 20px;
}

/* ---------- Touch screens ----------
   There is no real hover on phones: iOS turns a touch into :hover, so the coinflip-style overlay ("+" / trash)
   popped up under the finger while scrolling and, together with filters, froze Safari for seconds.
   On touch devices items are selected / removed by tapping; the selected one keeps its green frame. */
@media (hover: none), (pointer: coarse) {
    .upg-page .item-card__selection {
        display: none !important;
    }
    .upg-page .upg-card,
    .upg-page .upg-preview-item,
    .upg-page .upg-live-card {
        -webkit-tap-highlight-color: transparent;
    }
    .upg-preview-item:hover {
        border-color: var(--upg-border);
    }
    /* up to 160 small filtered images in the live feed: drop the filter on phones */
    .upg-live-slot img {
        filter: none;
    }
}