/* ═══════════════════════════════════════════════════
   LIMITED OFFER — button + popup (Nunito, market-style)
   ═══════════════════════════════════════════════════ */

/* ── Compact game-style button — even higher (next to hud-side-row), -12% ── */
#btn-limited-offer {
    position: fixed;
    right: 8px;
    /* -25px from previous: now ~115-165px below the very top */
    top: clamp(115px, calc(8vh + 85px), 165px);
    z-index: 25;
    /* -12% from previous: width 64→56, height 56→49 */
    width: clamp(44px, 12.3vmin, 56px);
    height: clamp(39px, 10.6vmin, 49px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#btn-limited-offer:active { transform: scale(0.94); }

/* Rotating starburst rays */
.lo-burst {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255,200,60,0.55) 8deg, transparent 16deg,
        transparent 45deg, rgba(255,200,60,0.45) 53deg, transparent 61deg,
        transparent 90deg, rgba(255,200,60,0.55) 98deg, transparent 106deg,
        transparent 135deg, rgba(255,200,60,0.40) 143deg, transparent 151deg,
        transparent 180deg, rgba(255,200,60,0.55) 188deg, transparent 196deg,
        transparent 225deg, rgba(255,200,60,0.45) 233deg, transparent 241deg,
        transparent 270deg, rgba(255,200,60,0.55) 278deg, transparent 286deg,
        transparent 315deg, rgba(255,200,60,0.40) 323deg, transparent 331deg,
        transparent 360deg
    );
    animation: lo-burst-spin 4s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes lo-burst-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pulsing glow ring — static glow (no animation). The opacity pulse forced
   a compositor repaint on every frame which on slow Android WebView caused
   the wave-bar / quest-bar / daily-kill-cap to visibly flicker. The visual
   loss is tiny — the rotating starburst above already conveys "attention". */
.lo-glow-ring {
    position: absolute;
    inset: -3px;
    border-radius: 10px;
    box-shadow: 0 0 8px 2px rgba(255,180,30,0.45), 0 0 18px 5px rgba(200,80,0,0.22);
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
}

/* Button body */
.lo-btn-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(170deg, #3a1008 0%, #1c0804 55%, #2b0e04 100%);
    border: 1.5px solid #c8700a;
    box-shadow: 0 1px 0 #8b4500, inset 0 1px 0 rgba(255,200,80,0.15), inset 0 -1px 0 rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
}

.lo-btn-text {
    font-family: 'Nunito', sans-serif;
    /* ~30-40% bigger than before per request "сделай крупнее" */
    font-size: clamp(8px, 2.4vmin, 10.5px);
    font-weight: 900;
    letter-spacing: 0.25px;
    line-height: 1.0;
    text-align: center;
    color: #ffe566;
    text-shadow: 0 0 6px rgba(255,200,0,0.9), 0 1px 2px #000, -0.5px -0.5px 0 #6b3000, 0.5px 0.5px 0 #6b3000;
    text-transform: uppercase;
}

/* Timer pill at bottom */
.lo-btn-timer-pill {
    position: absolute;
    bottom: clamp(-8px, -2vmin, -6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: #0d0d0d;
    border: 1px solid #c8700a;
    border-radius: 12px;
    padding: 1px 5px;
    white-space: nowrap;
    line-height: 1;
}
.lo-btn-timer-pill span {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(7px, 1.8vmin, 8.5px);
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 0.2px;
    text-shadow: 0 0 3px rgba(251,191,36,0.7);
}

/* ═══════════════════════════════════════════════════
   POPUP (full-width, market-style)
   ═══════════════════════════════════════════════════ */

#lo-popup {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0,0,0,0.74);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    backdrop-filter: blur(2px);
}

#lo-popup-card {
    position: relative;
    font-family: 'Nunito', sans-serif;
    background: #14141a;
    border: 1px solid #2a2a35;
    border-radius: 12px;
    width: 60vw;
    min-width: 280px;
    max-width: 440px;
    /* Originally 90vh → 63vh → now another -10% → 57vh */
    max-height: 57vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    overflow: hidden;
}
@media (max-width: 600px) { #lo-popup-card { width: min(94vw, 440px); } }

#lo-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #2a2a35;
    background: #18181f;
    flex-shrink: 0;
}
#lo-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
#lo-popup-close {
    cursor: pointer;
    color: #888;
    font-size: 18px;
    padding: 2px 10px;
    border-radius: 5px;
    user-select: none;
}
#lo-popup-close:hover { color: #fff; background: #2a2a35; }

/* ── Tabs row ── */
#lo-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: #18181f;
    border-bottom: 1px solid #2a2a35;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
#lo-tabs::-webkit-scrollbar { display: none; }
.lo-tab {
    flex-shrink: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(255,255,255,0.04);
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lo-tab:hover { color: #fff; background: rgba(255,255,255,0.08); }
.lo-tab.active {
    color: #ffe566;
    background: rgba(251,191,36,0.18);
    border-color: rgba(251,191,36,0.6);
    text-shadow: 0 0 4px rgba(255,200,0,0.6);
}
.lo-tab .lo-tab-mark {
    margin-left: 4px;
    color: #fbbf24;
    font-size: 10px;
}
/* ROI badge in top-right corner of offer tabs */
.lo-tab { position: relative; padding-top: 12px; }
.lo-tab .lo-tab-roi {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #16a34a, #14532d);
    border: 1px solid #4ade80;
    border-radius: 6px;
    padding: 1px 5px;
    box-shadow: 0 0 6px rgba(74,222,128,0.5);
    line-height: 1.1;
    pointer-events: none;
    white-space: nowrap;
}

#lo-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    position: relative;
}

.lo-pane {
    display: none;
    padding: 14px;
}
.lo-pane.active { display: block; }
#lo-wave-panes { display: contents; }

/* ── Referral banner ── */
#lo-ref-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(160,82,12,0.28) 0%, rgba(80,40,5,0.30) 100%);
    border: 1.5px solid #c8700a;
    border-radius: 9px;
    margin-bottom: 14px;
    box-shadow: 0 0 14px rgba(255,180,30,0.18), inset 0 1px 0 rgba(255,200,80,0.18);
}
#lo-ref-banner-text {
    font-size: 12px;
    color: #fde68a;
    line-height: 1.35;
    flex: 1;
    font-weight: 700;
    text-shadow: 0 1px 2px #000;
}
#lo-rules-btn {
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    color: #fde68a;
    background: linear-gradient(180deg, rgba(120,60,10,0.7), rgba(60,30,5,0.85));
    border: 1.5px solid #fbbf24;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(251,191,36,0.3);
}
#lo-rules-btn:hover { background: linear-gradient(180deg, rgba(180,90,20,0.85), rgba(80,40,10,0.9)); color: #fff; }

/* ── Reward slots (icon center, qty bottom-left, value top-right) ── */
#lo-rewards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
/* Reward slots — game-themed brown/gold "treasure chest" look (was purple).
   Three tiers: Bronze (slot 0), Silver (slot 1), Gold (slot 2). Each tier
   has a distinct corner ornament + glow color. Animated runner shimmer
   on slot 2 (gold, premium) ties it to the S/S+ craft tier visual. */
.lo-reward-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,200,80,0.10) 0%, transparent 55%),
        linear-gradient(170deg, #3a1f08 0%, #1a0d04 100%);
    border: 2px solid #8b4500;
    border-radius: 11px;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.12s, box-shadow 0.18s;
    box-shadow:
        inset 0 1px 0 rgba(255,200,80,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 2px 6px rgba(0,0,0,0.5);
}
/* Decorative corner ornaments — small brass studs on inactive slots,
   replaced by colored stars on shiny tier 2. */
.lo-reward-slot::before,
.lo-reward-slot::after {
    pointer-events: none;
}
.lo-reward-slot.unlocked { box-shadow: 0 0 14px rgba(251,191,36,0.55), inset 0 1px 0 rgba(255,200,80,0.3); cursor: pointer; }
.lo-reward-slot.unlocked:hover,
.lo-reward-slot.tier-shiny:hover { transform: translateY(-1px); }
.lo-reward-slot.claimed {
    border-color: #15803d;
    background: linear-gradient(170deg, #14401b 0%, #0a2010 100%);
    cursor: default;
}
.lo-reward-slot.claimed::before {
    content: '✓';
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: 12px;
    color: #86efac;
    font-weight: 800;
    z-index: 4;
    text-shadow: 0 1px 2px #000;
}

/* Running gradient border around the slot — same trick as craft tier-shiny.
   Per-slot color is set via .tier-red / .tier-pink / .tier-gold. */
.lo-reward-slot.tier-shiny::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--lo-runner-angle, 0deg),
        transparent 0deg,
        var(--lo-glow, #fbbf24) 18deg,
        rgba(255,255,255,0.95) 28deg,
        var(--lo-glow, #fbbf24) 38deg,
        transparent 56deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: lo-runner-spin 2.6s linear infinite;
    z-index: 2;
}
/* Per-tier accents — Bronze / Silver / Gold treasure aesthetic.
   Tier 2 (gold) keeps the runner shimmer for premium feel. */
.lo-reward-slot.tier-gold { --lo-glow: #fbbf24; }

/* Slot 0 — Bronze */
.lo-reward-slot.tier-bronze {
    border-color: #c8700a;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,180,80,0.12) 0%, transparent 55%),
        linear-gradient(170deg, #4a2410 0%, #1f0e05 100%);
    box-shadow:
        0 0 12px rgba(200,112,10,0.55),
        inset 0 1px 0 rgba(255,180,80,0.28),
        inset 0 -1px 0 rgba(0,0,0,0.5);
    /* filter:brightness pulse removed — caused full-screen flicker on slow WebViews */
}
/* Slot 1 — Silver */
.lo-reward-slot.tier-silver {
    border-color: #cbd5e1;
    background:
        radial-gradient(circle at 30% 20%, rgba(220,230,240,0.10) 0%, transparent 55%),
        linear-gradient(170deg, #2c2f3a 0%, #14161e 100%);
    box-shadow:
        0 0 14px rgba(203,213,225,0.55),
        inset 0 1px 0 rgba(220,230,240,0.28),
        inset 0 -1px 0 rgba(0,0,0,0.5);
    /* tier-pulse anim removed (flicker source) */
}
/* Slot 2 — Gold (most valuable, also gets runner shimmer via tier-shiny) */
.lo-reward-slot.tier-gold:not(.tier-shiny) {
    border-color: #fbbf24;
    box-shadow: 0 0 16px rgba(251,191,36,0.65),
                inset 0 1px 0 rgba(255,200,80,0.3);
    /* tier-pulse anim removed (flicker source) */
}
@keyframes lo-tier-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.18); }
}

/* Tier "ribbon" badge in top-left corner — visual hierarchy */
.lo-reward-slot::before {
    content: '';
}
.lo-reward-slot.tier-bronze::after,
.lo-reward-slot.tier-silver::after {
    /* small decorative dot in upper-left corner — subtle "level chip" */
    content: '';
    position: absolute;
    top: 5px; left: 5px;
    width: 6px; height: 6px;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 4px currentColor;
}
.lo-reward-slot.tier-bronze::after { background: #c8700a; color: #c8700a; }
.lo-reward-slot.tier-silver::after { background: #cbd5e1; color: #cbd5e1; }

@property --lo-runner-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes lo-runner-spin {
    to { --lo-runner-angle: 360deg; }
}
/* Fallback for browsers without @property — animate via CSS variable manually */
@-moz-keyframes lo-runner-spin { to { --lo-runner-angle: 360deg; } }

/* Centered icon — another -20% (45% → 36%) per latest request */
.lo-reward-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36%;
    height: 36%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lo-reward-icon img,
.lo-item-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
/* No greyscale on locked slots — per request, all rewards stay colorful. */

/* Qty bottom-left */
.lo-reward-qty {
    position: absolute;
    left: 6px;
    bottom: 5px;
    font-size: 12px;
    font-weight: 800;
    color: #fde68a;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px #000;
    z-index: 3;
}
/* Locked qty stays gold — no muted state. */

/* USD value top-right (a bit larger, more prominent) */
.lo-reward-usd {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 11px;
    font-weight: 800;
    color: #bbf7d0;
    background: linear-gradient(180deg, rgba(22,163,74,0.65), rgba(20,60,20,0.85));
    border: 1.5px solid rgba(74,222,128,0.65);
    border-radius: 5px;
    padding: 2px 6px;
    z-index: 3;
    text-shadow: 0 1px 1px #000;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Progress bar with numbered dots ──
   Bar spans full width of the rewards row (no inner margin); dots are
   positioned at 16.67% / 50% / 83.33% which are the centers of a 3-equal-
   column layout, matching the reward-icon centers above. */
#lo-progress-wrap {
    padding: 14px 0 4px;
}
#lo-progress-bar {
    position: relative;
    height: 6px;
    background: rgba(80,50,15,0.5);
    border-radius: 3px;
    margin: 0;
    border: 1px solid rgba(200,112,10,0.35);
}
#lo-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #c8700a, #fbbf24, #fde68a);
    transition: width 0.4s ease;
    box-shadow: 0 0 6px rgba(251,191,36,0.6);
}
.lo-prog-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2b1a08;
    border: 2px solid rgba(200,112,10,0.6);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    line-height: 1;
}
.lo-prog-dot::before {
    content: attr(data-num);
}
.lo-prog-dot.reached {
    background: #fbbf24;
    border-color: #fff8dc;
    color: #1a0d04;
    box-shadow: 0 0 10px rgba(251,191,36,0.85);
}

/* ── Referral link copy widget — game brown/gold theme ── */
#lo-ref-link-wrap {
    margin-top: 14px;
    padding: 10px 12px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,200,80,0.06) 0%, transparent 70%),
        linear-gradient(170deg, rgba(40,22,8,0.85) 0%, rgba(15,8,3,0.85) 100%);
    border: 1.5px solid #c8700a;
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255,200,80,0.18);
}
.lo-ref-link-label {
    font-size: 11px;
    font-weight: 800;
    color: #fde68a;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px #000;
}
.lo-ref-link-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
#lo-ref-link-input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #fde68a;
    background: #0d0703;
    border: 1.5px solid rgba(200,112,10,0.6);
    border-radius: 6px;
    padding: 6px 9px;
    user-select: all;
}
#lo-ref-link-input::selection { background: rgba(251,191,36,0.4); }
.lo-ref-link-copy {
    font-family: inherit;
    font-size: 14px;
    background: linear-gradient(180deg, #a16207, #6b3000);
    color: #fff8dc;
    border: 1.5px solid #fbbf24;
    border-radius: 6px;
    padding: 0 14px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(251,191,36,0.35);
}
.lo-ref-link-copy:hover { background: linear-gradient(180deg, #c87a0c, #8b4500); }
.lo-ref-link-copy:active { transform: scale(0.95); }

/* ── Wave Offers banners (rendered inside per-wave panes) ──
   Use a more specific selector so this rule does NOT override .lo-pane's
   display:none for inactive panes. */
.lo-pane.active.lo-wave-pane { display: flex; flex-direction: column; gap: 12px; }
.lo-wave-pane-header { display: none; /* removed per request — no "Прорыв N" header */ }

.wo-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    border: 1.5px solid #c8700a;
    background: linear-gradient(170deg, #2b0f04 0%, #150602 100%);
}
.wo-card.wo-expensive {
    border-color: #fbbf24;
    background: linear-gradient(170deg, #1f1306 0%, #0d0703 100%);
    box-shadow: 0 4px 18px rgba(251,191,36,0.25);
}

.wo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(255,80,30,0.45), rgba(180,40,10,0.25), transparent);
    border-bottom: 1px solid rgba(200,112,10,0.45);
}
.wo-card.wo-expensive .wo-header {
    background: linear-gradient(90deg, rgba(251,191,36,0.45), rgba(180,120,20,0.22), transparent);
    border-bottom-color: rgba(251,191,36,0.6);
}
.wo-tier-badge {
    font-size: 12px;
    font-weight: 900;
    color: #ffe566;
    letter-spacing: 0.4px;
    text-shadow: 0 0 6px rgba(255,200,0,0.85), 0 1px 2px #000;
    text-transform: uppercase;
    line-height: 1.1;
}
.wo-tier-sub {
    font-size: 9px;
    font-weight: 600;
    color: #cbd5e1;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0.1px;
    text-shadow: 0 1px 2px #000;
}
.wo-roi-badge {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #16a34a, #14532d);
    border: 1px solid #4ade80;
    border-radius: 6px;
    padding: 3px 8px;
    box-shadow: 0 0 8px rgba(74,222,128,0.4);
    white-space: nowrap;
}

.wo-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
    padding: 10px;
}
.wo-cell {
    aspect-ratio: 1 / 1;
    position: relative;
    background: rgba(0,0,0,0.4);
    border: 1px solid #3a3520;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wo-cell-icon {
    width: 60%;
    height: 60%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.wo-cell-qty {
    position: absolute;
    bottom: 3px;
    left: 4px;
    right: 4px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: #fde68a;
    text-shadow: 0 1px 2px #000;
    line-height: 1;
}

.wo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.wo-timer {
    font-size: 12px;
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}
.wo-buy-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #4338ca, #312e81);
    border: 1.5px solid #6366f1;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99,102,241,0.4);
}
.wo-buy-btn:hover { background: linear-gradient(180deg, #4f46e5, #3730a3); }
.wo-buy-btn:active { transform: scale(0.96); }
.wo-buy-btn b { color: #fde68a; font-weight: 900; }

/* ── Wave Offer success popup ── */
#wo-success-popup {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-family: 'Nunito', sans-serif;
}
#wo-success-card {
    background: linear-gradient(160deg, #1a1a24, #0a0a12);
    border: 2px solid #fbbf24;
    border-radius: 14px;
    width: 100%;
    max-width: 380px;
    padding: 18px 16px 16px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 50px rgba(251,191,36,0.45);
    animation: lo-claim-pop 0.25s ease;
}
.wo-success-title {
    font-size: 17px;
    font-weight: 800;
    color: #fde68a;
    text-shadow: 0 0 10px rgba(251,191,36,0.6);
    margin-bottom: 4px;
}
.wo-success-sub {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 14px;
}
#wo-success-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}
.wo-success-cell {
    aspect-ratio: 1 / 1;
    position: relative;
    background: rgba(0,0,0,0.5);
    border: 1.5px solid #fbbf24;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(251,191,36,0.2);
}
.wo-success-btn {
    font-family: inherit;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #16a34a, #14532d);
    border: 1.5px solid #4ade80;
    border-radius: 8px;
    cursor: pointer;
}
.wo-success-btn:active { transform: scale(0.97); }

/* ── Tooltip on cell hover/touch ── */
#wo-tooltip {
    position: absolute;
    z-index: 110;
    max-width: 220px;
    background: #0d0d12;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 7px 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.7);
    white-space: normal;
}
#wo-tooltip .wo-tt-title {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #fde68a;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
#wo-tooltip::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #0d0d12;
    border-right: 1px solid #fbbf24;
    border-bottom: 1px solid #fbbf24;
}
#wo-tooltip.below::before {
    bottom: auto; top: -5px;
    border: none;
    border-left: 1px solid #fbbf24;
    border-top: 1px solid #fbbf24;
}
.wo-cell { cursor: help; }

/* ── "Limited offer unlocked" congrats popup (after wave-N boss kill) ── */
#lo-unlocked-popup {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    font-family: 'Nunito', sans-serif;
}
#lo-unlocked-card {
    background: linear-gradient(160deg, #2b1a08 0%, #110906 100%);
    border: 2px solid #fbbf24;
    border-radius: 14px;
    padding: 22px 22px 18px;
    text-align: center;
    color: #fff;
    width: min(94vw, 360px);
    box-shadow: 0 0 30px rgba(251,191,36,0.45), 0 12px 30px rgba(0,0,0,0.7);
    animation: lo-claim-pop 0.3s ease;
}
.lo-unlocked-icon {
    font-size: 42px;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 8px rgba(251,191,36,0.6));
}
.lo-unlocked-title {
    font-size: 18px;
    font-weight: 800;
    color: #fde68a;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(251,191,36,0.5);
}
.lo-unlocked-sub {
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 16px;
}
.lo-unlocked-sub b { color: #fde68a; }
.lo-unlocked-btn {
    font-family: inherit;
    width: 100%;
    padding: 11px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #4338ca, #312e81);
    border: 1.5px solid #6366f1;
    border-radius: 8px;
    cursor: pointer;
}
.lo-unlocked-btn:hover { background: linear-gradient(180deg, #4f46e5, #3730a3); }
.lo-unlocked-btn:active { transform: scale(0.97); }

/* ── Rules popup ── */
#lo-rules-popup {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-family: 'Nunito', sans-serif;
}
#lo-rules-card {
    background: linear-gradient(170deg, #2b1a08 0%, #150a04 100%);
    border: 2px solid #c8700a;
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 16px;
    box-shadow: 0 0 24px rgba(255,180,30,0.25), 0 12px 30px rgba(0,0,0,0.7);
}
.lo-rules-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 800;
    color: #fde68a;
    text-shadow: 0 1px 2px #000;
}
#lo-rules-body {
    font-size: 12px;
    color: #e2d9c8;
    line-height: 1.55;
    font-weight: 500;
}
#lo-rules-body p { margin: 6px 0; }
#lo-rules-body ul { margin: 4px 0 8px 18px; padding: 0; }
#lo-rules-body li { margin: 3px 0; }
#lo-rules-body b { color: #fde68a; }

/* ── Claim success popup ── */
#lo-claim-popup {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-family: 'Nunito', sans-serif;
}
#lo-claim-card {
    background: #14141a;
    border: 1.5px solid #fbbf24;
    border-radius: 14px;
    padding: 24px 28px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 0 30px rgba(251,191,36,0.4);
    animation: lo-claim-pop 0.25s ease;
}
@keyframes lo-claim-pop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ============================================================ */
/* LIMITED CHEST subsection                                     */
/* ============================================================ */
#lo-pane-chest {
    padding: 14px 14px 18px;
    color: #fde68a;
    font-family: 'Nunito', sans-serif;
    text-align: center;
    overflow-x: hidden;
}
.lc-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff8dc;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(251,191,36,0.6);
    margin: 2px 0 4px;
}
.lc-stock-line {
    font-size: 11px;
    color: #fca5a5;
    margin-bottom: 12px;
    font-weight: 700;
}
.lc-cell-wrap {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lc-cell-wrap::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,0.45) 0%, rgba(220,38,38,0.18) 45%, transparent 75%);
    animation: lc-glow-pulse 2.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lc-glow-pulse {
    0%, 100% { transform: scale(0.9);  opacity: 0.55; }
    50%      { transform: scale(1.05); opacity: 1; }
}
.lc-cell-wrap::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px dashed rgba(251,191,36,0.5);
    animation: lc-ring-spin 12s linear infinite;
    pointer-events: none;
}
@keyframes lc-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.lc-cell {
    position: relative;
    width: 96px;
    height: 96px;
    background: linear-gradient(180deg, #2a1a08 0%, #1a0e02 100%);
    border: 2px solid #fbbf24;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(251,191,36,0.55), inset 0 0 12px rgba(220,38,38,0.3);
    user-select: none;
    -webkit-user-select: none;
    z-index: 1;
}
.lc-cell img { width: 88px; height: 88px; image-rendering: pixelated; }
.lc-cell:active { transform: scale(0.96); }
.lc-price-line {
    font-size: 14px;
    font-weight: 800;
    color: #fff8dc;
    margin-bottom: 10px;
}
.lc-price-line .lc-price-num {
    color: #fbbf24;
    font-size: 17px;
    text-shadow: 0 0 8px rgba(251,191,36,0.6);
}
.lc-qty-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}
.lc-qty-btn {
    flex: 1;
    max-width: 88px;
    padding: 8px 4px;
    background: linear-gradient(180deg, #1a1408, #0c0904);
    border: 1.5px solid #3a2e15;
    border-radius: 6px;
    color: #fde68a;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.lc-qty-btn .lc-qty-discount {
    display: block;
    font-size: 9px;
    color: #4ade80;
    margin-top: 1px;
    font-weight: 700;
}
.lc-qty-btn.selected {
    border-color: #fbbf24;
    background: linear-gradient(180deg, #3a2810, #1a1408);
    box-shadow: 0 0 8px rgba(251,191,36,0.4);
    color: #fff8dc;
}
.lc-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.lc-buy-btn {
    display: inline-block;
    min-width: 160px;
    padding: 10px 22px;
    background: linear-gradient(180deg, #a16207, #6b3000);
    border: 1.5px solid #fbbf24;
    border-radius: 8px;
    color: #fff8dc;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(251,191,36,0.35);
    margin-top: 4px;
}
.lc-buy-btn:disabled {
    background: #2a1a08;
    border-color: #3a2e15;
    color: #6b5a3a;
    cursor: not-allowed;
    box-shadow: none;
}
.lc-owned-line {
    margin-top: 10px;
    font-size: 11px;
    color: #aa9870;
}
.lc-owned-line b { color: #fde68a; font-weight: 800; }
.lc-open-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 18px;
    background: linear-gradient(180deg, #16a34a, #14532d);
    border: 1.5px solid #4ade80;
    border-radius: 6px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.lc-open-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.lc-tt-list {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
    color: #fde68a;
}
.lc-tt-list .lc-tt-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.lc-tt-list .lc-tt-row.rare { color: #fca5a5; font-weight: 800; }
.lc-tt-list .lc-tt-chance { color: #aa9870; }
.lc-tt-list .lc-tt-row.rare .lc-tt-chance { color: #fca5a5; }
.lc-tt-list .lc-tt-foot {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px dashed rgba(251,191,36,0.3);
    font-size: 10px;
    color: #aa9870;
    font-style: italic;
}

#lc-confirm-popup, #lc-result-popup {
    position: fixed;
    inset: 0;
    z-index: 5050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#lc-confirm-card, #lc-result-card {
    background: linear-gradient(180deg, #18181f, #0e0e14);
    border: 2px solid #fbbf24;
    border-radius: 14px;
    padding: 18px 22px 16px;
    text-align: center;
    color: #fff8dc;
    min-width: 260px;
    max-width: 320px;
    box-shadow: 0 0 38px rgba(251,191,36,0.45);
    animation: lc-pop 0.22s ease;
    font-family: 'Nunito', sans-serif;
    position: relative;
    overflow: hidden;
}
@keyframes lc-pop {
    from { transform: scale(0.86); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.lc-confirm-title, .lc-result-title {
    font-size: 16px;
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(251,191,36,0.4);
}
.lc-confirm-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
}
.lc-confirm-icon img { width: 100%; height: 100%; }
.lc-confirm-body {
    font-size: 14px;
    color: #fde68a;
    margin-bottom: 14px;
    line-height: 1.45;
}
.lc-confirm-body b { color: #fff8dc; font-weight: 800; }
.lc-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.lc-btn {
    flex: 1;
    padding: 9px 14px;
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    border: 1.5px solid transparent;
}
.lc-btn-cancel {
    background: #1a1408;
    border-color: #3a2e15;
    color: #aa9870;
}
.lc-btn-confirm {
    background: linear-gradient(180deg, #a16207, #6b3000);
    border-color: #fbbf24;
    color: #fff8dc;
    box-shadow: 0 0 10px rgba(251,191,36,0.35);
}
.lc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.lc-result-burst {
    position: absolute;
    width: 240px;
    height: 240px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(251,191,36,0.4) 0%, transparent 65%);
    animation: lc-burst-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes lc-burst-pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}
.lc-result-drop {
    position: relative;
    z-index: 1;
    margin: 8px 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.lc-result-icon {
    width: 72px;
    height: 72px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    animation: lc-drop-spin 0.6s ease-out;
}
.lc-result-icon.is-skin,
.lc-result-icon.is-splus {
    animation: lc-drop-rare 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(251,191,36,0.8));
}
.lc-result-icon.is-splus {
    filter: drop-shadow(0 0 14px rgba(252,165,165,1));
}
@keyframes lc-drop-spin {
    from { transform: scale(0.2) rotate(-30deg); opacity: 0; }
    to   { transform: scale(1)   rotate(0);      opacity: 1; }
}
@keyframes lc-drop-rare {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.lc-result-label {
    font-size: 14px;
    font-weight: 800;
    color: #fde68a;
    max-width: 240px;
    line-height: 1.35;
}
.lc-result-label.rare  { color: #fff8dc; text-shadow: 0 0 10px rgba(251,191,36,0.7); }
.lc-result-label.splus { color: #fca5a5; text-shadow: 0 0 12px rgba(220,38,38,0.7); }
.lc-result-buttons {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    justify-content: center;
}
.lc-result-btn {
    flex: 1;
    max-width: 140px;
    padding: 9px 14px;
    border-radius: 6px;
    color: #fff8dc;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.15s;
}
.lc-result-btn-secondary {
    background: #1a1408;
    border-color: #3a2e15;
    color: #aa9870;
}
.lc-result-btn-primary {
    background: linear-gradient(180deg, #a16207, #6b3000);
    border-color: #fbbf24;
    color: #fff8dc;
    box-shadow: 0 0 10px rgba(251,191,36,0.35);
    position: relative;
    overflow: hidden;
}
.lc-result-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Cooldown sweep on "Открыть ещё" — 1 s after the result lands. Prevents
   rage-clicking through chests during the popup transition. */
.lc-result-btn-primary.cooldown::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.55) 100%);
    transform-origin: left center;
    animation: lc-cooldown-sweep 1s linear forwards;
    pointer-events: none;
}
@keyframes lc-cooldown-sweep {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.lc-sold-out-banner {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(220,38,38,0.18);
    border: 1px solid rgba(220,38,38,0.4);
    border-radius: 5px;
    color: #fca5a5;
    font-weight: 700;
    font-size: 12px;
}