button{  font-family: "Paytone One", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

.btn{
    position:relative;
    padding:10px 14px;
    font-size:14px;
    border-radius:12px;
    cursor:pointer;
    color:#f9fafb;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background-image: var(--grad-a);
    border:1px solid rgba(191,219,254,0.28);
    box-shadow: 0 8px 18px rgba(15,23,42,0.9), 0 0 14px rgba(79,70,229,0.65);
    transition: transform 0.08s ease, filter 0.12s ease, opacity 0.2s;
    overflow:hidden;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    touch-action: manipulation;
}
.btn::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    background: radial-gradient(circle at top, rgba(15,23,42,0.35), transparent 65%);
    opacity:0.85;
    pointer-events:none;
}
.btn span{ position:relative; z-index:1; }
.btn:active{ transform: translateY(1px) scale(0.99); filter: brightness(0.96); }

.btn-secondary{
    position: relative;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform var(--transition-fast), background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.btn-secondary:active{
    transform: translateY(1px) scale(0.98);
    filter: brightness(0.95);
}

.btn-full{
    width: 100%;
    max-width: 300px;
}

button:disabled{
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: grayscale(0.3);
    pointer-events: none;
}

.slot-actions{
    display:flex;
    flex-direction: row;
    justify-content:center;
    align-items:center;
    gap: 12px;
    padding: 10px 12px;

}

.multiplier-selector{
    flex: 0 0 auto;
    width: 60px;
    height: 32px; 
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-full);

    background: linear-gradient(180deg,
    rgba(14, 8, 67, 0.62),
    rgba(10, 6, 40, 0.38)
    );
    border: 1px solid rgba(148,163,184,0.16);
    box-shadow:
            0 10px 16px rgba(0,0,0,0.18),
            inset 0 1px 0 rgba(255,255,255,0.06);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.multiplier-selector::before,
.multiplier-selector::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg,
    transparent 0%,
    rgba(148,163,184,0.3) 20%,
    rgba(148,163,184,0.5) 50%,
    rgba(148,163,184,0.3) 80%,
    transparent 100%
    );
    pointer-events: none;
    z-index: 3;
}

.multiplier-selector::before {
    top: calc(50% - 16px);
}

.multiplier-selector::after {
    bottom: calc(50% - 16px);
}

.multiplier-scroll{
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 20%,
            black 80%,
            transparent 100%
    );
    -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 20%,
            black 80%,
            transparent 100%
    );

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.multiplier-scroll::-webkit-scrollbar{
    display: none;
}

.multiplier-spacer{
    flex: 0 0 10px;
    height: 10px;
}

.multiplier-option{
    flex: 0 0 32px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    background: transparent;
    border: none;

    color: rgba(255,255,255,0.4);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;

    transform: scale(0.85);
    opacity: 0.5;
}

.multiplier-option.is-active{
    color: rgba(255,255,255,0.95);
    font-weight: 800;
    font-size: 15px;
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

#spinBtn.btn-full{
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(420px, calc(100% - 84px));
    height: 70px;
    border-radius: 18px;

    border: 2px solid #B8720A;
    background:
            linear-gradient(180deg,
            #F8E088 0%,
            #F0CC40 18%,
            #E8B820 45%,
            #E09818 72%,
            #D08010 100%);

    box-shadow:
            0 0 14px rgba(255, 165, 35, 0.22),
            0 8px 20px rgba(0, 0, 0, 0.34),
            inset 0 2px 0 rgba(255, 255, 255, 0.42),
            inset 0 -3px 8px rgba(160, 80, 0, 0.24);

    color: #fff;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-shadow:
            0 1px 0 rgba(140, 70, 0, 0.65),
            0 3px 10px rgba(0, 0, 0, 0.35);

    position: relative;
    overflow: hidden;

    animation: spinBreath 2.8s ease-in-out infinite;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

#spinBtn.btn-full::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            linear-gradient(105deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0) 38%,
            rgba(255,255,255,.26) 50%,
            rgba(255,255,255,0) 62%,
            rgba(255,255,255,0) 100%);
    transform: translateX(-120%);
    animation: spinShine 3.6s ease-in-out infinite;
    opacity:.55;
    pointer-events:none;
}

#spinBtn.btn-full::after{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    top:5px;
    height:22px;
    background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
    border-radius:999px;
    opacity:.52;
    pointer-events:none;
}

@keyframes spinShine{
    0%   { transform: translateX(-120%); opacity:0; }
    15%  { opacity:.35; }
    55%  { opacity:.4; }
    100% { transform: translateX(120%); opacity:0; }
}
@keyframes spinBreath{
    0%,100%{
        transform: translateY(0) scale(1);
        box-shadow:
                0 0 12px rgba(255, 165, 35, 0.18),
                0 8px 20px rgba(0, 0, 0, 0.34),
                inset 0 2px 0 rgba(255, 255, 255, 0.42),
                inset 0 -3px 8px rgba(160, 80, 0, 0.24);
        filter: saturate(1.02);
    }
    50%{
        transform: translateY(0) scale(1);
        box-shadow:
                0 0 16px rgba(255, 175, 45, 0.26),
                0 9px 22px rgba(0, 0, 0, 0.36),
                inset 0 2px 0 rgba(255, 255, 255, 0.48),
                inset 0 -3px 8px rgba(160, 80, 0, 0.26);
        filter: saturate(1.06);
    }
}
#spinBtn.btn-full:active{
    transform: translateY(2px) scale(.99);
    box-shadow:
            0 0 10px rgba(255, 165, 35, 0.16),
            0 5px 14px rgba(0, 0, 0, 0.32),
            inset 0 2px 6px rgba(140, 70, 0, 0.35);
}
#spinBtn.btn-full:disabled{
    animation:none;
    opacity:.5;
    cursor:not-allowed;
    filter: grayscale(0.35) saturate(0.75);
}
#spinBtn.btn-full:disabled::before{
    animation:none;
    opacity:.08;
}

.ticket-pill{
    height:44px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius: var(--r999);
    background: linear-gradient(180deg, var(--glassA), var(--glassB));
    border:1px solid var(--stroke);
    box-shadow: var(--shadow2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ticket-pill__icon{
    width: 22px;
    height: 22px;
    object-fit: contain;
    display:block;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}

.ticket-pill__value{
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .2px;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

#spinBtn.btn-full{
    max-width: min(420px, calc(100% - 168px));

}

.bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    max-width:100%;
    z-index:40;
    padding:0;
    padding-bottom: var(--tma-safe-bottom, env(safe-area-inset-bottom, 0px));
    transform:none;
    pointer-events: none;
    background: rgba(4, 3, 28, 0.98);
}

.bottom-nav::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: var(--nav-top-radius) var(--nav-top-radius) 0 0;
    background:
        linear-gradient(180deg, rgba(5, 4, 32, 0) 0%, rgba(5, 4, 32, 0.94) 22%, rgba(4, 3, 28, 0.98) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
    z-index: 0;
}

.bottom-nav-inner{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:6px;
    padding:8px;
    border-radius:18px;

    background: linear-gradient(180deg,
    rgba(14, 8, 67, 0.55),
    rgba(10, 6, 40, 0.35)
    );
    border:1px solid rgba(148,163,184,0.18);
    box-shadow:
            0 10px 30px rgba(0,0,0,0.35),
            inset 0 1px 0 rgba(255,255,255,0.06);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nav-item{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    padding:10px 6px 9px;
    border-radius:14px;

    color:rgba(229,231,235,0.68);
    font-size:11px;
    line-height:1;
    letter-spacing:0.2px;

    cursor:pointer;
    position:relative;
    user-select:none;

    transition:
            transform 0.12s ease,
            color 0.15s ease,
            background 0.15s ease,
            box-shadow 0.15s ease;
}
.nav-item:active{ transform: translateY(1px) scale(0.98); }

.nav-icon{
    position:relative;
    width:36px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.nav-icon img{
    width:26px;
    height:26px;
    object-fit:contain;
    display:block;
}
.nav-label{
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:0.95;
}

.nav-item-active{
    color:#f9fafb;
    background:
            radial-gradient(circle at 50% 0%,
            rgba(99,102,241,0.45),
            rgba(99,102,241,0.10) 55%,
            rgba(0,0,0,0) 70%
            );
    box-shadow:
            inset 0 0 0 1px rgba(99,102,241,0.22),
            0 10px 20px rgba(0,0,0,0.28);
    transform: translateY(-2px);
}
.nav-item-active::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:6px;
    width:26px;
    height:3px;
    border-radius:999px;
    background: linear-gradient(90deg, #22c55e, #60a5fa);
    box-shadow: 0 0 10px rgba(34,197,94,0.35);
}

.nav-item-disabled{
    opacity:0.38;
    cursor:default;
    pointer-events:none;
    filter:saturate(0.85);
}

.nav-lock-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:20px;
    opacity:0.9;
    pointer-events:none;
    z-index:2;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.nav-level-required{
    position:absolute;
    bottom:1px;
    left:50%;
    transform:translateX(-50%);
    font-size:8px;
    font-weight:800;
    color:rgba(255,255,255,0.9);
    letter-spacing:0.4px;
    white-space:nowrap;
    pointer-events:none;
    z-index:3;
    text-shadow:0 1px 4px rgba(0,0,0,0.8);
    background:rgba(0,0,0,0.3);
    padding:1px 4px;
    border-radius:4px;
}

.nav-item:not(.nav-item-disabled) .nav-lock-icon,
.nav-item:not(.nav-item-disabled) .nav-level-required{
    display:none;
}

@media (max-width: 360px){
    .nav-icon img{ width:24px; height:24px; }
    .nav-item{ font-size:10px; padding:9px 4px 8px; }
}

.progress-bar{
    position:relative;
    width:100%;
    height:10px;
    background: radial-gradient(circle at top, #020617, #020617);
    border-radius:999px;
    overflow:hidden;
    border:1px solid rgba(31,41,55,0.9);
    box-shadow: inset 0 0 10px rgba(15,23,42,0.9);
}
.progress-fill-gold{
    position:absolute;
    inset:0;
    width:0%;
    background: var(--progress);
    box-shadow: 0 0 12px rgba(79,70,229,0.75);
    transition: width 0.3s ease;
}
.progress-fill-green{
    position:absolute;
    inset:0;
    width:0%;
    background: var(--progress2);
    box-shadow: 0 0 12px rgba(34,197,94,0.90);
    transition: width 0.3s ease;
}

html.modal-open,
body.modal-open{
    overflow:hidden;
    height:100%;
    touch-action:none;
}

.modal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 10050;
}

.modal.is-open{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
            calc(12px + env(safe-area-inset-top))
            12px
            calc(12px + env(safe-area-inset-bottom));
}

.modal-backdrop{
    position:absolute;
    inset:0;
    background: rgba(2,6,23,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-shell{
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    z-index: 1;
}

.modal-card{
    width:100%;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(148,163,184,0.16);
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,.26), rgba(0,0,0,0)),
            rgba(14,8,67,.38);
    box-shadow: 0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
    animation: modalPop .18s ease-out;
}

@keyframes modalPop{
    from{ transform: scale(.96); opacity: 0; }
    to{ transform: scale(1); opacity: 1; }
}

.modal-header{
    padding:14px 14px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid rgba(148,163,184,0.10);
}

.modal-body{ padding:14px; }

.modal-stats{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.stat-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    color: rgba(226,232,240,.92);
    background: rgba(2,6,23,.35);
    border: 1px solid rgba(148,163,184,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.modal-close,
.modal-x{
    width:36px;
    height:36px;
    border-radius:999px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(2,6,23,.35);
    color: rgba(255,255,255,.92);
    display:grid;
    place-items:center;
    cursor:pointer;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    touch-action: manipulation;
}
.modal-close:active,
.modal-x:active{ transform: translateY(1px); }

.daily-layout{ display:grid; gap:12px; }
.daily-hero{
    padding: 12px;
    border-radius: 16px;
    background: rgba(2,6,23,.28);
    border: 1px solid rgba(148,163,184,.10);
}
#btn-daily.daily-claim{ height:52px; border-radius:999px; }
.daily-hint{
    margin-top:10px;
    font-size:12px;
    color: rgba(148,163,184,.9);
    text-align:center;
}

@media (prefers-reduced-motion: reduce){
    .modal-card{ animation:none; }
}

.sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.modal{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}
.modal.is-open{ display: flex; }

.modal.is-open{
    align-items: center;
    justify-content: center;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) 12px;
}

.modal-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-shell{
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    z-index: 1;
}

.modal-card{
    border-radius: 22px;
    border: 1px solid rgba(148,163,184,0.18);
    background:
            radial-gradient(120% 140% at 18% 0%, rgba(99,102,241,.22), rgba(0,0,0,0)),
            radial-gradient(110% 120% at 90% 10%, rgba(34,197,94,.10), rgba(0,0,0,0)),
            rgba(2,6,23,.92);
    box-shadow: 0 26px 70px rgba(0,0,0,.75);
    overflow: hidden;
    transform: translateY(10px) scale(.98);
    opacity: 0;
    animation: modalPop 180ms ease-out forwards;
}
@keyframes modalPop{
    to{ transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header{
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(148,163,184,0.10);
}

.modal-title-row{
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-badge{
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 18px;
    background: radial-gradient(circle at 35% 25%, rgba(99,102,241,.35), rgba(14,8,67,.65));
    border: 1px solid rgba(99,102,241,.22);
    box-shadow: 0 12px 20px rgba(0,0,0,.28);
    flex-shrink: 0;
}
.modal-badge.daily{
    background: radial-gradient(circle at 35% 25%, rgba(250,204,21,.22), rgba(14,8,67,.65));
    border-color: rgba(250,204,21,.18);
}

.modal-title-col{ min-width: 0; display:flex; flex-direction:column; gap:2px; }
.modal-title{ font-size: 14px; font-weight: 900; letter-spacing: .2px; }
.modal-subtitle{
    font-size: 11px;
    color: rgba(148,163,184,.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-x{
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(2,6,23,.35);
    color: rgba(255,255,255,.92);
    display: grid;
    place-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.modal-x:active{ transform: translateY(1px) scale(.99); }

.modal-stats{
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.stat-chip{
    font-size: 11px;
    padding: 7px 10px;
    border-radius: 18px;
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(148,163,184,.12);
    color: rgba(226,232,240,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.modal-body{ padding: 12px; }

.modal-card.daily-modal {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(180deg, #0b1120, #020617);
    border-radius: 18px;
    border: 1px solid rgba(99,102,241,0.25);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    overflow: hidden;
}

.modal-header {
    padding: 16px;
    border-bottom: 1px solid rgba(148,163,184,0.15);
}

.modal-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: radial-gradient(circle at top, #6366f1, #312e81);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
}

.modal-subtitle {
    font-size: 12px;
    color: var(--muted);
}

.modal-x {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
}

.modal-body.daily {
    padding: 16px;
}

.daily-head {
    margin-bottom: 12px;
}

.daily-head-title {
    font-size: 14px;
    font-weight: 600;
}

.daily-head-sub {
    font-size: 12px;
    color: var(--muted);
}

.daily-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 4px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.daily-carousel::-webkit-scrollbar {
    display: none;
}

.day-card {
    flex: 0 0 220px;
    scroll-snap-align: center;
    background: linear-gradient(180deg, #0e1640, #070c22);
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(148,163,184,0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.day-card.is-today {
    border-color: rgba(99,102,241,0.9);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.25);
}

.day-card.is-claimed {
    opacity: 0.55;
}

.day-card.is-locked {
    opacity: 0.35;
}

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

.day-name {
    font-size: 13px;
    font-weight: 600;
}

.day-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 18px;
    background: rgba(148,163,184,0.15);
}

.day-card.is-today .day-tag {
    background: rgba(99,102,241,0.85);
    color: #fff;
}

.day-card.is-claimed .day-tag {
    background: rgba(34,197,94,0.8);
    color: #fff;
}

.day-rewards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reward-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(2,6,23,0.6);
    border-radius: 10px;
    padding: 6px 8px;
    font-size: 12px;
}

.reward-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reward-emoji {
    font-size: 14px;
}

.reward-label {
    color: var(--muted);
}

.reward-value {
    font-weight: 600;
}

.day-actions {
    margin-top: auto;
}

.day-claim {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1, #22c55e);
    color: #fff;
    cursor: pointer;
}

.day-claim:disabled {
    background: rgba(148,163,184,0.25);
    color: rgba(255,255,255,0.5);
    cursor: default;
}

.daily-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 6px 0 10px;
}

.daily-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(148,163,184,0.3);
}

.daily-dot.is-on {
    background: #6366f1;
}

.daily-footer {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    padding-top: 4px;
}

.daily-carousel {
    display: flex;
    gap: 12px;

    overflow: hidden;          
    position: relative;
}

.daily-carousel-track {
    display: flex;
    gap: 12px;

    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.day-card {
    flex: 0 0 78%;
}

.daily-carousel {
    overflow: hidden;
    position: relative;
}

.daily-carousel-track {
    display: flex;
    gap: 12px;
    will-change: transform;
    transition: transform .35s cubic-bezier(.22,.9,.2,1);
}

.day-card {
    flex: 0 0 78%;
}

.daily-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.daily-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transition: transform .2s, opacity .2s;
}

.daily-dot.is-active {
    background: #22c55e;
    transform: scale(1.4);
}

.day-card {
    flex: 0 0 260px;
    max-width: 260px;

    padding: 14px;
    min-height: 180px;

    background: #0b1120;
    border-radius: 16px;
}

.modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:flex-end;
    justify-content:center;
    padding:14px;
    background:rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index:9999;
}

.modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px 10px;
    border-bottom:1px solid rgba(148,163,184,.14);
}
.modal-title{
    font-weight:800;
    letter-spacing:.2px;
    color:#e5e7eb;
    font-size:16px;
}
.modal-x{
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid rgba(148,163,184,.18);
    background:rgba(15,23,42,.6);
    color:#e5e7eb;
    cursor:pointer;
}
.modal-x:active{ transform: translateY(1px); }

.daily-subtitle{
    padding:10px 14px 0;
    color:rgba(229,231,235,.85);
    font-size:12px;
}
.daily-msg{
    padding:6px 14px 10px;
    color:rgba(156,163,175,.95);
    font-size:12px;
    min-height:16px;
}

.daily-carousel{
    position:relative;
    overflow:hidden;              
    padding: 6px 0 4px;
}
.daily-carousel{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scroll-padding-right: 14px;
}
.daily-carousel::-webkit-scrollbar{ display:none; }

.daily-track{
    display:flex;
    gap:12px;
    padding: 6px 14px 12px;
    width:max-content;            
    align-items:stretch;
}

.daily-carousel.is-dragging{
    scroll-snap-type:none;
    cursor:grabbing;
}
.daily-carousel.is-dragging .day-card{
    transition:none !important;
}

.day-card{
    flex: 0 0 auto;
    width: 82%;
    max-width: 420px;
    min-width: 280px;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    border-radius:16px;
    border:1px solid rgba(148,163,184,.18);
    background: radial-gradient(120% 140% at 10% 0%,
    rgba(99,102,241,.20) 0%,
    rgba(34,197,94,.08) 42%,
    rgba(2,6,23,.92) 100%);
    box-shadow: 0 14px 40px rgba(0,0,0,.45);

    padding:12px;
    position:relative;
    transform: translateZ(0);
    transition: transform .18s ease, border-color .18s ease, filter .18s ease, opacity .18s ease;
}

.day-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.day-name{
    font-weight:800;
    color:#e5e7eb;
    font-size:14px;
}
.day-tag{
    font-size:11px;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.18);
    background: rgba(15,23,42,.55);
    color: rgba(229,231,235,.9);
    white-space:nowrap;
}

.day-rewards{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:12px;
}
.reward-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:10px 10px;
    border-radius:14px;
    border:1px solid rgba(148,163,184,.14);
    background: rgba(2,6,23,.55);
}
.reward-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.reward-emoji{
    width:26px;
    height:26px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background: rgba(99,102,241,.14);
    border:1px solid rgba(99,102,241,.18);
    flex:0 0 auto;
}
.reward-label{
    font-size:12px;
    color: rgba(229,231,235,.88);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.reward-value{
    font-weight:800;
    font-size:12px;
    color:#e5e7eb;
    flex:0 0 auto;
}

.day-actions{
    display:flex;
    justify-content:flex-end;
}
.day-claim{
    height:38px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,.18);
    background: linear-gradient(90deg, rgba(79,70,229,.92), rgba(34,197,94,.85));
    color:#fff;
    font-weight:800;
    letter-spacing:.2px;
    cursor:pointer;
}
.day-claim:disabled{
    opacity:.45;
    cursor:not-allowed;
    filter:saturate(.6);
}

.day-card.is-today{
    border-color: rgba(34,197,94,.42);
    box-shadow: 0 18px 60px rgba(34,197,94,.10), 0 14px 40px rgba(0,0,0,.45);
    transform: scale(1.01);
}
.day-card.is-today .day-tag{
    border-color: rgba(34,197,94,.35);
    background: rgba(34,197,94,.14);
    color: rgba(229,231,235,.95);
}

.boss-victory-rewards{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:16px;
}

.boss-victory-rewards .reward-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(148,163,184,.14);
    background: rgba(2,6,23,.55);
}

.boss-victory-rewards .reward-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.boss-victory-rewards .reward-emoji{
    width:32px;
    height:32px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background: rgba(99,102,241,.14);
    border:1px solid rgba(99,102,241,.18);
    flex:0 0 auto;
    font-size:18px;
}

.boss-victory-rewards .reward-label{
    font-size:13px;
    color: rgba(229,231,235,.88);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.boss-victory-rewards .reward-value{
    font-weight:800;
    font-size:14px;
    color:#facc15;
}

#boss-info-modal .bi-shell{
    max-width: 400px;
}

#boss-info-modal .bi-card{
    overflow: hidden;
    border: 1px solid rgba(129,140,248,.28);
    background: linear-gradient(165deg, #0f172a 0%, #020617 55%, #0b0925 100%);
    box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    max-height: min(92vh, 680px);
    display: flex;
    flex-direction: column;
}

#boss-info-modal .bi-hero{
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(148,163,184,.12);
    background: linear-gradient(180deg, rgba(99,102,241,.12) 0%, transparent 100%);
}

#boss-info-modal .bi-hero-glow{
    position: absolute;
    inset: -20% 10% auto;
    height: 70%;
    background: radial-gradient(ellipse at 30% 0%, rgba(250,204,21,.22), transparent 65%);
    pointer-events: none;
}

#boss-info-modal.bi-modal--ready .bi-hero-glow{
    background: radial-gradient(ellipse at 50% 0%, rgba(250,204,21,.35), rgba(239,68,68,.12) 50%, transparent 70%);
}

#boss-info-modal.bi-modal--battle .bi-hero-glow{
    background: radial-gradient(ellipse at 50% 0%, rgba(239,68,68,.28), transparent 65%);
}

#boss-info-modal .bi-avatar-ring{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #facc15, #a855f7, #38bdf8);
    box-shadow: 0 0 20px rgba(168,85,247,.35);
    flex-shrink: 0;
    z-index: 1;
}

#boss-info-modal .bi-avatar{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #0b0925;
    display: grid;
    place-items: center;
}

#boss-info-modal .bi-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#boss-info-modal .bi-avatar-emoji{
    font-size: 32px;
    line-height: 1;
}

#boss-info-modal .bi-hero-text{
    min-width: 0;
    z-index: 1;
}

#boss-info-modal .bi-kicker{
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(148,163,184,.9);
    margin-bottom: 2px;
}

#boss-info-modal .bi-title{
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#boss-info-modal .bi-level{
    font-size: 12px;
    color: rgba(250,204,21,.9);
    margin-top: 2px;
}

#boss-info-modal .bi-close{
    align-self: start;
    z-index: 2;
}

#boss-info-modal .bi-body{
    padding: 14px 16px 18px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

#boss-info-modal .bi-banner{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

#boss-info-modal .bi-banner--ready{
    background: linear-gradient(90deg, rgba(250,204,21,.18), rgba(239,68,68,.12));
    border: 1px solid rgba(250,204,21,.35);
    color: #fde68a;
}

#boss-info-modal .bi-banner--battle{
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.28);
    color: #fecaca;
}

#boss-info-modal .bi-progress-block{
    margin-bottom: 14px;
}

#boss-info-modal .bi-progress-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(148,163,184,.95);
    margin-bottom: 6px;
}

#boss-info-modal .bi-progress-bar{
    height: 10px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.1);
}

#boss-info-modal .bi-progress-fill{
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(90deg, #22c55e, #60a5fa, #a855f7);
    transition: width .35s ease;
}

#boss-info-modal.bi-modal--ready .bi-progress-fill{
    background: linear-gradient(90deg, #facc15, #f97316, #ef4444);
    box-shadow: 0 0 12px rgba(250,204,21,.45);
}

#boss-info-modal.bi-modal--battle .bi-progress-fill{
    background: linear-gradient(90deg, #ef4444, #f97316);
}

#boss-info-modal .bi-stats{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

#boss-info-modal .bi-stat{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(2,6,23,.5);
}

#boss-info-modal .bi-stat-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#boss-info-modal .bi-stat-icon{
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 16px;
    background: rgba(99,102,241,.14);
    border: 1px solid rgba(99,102,241,.2);
    flex-shrink: 0;
}

#boss-info-modal .bi-stat-label{
    font-size: 13px;
    color: rgba(229,231,235,.88);
}

#boss-info-modal .bi-stat-value{
    font-size: 13px;
    font-weight: 800;
    color: #facc15;
    text-align: right;
    white-space: nowrap;
}

#boss-info-modal .bi-rewards{
    margin-bottom: 10px;
}

#boss-info-modal .bi-rewards-title{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(148,163,184,.9);
    margin-bottom: 8px;
}

#boss-info-modal .bi-reward-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#boss-info-modal .bi-reward-chip{
    padding: 6px 10px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(250,204,21,.12);
    border: 1px solid rgba(250,204,21,.28);
    color: #fde68a;
}

#boss-info-modal .bi-hint{
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(148,163,184,.95);
    text-align: center;
}

#boss-info-modal .bi-actions{
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid rgba(148,163,184,.15);
}

.boss-unlock-widget--ready .boss-widget-sub{
    color: #fde68a;
}

#boss-info-modal .bi-btn-accept{
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(34,197,94,.35);
}

#boss-info-modal .bi-btn-cancel{
    background: rgba(15,23,42,.6);
    border: 1px solid rgba(239,68,68,.35);
    color: #fca5a5;
    font-weight: 700;
}

#boss-info-modal .bi-btn-ghost{
    background: rgba(15,23,42,.45);
    border: 1px solid rgba(148,163,184,.2);
    color: rgba(229,231,235,.9);
}

.boss-unlock-widget--ready:not(.boss-farm-panel){
    animation: bi-widget-pulse 1.6s ease-in-out infinite;
}

.boss-unlock-widget--ready .boss-progress-fill{
    background: linear-gradient(90deg, #facc15, #f97316, #ef4444) !important;
}

@keyframes bi-widget-pulse{
    0%, 100%{ box-shadow: 0 0 0 rgba(250,204,21,0); }
    50%{ box-shadow: 0 0 18px rgba(250,204,21,.35); }
}

#boss-defeat-modal .bd-shell{
    max-width: 400px;
}

#boss-defeat-modal .bd-card{
    overflow: hidden;
    border: 1px solid rgba(239,68,68,.32);
    background: linear-gradient(165deg, #1a0a12 0%, #0f172a 45%, #020617 100%);
    box-shadow:
            0 24px 60px rgba(0,0,0,.6),
            0 0 40px rgba(239,68,68,.12),
            inset 0 1px 0 rgba(255,255,255,.05);
    max-height: min(92vh, 640px);
    display: flex;
    flex-direction: column;
}

#boss-defeat-modal .bd-hero{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 18px 16px;
    border-bottom: 1px solid rgba(239,68,68,.18);
    background: linear-gradient(180deg, rgba(239,68,68,.14) 0%, transparent 100%);
}

#boss-defeat-modal .bd-hero-glow{
    position: absolute;
    inset: -30% 5% auto;
    height: 80%;
    background: radial-gradient(ellipse at 50% 0%, rgba(239,68,68,.35), transparent 68%);
    pointer-events: none;
}

#boss-defeat-modal .bd-icon-ring{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #ef4444, #7f1d1d, #450a0a);
    box-shadow: 0 0 28px rgba(239,68,68,.4);
    z-index: 1;
    margin-bottom: 12px;
}

#boss-defeat-modal .bd-icon{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0b0925;
    font-size: 36px;
    line-height: 1;
}

#boss-defeat-modal .bd-hero-text{
    z-index: 1;
    width: 100%;
}

#boss-defeat-modal .bd-kicker{
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(252,165,165,.85);
    margin-bottom: 4px;
}

#boss-defeat-modal .bd-title{
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #fef2f2;
    line-height: 1.25;
}

#boss-defeat-modal .bd-subtitle{
    margin-top: 6px;
    font-size: 12px;
    color: rgba(248,113,113,.9);
}

#boss-defeat-modal .bd-body{
    padding: 16px 18px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

#boss-defeat-modal .bd-hp-block{
    margin-bottom: 14px;
}

#boss-defeat-modal .bd-hp-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(248,113,113,.85);
    margin-bottom: 6px;
}

#boss-defeat-modal .bd-hp-bar{
    height: 12px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(239,68,68,.25);
}

#boss-defeat-modal .bd-hp-fill{
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(90deg, #b91c1c, #ef4444, #f97316);
    box-shadow: 0 0 14px rgba(239,68,68,.45);
    transition: width .5s ease;
}

#boss-defeat-modal .bd-stats{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

#boss-defeat-modal .bd-stat{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(239,68,68,.16);
    background: rgba(15,23,42,.55);
}

#boss-defeat-modal .bd-stat-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#boss-defeat-modal .bd-stat-icon{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 16px;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.22);
    flex-shrink: 0;
}

#boss-defeat-modal .bd-stat-label{
    font-size: 13px;
    color: rgba(254,226,226,.88);
}

#boss-defeat-modal .bd-stat-value{
    font-size: 13px;
    font-weight: 800;
    color: #fca5a5;
    white-space: nowrap;
}

#boss-defeat-modal .bd-tip{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(30,27,75,.45);
    border: 1px solid rgba(129,140,248,.2);
}

#boss-defeat-modal .bd-tip-icon{
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

#boss-defeat-modal .bd-tip p{
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(203,213,225,.92);
}

#boss-defeat-modal .bd-btn-continue{
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(99,102,241,.35);
}

#boss-defeat-modal .bd-btn-continue:active{
    transform: scale(.98);
}

.day-card.is-claimed{
    opacity:.88;
    filter:saturate(.9);
}
.day-card.is-claimed .day-tag{
    background: rgba(99,102,241,.14);
    border-color: rgba(99,102,241,.28);
}

.day-card.is-missed{
    opacity:.72;
    filter: grayscale(.25);
    border-color: rgba(239,68,68,.30);
}
.day-card.is-missed .day-tag{
    background: rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.28);
}

.day-card.is-locked{
    opacity:.65;
    filter:saturate(.85);
}
.day-card.is-locked .day-claim{
    background: rgba(15,23,42,.55);
}

.daily-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    padding: 2px 0 14px;
}
.daily-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background: rgba(148,163,184,.32);
    border: 1px solid rgba(148,163,184,.20);
    cursor:pointer;
    transition: transform .18s ease, background .18s ease, width .18s ease;
}
.daily-dot.is-on{
    width:20px;
    background: rgba(99,102,241,.85);
    transform: scale(1.05);
}

@media (max-width: 420px){
    .day-card{
        width: 88%;
        min-width: 260px;
    }
    #daily-modal .modal-card{ border-radius:16px; }
}

.day-card{
    width: 58%;
    max-width: 300px;
    min-width: 210px;

    padding: 9px;
    border-radius: 18px;
}

.day-card-top{ margin-bottom: 7px; }
.day-name{ font-size: 13px; }
.day-tag{ font-size: 11px; padding: 5px 8px; }

.day-rewards{ gap: 6px; margin-bottom: 9px; }
.reward-pill{ padding: 7px 8px; border-radius: 12px; }
.reward-emoji{ width: 22px; height: 22px; border-radius: 8px; }
.reward-label{ font-size: 12px; }
.reward-value{ font-size: 12px; }

.day-claim{ height: 34px; font-size: 12px; }

@media (max-width: 420px){
    .day-card{
        width: 70%;
        max-width: 280px;
        min-width: 200px;
    }
}

.daily-carousel{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;
    scroll-padding: 0 14px;

    touch-action: pan-y;
    user-select: none;
}

.daily-carousel::-webkit-scrollbar{ height: 0; }

.daily-track{
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 0 14px;
}

.day-card{
    flex: 0 0 auto;
    width: 72%;
    max-width: 320px;
    min-width: 240px;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    padding: 10px;
    border-radius: 18px;
}

.day-name{ font-size: 13px; }
.day-tag{ font-size: 11px; padding: 5px 8px; }
.reward-pill{ padding: 7px 8px; border-radius: 12px; }
.day-claim{ height: 34px; font-size: 12px; }

@media (max-width: 420px){
    .day-card{
        width: 78%;
        max-width: 300px;
        min-width: 230px;
    }
}

.daily-carousel{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-padding: 0 14px;

    touch-action: pan-x;
}

.day-card{
    position:relative;
    border:1px solid rgba(148,163,184,0.18);
    background: rgba(2,6,23,0.55);
    border-radius:16px;
    overflow:hidden;
}

.day-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:18px;
    opacity:0;
    pointer-events:none;
    filter: blur(12px);
    transition: opacity .2s ease;
}

.day-card.is-claimed{
    border-color: rgba(34,197,94,0.55);
}
.day-card.is-claimed::before{
    opacity:1;
    background: radial-gradient(circle at 30% 20%, rgba(34,197,94,0.55), transparent 60%);
}
.day-card.is-claimed .day-tag{
    background: rgba(34,197,94,0.18);
    border:1px solid rgba(34,197,94,0.35);
    color:#bbf7d0;
}

.day-card.is-missed{
    border-color: rgba(239,68,68,0.60);
}
.day-card.is-missed::before{
    opacity:1;
    background: radial-gradient(circle at 30% 20%, rgba(239,68,68,0.55), transparent 60%);
}
.day-card.is-missed .day-tag{
    background: rgba(239,68,68,0.16);
    border:1px solid rgba(239,68,68,0.35);
    color:#fecaca;
}

.day-card.is-today{
    border-color: rgba(99,102,241,0.55);
}

.day-card.is-locked{
    opacity:0.75;
    filter: grayscale(0.15);
}

.daily-streak {
    margin: 10px 0 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.daily-pill {
    padding: 7px 10px;
    border-radius: 18px;
    font-size: 12px;
    line-height: 1;
    color: #e5e7eb;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(148,163,184,0.18);
    backdrop-filter: blur(8px);
}

.daily-pill strong {
    font-weight: 800;
}

.daily-pill.is-bonus {
    background: rgba(34,197,94,0.10);
    border-color: rgba(34,197,94,0.35);
}

.daily-pill.is-next {
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.35);
}

.income-quick-item {
    pointer-events: none; 
}

.income-quick-item .quick-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.income-hour-label {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1;
}

.income-hour-value {
    font-size: 13px;
    font-weight: 900;
    color: var(--accent-warning);
    text-shadow: 0 1px 3px rgba(250, 204, 21, 0.4);
    line-height: 1;
}

.weekly-main-card{
    margin: 10px 14px 6px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,18);
    background: radial-gradient(120% 140% at 10% 0%,
    rgba(250,204,21,18) 0%,
    rgba(99,102,241,14) 40%,
    rgba(2,6,23,92) 100%);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.weekly-main-title{
    font-weight: 800;
    font-size: 14px;
    color: rgba(229,231,235,0.95);
}

.weekly-main-sub{
    margin-top: 2px;
    font-size: 12px;
    color: rgba(156,163,175,0.95);
}

.weekly-main-btn{
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    background: linear-gradient(135deg, #facc15, #22c55e);
    color: #0b1120;
    cursor:pointer;
}

.weekly-main-btn:disabled{
    opacity: .55;
    cursor: default;
    filter: grayscale(.2);
}

.day-card.is-compact { width: 58%; }

#tab-shop .shop-tabs{
    display:flex;
    gap:10px;
    padding: 10px 12px 0;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
}
#tab-shop .shop-tabs::-webkit-scrollbar{ display:none; }

#tab-shop .shop-tab{
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.18);
    background: rgba(2,6,23,0.55);
    color: rgba(226,232,240,0.9);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
}

#tab-shop .shop-tab.shop-tab-active{
    border-color: rgba(99,102,241,0.55);
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.35), rgba(0,0,0,0)),
            rgba(2,6,23,0.72);
    box-shadow: 0 10px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(99,102,241,0.18);
}

#tab-shop .shop-tabs .shop-tab{
    flex: 0 0 auto;
    text-align: center;
}

#tab-shop .shop-section.is-hidden{
    display: none !important;
}

#tab-shop .shop-section{ display:none; padding: 12px; }
#tab-shop .shop-section.shop-section-active{ display:block; }

#tab-shop .item-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

#tab-shop .item-card{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;

    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,0.14);
    background: rgba(2,6,23,0.55);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

#tab-shop .item-main{ min-width:0; display:flex; flex-direction:column; gap:4px; }
#tab-shop .item-name{ font-weight: 900; font-size: 13px; color: rgba(226,232,240,0.95); }
#tab-shop .item-level,
#tab-shop .item-desc{ font-size: 12px; color: rgba(148,163,184,0.95); }

#tab-shop .item-actions{
    flex: 0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}
#tab-shop .item-cost{
    font-size: 12px;
    font-weight: 800;
    color: rgba(250,204,21,0.95);
}

#tab-shop .daily-shop-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding: 10px 12px 6px;
}

#tab-shop .daily-shop-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight: 900;
    font-size: 13px;
    color: rgba(226,232,240,0.95);
}

#tab-shop .daily-shop-sub{
    margin-top: 4px;
    font-size: 12px;
    color: rgba(148,163,184,0.95);
}

#tab-shop .daily-points-pill{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 8px 10px;
    border-radius: 18px;
    border: 1px solid rgba(99,102,241,0.35);
    background: rgba(2,6,23,0.55);
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(99,102,241,0.12);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

#tab-shop .dp-dot{
    width: 8px;
    height: 8px;
    border-radius: 18px;
    background: rgba(99,102,241,0.95);
    box-shadow: 0 0 14px rgba(99,102,241,0.55);
}

#tab-shop .dp-label{
    font-size: 11px;
    font-weight: 800;
    color: rgba(148,163,184,0.95);
}

#tab-shop .dp-val{
    font-size: 12px;
    font-weight: 900;
    color: rgba(226,232,240,0.95);
}

#tab-shop .daily-shop-filters{
    display:flex;
    gap:8px;
    padding: 0 12px 10px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
}
#tab-shop .daily-shop-filters::-webkit-scrollbar{ display:none; }

#tab-shop .ds-filter{
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.18);
    background: rgba(2,6,23,0.45);
    color: rgba(226,232,240,0.85);
    font-size: 12px;
    font-weight: 800;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
}
#tab-shop .ds-filter.is-active{
    border-color: rgba(34,197,94,0.40);
    background: rgba(34,197,94,0.10);
    box-shadow: inset 0 0 0 1px rgba(34,197,94,0.12);
}

#tab-shop .daily-offers-grid{
    padding: 0 12px 12px;
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 420px){
    #tab-shop .daily-offers-grid{
        grid-template-columns: 1fr 1fr;
    }
}

.daily-offers-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding: 10px 12px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
}
.daily-offers-row::-webkit-scrollbar{ display:none; }

.daily-offers-row .item-card{
    flex: 0 0 auto;
    width: 260px;
    max-width: 80vw;
}

.daily-shop-filters{
    display:flex;
    gap:8px;
    padding: 0 12px 6px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
}
.daily-shop-filters::-webkit-scrollbar{ display:none; }

.ds-filter{
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.18);
    background: rgba(2,6,23,0.45);
    color: rgba(226,232,240,0.85);
    font-size: 12px;
    font-weight: 800;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
}

.ds-filter.is-active{
    border-color: rgba(99,102,241,0.55);
    background: rgba(99,102,241,0.14);
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.12);
}

.item-card.item-card--placeholder{
    opacity: .75;
}

.shop-tabs{
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 10px 12px 8px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.shop-tabs-track{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px 6px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.shop-tabs-track::-webkit-scrollbar{ display:none; }
.shop-tabs-track{ scrollbar-width: none; }

.shop-tab{
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 40px;
    padding: 0 14px;
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.82);

    font-size: 13px;
    line-height: 1;
    white-space: nowrap;

    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.shop-tab:active{ transform: scale(.98); }

.shop-tab-emoji{
    font-size: 16px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

.shop-tab.is-active{
    background: rgba(99,102,241,.16);
    border-color: rgba(99,102,241,.38);
    color: #fff;
}

.shop-content{
    padding: 10px 12px var(--nav-safe-bottom);
}

.shop-section{ display:none; }
.shop-section.is-active{ display:block; }

.shop-section-title{
    font-weight: 800;
    font-size: 14px;
    color: rgba(255,255,255,.92);
    margin: 6px 2px 2px;
}

.shop-section-sub{
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin: 0 2px 10px;
}

.shop-placeholder{
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.65);
    font-size: 12px;
}

.offers-switch{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0 12px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.offers-pill{
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 700;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.offers-pill:active{ transform: scale(.99); }

.offers-pill.is-active{
    background: rgba(99,102,241,.16);
    border-color: rgba(99,102,241,.38);
    color: #fff;
}

.offers-list{
    display: grid;
    gap: 10px;
}

.offer-card{
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.offer-title{
    font-weight: 800;
    font-size: 13px;
    color: rgba(255,255,255,.92);
    margin-bottom: 6px;
}

.offer-sub{
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin-bottom: 10px;
}

.offer-actions{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
}

.offer-btn{
    height: 38px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    font-weight: 800;
    font-size: 13px;
}
.offer-btn:disabled{
    opacity: .45;
}

.offers-switch{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0 12px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.offers-pill{
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 700;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.offers-pill:active{ transform: scale(.99); }

.offers-pill.is-active{
    background: rgba(99,102,241,.16);
    border-color: rgba(99,102,241,.38);
    color: #fff;
}

.offers-list{
    display: grid;
    gap: 10px;
}

.offer-card{
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.offer-title{
    font-weight: 800;
    font-size: 13px;
    color: rgba(255,255,255,.92);
    margin-bottom: 6px;
}

.offer-sub{
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin-bottom: 10px;
}

.offer-actions{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
}

.offer-btn{
    height: 38px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    font-weight: 800;
    font-size: 13px;
}
.offer-btn:disabled{
    opacity: .45;
}

:root{
    --shop-bg: rgba(8, 12, 30, .65);
    --shop-border: rgba(255,255,255,.10);
    --shop-border-2: rgba(255,255,255,.14);
    --shop-glow: rgba(99,102,241,.22);
    --shop-text: rgba(255,255,255,.92);
    --shop-muted: rgba(255,255,255,.62);
    --shop-muted2: rgba(255,255,255,.45);
    --shop-pill: rgba(255,255,255,.06);
    --shop-pill2: rgba(255,255,255,.10);
    --shop-accent: rgba(34,197,94,.95);
    --shop-accent2: rgba(99,102,241,.95);
    --shop-danger: rgba(239,68,68,.95);

    --r12: 12px;
    --r14: 14px;
    --r16: 16px;
}

#tab-shop{
    padding: 10px 12px 0;
    color: var(--shop-text);
}

.shop-tabs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding: 6px 2px 10px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.shop-tabs::-webkit-scrollbar{ display:none; }

.shop-tab{
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1px solid var(--shop-border);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    color: var(--shop-muted);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .2px;
    line-height: 1;
    user-select: none;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.shop-tab:active{ transform: scale(.98); }

.shop-tab.shop-tab-active{
    color: var(--shop-text);
    border-color: rgba(99,102,241,.45);
    background:
            radial-gradient(120% 140% at 30% 10%, rgba(99,102,241,.28), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    box-shadow: 0 10px 28px rgba(99,102,241,.14);
}

.shop-sections{ margin-top: 4px; }

.shop-section{
    display:none;
    padding: 10px 0 0;
}
.shop-section.shop-section-active{ display:block; }

.shop-section-title{
    font-size: 16px;
    font-weight: 900;
    margin: 6px 2px 10px;
    letter-spacing: .2px;
}

.special-switch{
    display:flex;
    gap:10px;
    background: rgba(0,0,0,.12);
    border: 1px solid var(--shop-border);
    border-radius: 18px;
    padding: 6px;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
}

.special-pill{
    flex:1;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--shop-muted);
    padding: 10px 12px;
    border-radius: 18px;
    font-weight: 900;
    font-size: 13px;
    transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
.special-pill:active{ transform: scale(.98); }
.special-pill.is-active{
    color: var(--shop-text);
    border-color: rgba(99,102,241,.45);
    background:
            radial-gradient(120% 160% at 30% 20%, rgba(99,102,241,.22), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

.special-meta{
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap:10px;
    margin: 0 2px 10px;
    color: var(--shop-muted);
    font-size: 13px;
}
#daily-shop-date{
    color: var(--shop-text);
    font-weight: 800;
}

.ds-filters{
    display:flex;
    gap:10px;
    padding: 6px 2px 12px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
}
.ds-filters::-webkit-scrollbar{ display:none; }

.ds-filter{
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 18px;
    border: 1px solid var(--shop-border);
    background: rgba(255,255,255,.05);
    color: var(--shop-muted);
    font-weight: 900;
    font-size: 12px;
    transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
.ds-filter:active{ transform: scale(.98); }
.ds-filter.is-active{
    color: var(--shop-text);
    border-color: rgba(34,197,94,.38);
    background:
            radial-gradient(120% 160% at 30% 30%, rgba(34,197,94,.18), transparent 60%),
            rgba(255,255,255,.06);
}

.slot-subtabs{
    display:flex;
    gap:10px;
    margin: 0 2px 12px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
}
.slot-subtabs::-webkit-scrollbar{ display:none; }

.slot-subtab{
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 18px;
    border: 1px solid var(--shop-border);
    background: rgba(255,255,255,.05);
    color: var(--shop-muted);
    font-weight: 900;
    font-size: 12px;
}
.slot-subtab.is-active{
    color: var(--shop-text);
    border-color: rgba(99,102,241,.45);
    background:
            radial-gradient(120% 160% at 30% 30%, rgba(99,102,241,.20), transparent 60%),
            rgba(255,255,255,.06);
}

.shop-pane{ display:none; }
.shop-pane.is-active{ display:block; }

.item-card{
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-md) 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.item-main{
    min-width: 0;
    flex: 1 1 auto;
}

.item-actions{
    flex: 0 0 auto;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-end;
    gap: 8px;
}

.item-name{
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.item-level{
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.item-desc{
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
}

.item-cost{
    font-weight: 700;
    font-size: 13px;
    color: var(--accent-warning);
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
}

.btn-primary,
.btn-secondary{
    border-radius: 18px;
    padding: 10px 12px;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    border: 1px solid transparent;
    user-select: none;
    transition: transform .12s ease, filter .12s ease, opacity .12s ease, border-color .12s ease, background .12s ease;
}
.btn-primary:active,
.btn-secondary:active{ transform: scale(.98); }

.btn-primary{
    color: var(--text-primary);
    background: var(--grad-primary);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-md), 0 0 20px rgba(99, 102, 241, 0.3);
}

.btn-secondary{
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.btn-secondary:disabled,
.btn-primary:disabled{
    opacity: 0.5;
    filter: grayscale(0.3);
    pointer-events: none;
    cursor: not-allowed;
}

.btn-small{
    padding: 8px 10px;
    font-size: 12px;
}

.shop-placeholder{
    padding: 14px 12px;
    border-radius: var(--r14);
    border: 1px dashed rgba(255,255,255,.14);
    color: var(--shop-muted);
    background: rgba(255,255,255,.04);
}

.cards-top{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items:center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--r14);
    border: 1px solid var(--shop-border);
    background: rgba(255,255,255,.04);
    margin: 0 0 10px;
    color: var(--shop-muted);
    font-size: 13px;
}
#cards-total-rate{ color: var(--shop-text); font-weight: 900; }

@media (max-width: 360px){
    .shop-tab{ padding: 9px 12px; font-size: 12px; }
    .item-card{ padding: 11px; }
    .btn-primary,.btn-secondary{ padding: 9px 11px; }
}

#tab-shop #shop-section-special{
    padding-top: 10px;
}

#tab-shop .special-hero{
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.16);
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.22), transparent 60%),
            rgba(2,6,23,0.55);
    box-shadow: 0 14px 34px rgba(0,0,0,0.38);
    padding: 12px;
    margin-bottom: 12px;
}

#tab-shop .special-hero-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#tab-shop .special-hero-title{
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .2px;
    color: rgba(226,232,240,0.96);
}

#tab-shop .special-hero-meta{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content:flex-end;
}

#tab-shop .meta-pill{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.16);
    background: rgba(2,6,23,0.35);
    color: rgba(226,232,240,0.86);
    font-size: 12px;
    font-weight: 800;
}

#tab-shop .meta-ic{ opacity:.9; }
#tab-shop .meta-val{ color: rgba(250,204,21,0.95); margin-left: 2px; }

#tab-shop .special-switch{
    margin: 0;
    padding: 6px;
    border-radius: 16px;
    background: rgba(2,6,23,0.25);
    border: 1px solid rgba(148,163,184,0.14);
}

#tab-shop .special-pill{
    height: 36px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 12px;
}

#tab-shop .ds-filters{
    margin-top: 10px;
    padding: 0;
}

#tab-shop #daily-symbol-shop.daily-offers-grid .item-card{
    margin: 0;
}

#tab-shop .special-hero-top{
    display:flex;
    flex-direction:column;
    gap: 8px;
    margin-bottom: 10px;
}

#tab-shop .special-hero-title-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

#tab-shop .special-hero-title{
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .2px;
    color: rgba(226,232,240,0.96);
    line-height: 1.1;
}

#tab-shop .special-hero-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between; 
    gap: 10px;
}

#tab-shop .meta-pill.meta-pill--flat{
    height: 26px;
    padding: 0 10px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.12);
    background: rgba(2,6,23,0.22);
    color: rgba(226,232,240,0.82);
    font-size: 12px;
    font-weight: 800;
}

#tab-shop .meta-pill.meta-pill--flat .meta-ic{
    opacity: .75;
}

#tab-shop .meta-pill.meta-pill--flat .meta-val{
    color: rgba(250,204,21,0.95);
}

.cards-top-simple{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:8px 0;
    font-weight:900;
    font-size:14px;
    color:rgba(255,255,255,.92);
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.item-card{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:12px;

    padding:12px;
    border-radius:16px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);

    overflow:hidden;
}

.item-card .item-main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.item-card .item-name{
    font-weight:800;
    font-size:14px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.item-card .item-level{
    font-size:12px;
    opacity:.9;
}

.item-card .item-desc{
    font-size:12px;
    opacity:.75;
    line-height:1.25;
}

.item-card .item-actions{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:8px;
    min-width:120px;
}

.item-card .item-cost{
    font-size:12px;
    opacity:.85;
    white-space:nowrap;
}

.item-card button{
    width:100%;
    min-height:38px;
    border-radius:12px;
}

.daily-offers-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
}

@media (min-width: 520px){
    .daily-offers-grid{
        grid-template-columns: 1fr 1fr;
    }
}

.item-card--offer .item-actions{
    min-width:140px;
}

#tab-shop .shop-section { padding: 12px 0; }
#tab-shop .shop-section-title{
    font-weight: 800;
    font-size: 14px;
    margin: 10px 4px 10px;
    opacity: .95;
}

#tab-shop #items-shop,
#tab-stars-shop #stars-shop,
#tab-shop #daily-symbol-shop,
#tab-shop #symbols-shop,
#tab-shop .symbols-shop-grid{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#tab-shop #shop-section-symbols .shop-section-head{
    margin-bottom: 10px;
}

#tab-shop .daily-offers-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width:520px){
    #tab-shop .daily-offers-grid{
        grid-template-columns: 1fr 1fr;
    }
}

#tab-shop .item-card{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;

    padding: 12px;
    border-radius: 16px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

#tab-shop .item-card .item-main{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#tab-shop .item-card .item-name{
    font-weight: 800;
    font-size: 14px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tab-shop .item-card .item-level{
    font-size: 12px;
    opacity: .9;
}

#tab-shop .item-card .item-desc{
    font-size: 12px;
    line-height: 1.25;
    opacity: .75;
}

#tab-shop .item-card .item-actions{
    flex: 0 0 auto;
    min-width: 130px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
}

#tab-shop .item-card .item-cost{
    font-size: 12px;
    opacity: .85;
    white-space: nowrap;
}

#tab-shop .item-card button{
    width: 100%;
    min-height: 38px;
    border-radius: 12px;
}

#tab-shop #cards-list{
    display:flex;
    flex-direction:column;
    gap: 10px;
}

#tab-shop .card-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 12px;

    padding: 12px;
    border-radius: 16px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

#tab-shop .card-left{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

#tab-shop .card-emoji{ font-size: 22px; }
#tab-shop .card-meta{ min-width:0; }
#tab-shop .card-name{
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tab-shop .card-sub{
    font-size: 12px;
    opacity: .75;
}

#tab-shop .card-right{ min-width: 140px; }
#tab-shop .card-right .btn{ width: 100%; border-radius: 12px; }

#tab-tasks,
#tab-inventory,
#tab-shop{
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 10px 12px var(--nav-content-gap);
    box-sizing: border-box;
}

.tasks-screen,
.tab-page{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: var(--nav-content-gap);
    box-sizing: border-box;
}

.tab-page--tasks{
    --tab-a: #d4af37;
    --tab-b: #9333ea;
    --tab-glow: rgba(212,175,55,.22);
    --tab-border: rgba(212,175,55,.24);
    --tab-surface: rgba(212,175,55,.07);
    --tab-pill-text: #140f04;
    --tab-accent: #fde68a;
    gap: 0;
}

#tab-tasks .tasks-top-switch{
    flex-shrink: 0;
    margin: -10px -12px 6px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(212,175,55,.16);
    background:
            radial-gradient(120% 80% at 0% 0%, rgba(212,175,55,.12), transparent 55%),
            linear-gradient(165deg, rgba(15,23,42,.92), rgba(30,27,75,.78));
}

#tab-tasks .tasks-top-switch .shop-hero-switch{
    border-color: rgba(212,175,55,.28);
}

#tab-tasks .tasks-top-switch .shop-hero-switch-btn.is-active{
    background: linear-gradient(145deg, rgba(212,175,55,.95), rgba(180,130,20,.88));
    box-shadow: 0 8px 20px rgba(212,175,55,.24);
}

#tab-tasks .tasks-panel{
    display: none;
    flex-direction: column;
    gap: 12px;
}

#tab-tasks .tasks-panel.tasks-panel-active{
    display: flex;
}

#tab-tasks .tab-hero--challenges{
    --tab-a: #f97316;
    --tab-b: #eab308;
    --tab-glow: rgba(249,115,22,.2);
    --tab-border: rgba(249,115,22,.24);
}

.tab-page--inventory{
    --tab-a: #14b8a6;
    --tab-b: #6366f1;
    --tab-glow: rgba(20,184,166,.2);
    --tab-border: rgba(20,184,166,.22);
    --tab-surface: rgba(20,184,166,.07);
    --tab-pill-text: #042f2e;
    --tab-accent: #5eead4;
}

#tab-inventory .inv-toolbar{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 8px;
}
.tab-page--pets-hub.is-pets-mode .inv-toolbar{
    display: none !important;
}
.tab-page--pets-hub.is-pets-mode #inventory-chest-grid{
    display: none !important;
}
.tab-page--pets-hub:not(.is-pets-mode) .inv-pets-panel{
    display: none !important;
}

.tab-hero{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--tab-border, rgba(148,163,184,.14));
    background:
        radial-gradient(110% 80% at 0% 0%, var(--tab-glow), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--tab-b) 8%, transparent), transparent 60%),
        linear-gradient(165deg, rgba(14,18,42,.96), rgba(6,8,22,.98));
    box-shadow: 0 12px 32px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}

.tab-hero__glow{
    position: absolute;
    inset: -30% auto auto -15%;
    width: 70%;
    height: 80%;
    background: radial-gradient(ellipse, var(--tab-glow), transparent 68%);
    pointer-events: none;
}

.tab-hero__top{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 10px;
}

.tab-hero__icon{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 22px;
    line-height: 1;
    background: color-mix(in srgb, var(--tab-a) 10%, rgba(0,0,0,.32));
    border: 1px solid color-mix(in srgb, var(--tab-a) 28%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px color-mix(in srgb, var(--tab-a) 12%, transparent);
}

.tab-hero__text{
    flex: 1;
    min-width: 0;
}

.tab-hero__title{
    margin: 0 0 3px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.01em;
    color: #f8fafc;
}

.tab-hero__sub{
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(148,163,184,.88);
}

.tab-hero__pill{
    flex-shrink: 0;
    min-width: 36px;
    height: 28px;
    padding: 0 10px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 900;
    line-height: 28px;
    text-align: center;
    color: var(--tab-pill-text, #0f172a);
    background: linear-gradient(135deg, var(--tab-a), var(--tab-b));
    box-shadow: 0 0 14px color-mix(in srgb, var(--tab-a) 50%, transparent);
}

.tab-hero__track{
    position: relative;
    height: 4px;
    margin: 0 14px 12px;
    border-radius: 18px;
    background: rgba(15,23,42,.75);
    overflow: hidden;
}

.tab-hero__track-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tab-a), var(--tab-b));
    box-shadow: 0 0 10px color-mix(in srgb, var(--tab-a) 45%, transparent);
    transition: width .35s ease;
}

.tab-hero--inventory .tab-hero__track{ display: none; }

.tab-hero__actions{
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 14px 12px;
    margin-top: -4px;
}

.tab-hero__tool{
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 11px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(0,0,0,.25);
    color: rgba(226,232,240,.9);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease;
}

.tab-hero__tool:active{ transform: scale(.96); }

.tab-hero__tool.is-active{
    border-color: color-mix(in srgb, var(--tab-a) 55%, transparent);
    background: color-mix(in srgb, var(--tab-a) 14%, transparent);
    color: var(--tab-accent, var(--tab-a));
}

.tab-hero__tool-dot{
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 18px;
    background: var(--tab-a);
    box-shadow: 0 0 8px var(--tab-a);
}

.tasks-hero{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.14);
    background: linear-gradient(165deg, rgba(14,18,42,.96), rgba(6,8,22,.98));
}

.tasks-hero-inner{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.tasks-hero-ic{ font-size: 22px; }
.tasks-hero-title{ margin: 0; font-size: 18px; font-weight: 900; }
.tasks-hero-sub{ margin: 4px 0 0; font-size: 11px; opacity: .78; }

.tab-section{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tab-section--muted .tab-section__title{
    opacity: .7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.tab-section__head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}

.tab-section__title{
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    color: color-mix(in srgb, var(--tab-accent, #e2e8f0) 35%, #e2e8f0);
}

.tab-page--tasks .tab-section--muted .tab-section__title{
    color: color-mix(in srgb, var(--tab-b) 25%, #94a3b8);
}

.tab-page--inventory .tab-section__title{
    color: color-mix(in srgb, var(--tab-a) 30%, #e2e8f0);
}

.tab-section__meta{
    font-size: 10px;
    font-weight: 700;
    color: rgba(148,163,184,.85);
    text-align: right;
    line-height: 1.35;
}

.tab-section__meta .ui-res-ic--inline{
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.tab-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tab-list--tasks{ gap: 10px; }

.tab-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    text-align: center;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--tab-a) 22%, rgba(148,163,184,.18));
    background:
        radial-gradient(80% 80% at 50% 0%, var(--tab-surface, transparent), transparent 70%),
        rgba(2,6,23,.35);
    color: rgba(148,163,184,.9);
    font-size: 13px;
    font-weight: 700;
}

.tab-empty--loading{ opacity: .75; }

.tab-empty--error{
    border-color: rgba(248,113,113,.22);
    background: rgba(127,29,29,.12);
}

.tab-empty__ic{
    font-size: 36px;
    line-height: 1;
}

.tab-empty__title{
    font-size: 14px;
    font-weight: 800;
    color: #e2e8f0;
}

.tab-empty__sub{
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(148,163,184,.85);
    max-width: 280px;
}

.inv-chest-grid > .tab-empty{
    grid-column: 1 / -1;
}

.tasks-list{ display: flex; flex-direction: column; gap: 10px; }
.tasks-daily-section{ margin-bottom: 4px; }
.tasks-daily-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; margin-bottom: 10px; }
.tasks-daily-title{ margin: 0; font-size: 14px; font-weight: 900; }
.tasks-daily-meta{ font-size: 10px; font-weight: 700; color: rgba(148,163,184,.85); }
.tasks-other-title{ margin: 0 0 10px; font-size: 11px; font-weight: 800; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }

.tsk-card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(8,12,28,.82);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    overflow: hidden;
}

.tsk-card--daily{
    border-color: color-mix(in srgb, var(--tab-a, #d4af37) 30%, transparent);
}

.tab-page--tasks .tsk-card-glow{
    background: radial-gradient(circle, color-mix(in srgb, var(--tab-a) 16%, transparent), transparent 70%);
}

.tab-page--tasks .tsk-card-ic{
    background: color-mix(in srgb, var(--tab-a) 8%, rgba(0,0,0,.3));
    border-color: color-mix(in srgb, var(--tab-a) 22%, transparent);
}

.tab-page--tasks .tsk-card-status{
    background: color-mix(in srgb, var(--tab-b) 16%, transparent);
    border-color: color-mix(in srgb, var(--tab-b) 32%, transparent);
    color: color-mix(in srgb, var(--tab-b) 55%, #e9d5ff);
}

.tab-page--tasks .tsk-daily-progress-fill{
    background: linear-gradient(90deg, var(--tab-a), var(--tab-b));
}

.tab-page--tasks .tsk-card-reward-val{
    color: var(--tab-accent, #fde68a);
}

.tab-page--tasks .tab-section__head--daily{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tasks-daily-progress-pill{
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 700;
    color: #fde68a;
    background: color-mix(in srgb, var(--tab-a, #d4af37) 18%, rgba(0,0,0,.35));
    border: 1px solid color-mix(in srgb, var(--tab-a, #d4af37) 35%, transparent);
}

.tab-page--tasks .tasks-daily-progress-bar{
    margin: -4px 0 10px;
}

.tab-page--tasks .tsk-card-foot{
    background: color-mix(in srgb, var(--tab-a) 5%, rgba(0,0,0,.18));
    border-top-color: color-mix(in srgb, var(--tab-a) 14%, rgba(148,163,184,.1));
}

.tsk-card--ready{
    border-color: rgba(34,197,94,.38);
    box-shadow: 0 8px 28px rgba(34,197,94,.1);
}

.tsk-card--ready .tsk-card-glow{
    background: radial-gradient(circle, rgba(34,197,94,.16), transparent 70%);
}

.tsk-card--ready .tsk-card-status{
    color: #86efac;
    background: rgba(34,197,94,.15);
    border-color: rgba(74,222,128,.3);
}

.tsk-card--done{
    opacity: .72;
}

.tsk-card-glow{
    position: absolute;
    top: -24px;
    right: -16px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(250,204,21,.1), transparent 70%);
    pointer-events: none;
}

.tsk-card-main{
    padding: 12px 12px 10px;
}

.tsk-card-head{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tsk-card-ic{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.07);
}

.tsk-card-titles{
    flex: 1;
    min-width: 0;
}

.tsk-card-title{
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    color: #f1f5f9;
}

.tsk-card-desc{
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(148,163,184,.88);
}

.tsk-card-status{
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(99,102,241,.18);
    border: 1px solid rgba(129,140,248,.28);
    color: #c7d2fe;
}

.tsk-card--done .tsk-card-status{
    background: rgba(34,197,94,.15);
    border-color: rgba(74,222,128,.28);
    color: #bbf7d0;
}

.tsk-daily-progress{
    margin-top: 10px;
}

.tsk-daily-progress-head{
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    color: rgba(148,163,184,.9);
    margin-bottom: 5px;
}

.tsk-daily-progress-bar{
    height: 6px;
    border-radius: 18px;
    background: rgba(15,23,42,.8);
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
}

.tsk-daily-progress-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tab-a, #d4af37), var(--tab-b, #9333ea));
    transition: width .25s ease;
}

.tsk-card--done .tsk-daily-progress-fill{
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.tsk-card-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid rgba(148,163,184,.1);
    background: rgba(0,0,0,.18);
}

.tsk-card-reward{
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.tsk-card-reward-label{
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(148,163,184,.75);
}

.tsk-card-reward-val{
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    color: #fde68a;
}

.tsk-card-actions{
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.tsk-card-actions .tsk-btn-claim,
.tsk-card-actions .tsk-btn-open{
    min-width: 88px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
}

body.app-loading{
    overflow:hidden;
    overscroll-behavior: none;
}

body.app-loading #app{
    opacity:0;
    pointer-events:none;
    transform: translateY(6px);
}

.app-loader{
    position:fixed;
    inset:0;
    width:100%;
    height: var(--tg-viewport-stable-height, var(--tg-viewport-height, 100dvh));
    max-height: var(--tg-viewport-stable-height, var(--tg-viewport-height, 100dvh));
    z-index:10000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding: 0;
    overflow: hidden;
    background: #020617;
    transition: opacity .28s ease, transform .28s ease;
}

.app-loader-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
}

.app-loader-overlay{
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    padding: 16px 18px;
    padding-bottom: calc(18px + var(--tma-safe-bottom, env(safe-area-inset-bottom, 0px)));
    text-align: center;
    color: rgba(229,231,235,0.95);
    background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,0.72) 35%, rgba(2,6,23,0.92));
}

.app-loader.is-hidden{
    opacity:0;
    transform: translateY(8px);
    pointer-events:none;
}

.app-loader-sub{
    font-size: 12px;
    font-weight: 700;
    color: rgba(229,231,235,0.95);
    text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

.app-loader-bar{
    margin-top: 10px;
    height: 10px;
    border-radius: 18px;
    overflow:hidden;
    background: rgba(148,163,184,0.14);
    border: 1px solid rgba(148,163,184,0.12);
}
.app-loader-bar-fill{
    height:100%;
    width: 0%;
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(99,102,241,0.95), rgba(34,197,94,0.90));
    box-shadow: 0 0 16px rgba(99,102,241,0.35);
    transition: width .25s ease;
}

.app-loader-btn{
    margin-top: 14px;
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,0.18);
    background: rgba(255,255,255,0.06);
    color: rgba(229,231,235,0.95);
    font-weight: 800;
    cursor:pointer;
}
.app-loader-btn:active{ transform: translateY(1px); }

.friends-invite-card{
    padding: 18px;
    border-radius: 18px;
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,.25), transparent 60%),
            linear-gradient(180deg, #0b1026, #050816);
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
}

.friends-invite-title{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.friends-invite-sub{
    font-size: 13px;
    color: #c7d2fe;
}

.friends-invite-sub b{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin: 0 4px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    font-weight: 600;
}

.friends-link-input{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    color: #e5e7eb;
}

.btn-friends-icon{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    font-size: 18px;
}

.friends-btn-wide{
    height: 44px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(180deg, #facc15, #eab308);
    color: #111827;
    box-shadow: 0 8px 20px rgba(250,204,21,.35);
}

.friends-stats{
    margin-top: 10px;
    font-size: 13px;
    color: #c7d2fe;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.friends-list-card{
    padding: 14px;
}

.friends-list .shop-placeholder{
    padding: 20px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: #94a3b8;
    font-size: 13px;
}

.friends-link-row{
    display:flex;
    align-items: stretch;
    gap: 10px;
}

.friends-link-input{
    flex: 1;
    min-width: 0;
    height: 44px;              
    padding: 10px 12px;
    border-radius: 12px;
}

.friends-link-actions{
    display:flex;
    flex-direction: row;       
    gap: 10px;
}

.friends-link-actions .btn-friends-icon{
    width: 44px;
    height: 44px;              
    border-radius: 12px;
    display:grid;
    place-items:center;
    font-size: 18px;
    line-height: 1;
}

#tab-friends .friends-hero{
    display: flex;
    justify-content: center;  
}

#tab-friends .friends-hero .friends-link{
    width: 100%;
}

#tab-friends .friends-link-label{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

#tab-friends .friends-link-row{
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

#tab-friends .friends-link-input{
    flex: 1;
    min-width: 0;
}

#tab-friends .friends-link-actions{
    display: flex;
    gap: 10px;
}

#tab-friends .friends-link,
#tab-friends .friends-link-row,
#tab-friends .friends-link-input{
    box-sizing: border-box;
}

#tab-friends .friends-list-card.item-card{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    gap: 12px;
}

#tab-friends .friends-stats{
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: rgba(229,231,235,.85);
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

#tab-friends .friends-list-head{
    display: none;
}

#tab-friends .friends-list,
#tab-friends .friends-list .shop-placeholder{
    width: 100%;
}

#tab-friends .friend-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;

    padding: 12px 12px;
    border-radius: 16px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);

    -webkit-tap-highlight-color: transparent;
}

#tab-friends .friend-left{
    position: relative;
    flex: 1;
    min-width: 0;              
    padding-left: 46px;         
}

#tab-friends .friend-left::before{
    content: "??";
    position:absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 38px;
    height: 38px;
    border-radius: 12px;

    display:grid;
    place-items:center;

    background:
            radial-gradient(120% 120% at 30% 20%, rgba(99,102,241,.35), rgba(0,0,0,0) 60%),
            rgba(2,6,23,.55);
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 0 18px rgba(99,102,241,.18);
    font-size: 18px;
}

#tab-friends .friend-name{
    font-weight: 900;
    font-size: 14px;
    line-height: 1.15;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tab-friends .friend-sub{
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--muted);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tab-friends .friend-date{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: rgba(226,232,240,.85);

    padding: 8px 10px;
    border-radius: 18px;

    background: rgba(2,6,23,.55);
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

#tab-friends #friends-list{
    display:flex;
    flex-direction:column;
    gap: 10px;
}

#tab-friends .friends-stats{
    width: 100%;
}

#tab-friends .friends-stats-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 420px){
    #tab-friends .friends-stats-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#tab-friends .friends-stat{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 54px;              
    border-radius: 14px;

    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

#tab-friends .friends-stat-meta{
    min-width: 0;
}

#tab-friends .friends-stat-label{
    font-size: 11px;
    color: rgba(148,163,184,.95);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tab-friends .friends-stat-val{
    margin-top: 3px;
    font-size: 14px;
    font-weight: 900;
    color: rgba(226,232,240,.96);
    line-height: 1.1;
    font-variant-numeric: tabular-nums; 
}

#tab-friends .friends-stat-ic{
    width: 28px;
    height: 28px;
    border-radius: 10px;
    flex: 0 0 auto;

    background: rgba(2,6,23,.45);
    border: 1px solid rgba(148,163,184,.16);

    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px; 
}

#tab-friends .friends-stat-ic.ic-users{
    background-image: url("images/ui/friends.png");
}
#tab-friends .friends-stat-ic.ic-tickets{
    background-image: url("assets/tiket_icon2.png");
}
#tab-friends .friends-stat-ic.ic-stars{
    background-image: url("assets/star_icon3.png");
}

#tab-friends .friends-wrap{
    display:flex;
    flex-direction:column;
    gap: 12px;
}

#tab-friends .friends-invite-card{
    padding: 16px 16px;
    border-radius: 18px;
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,.22), transparent 60%),
            linear-gradient(180deg, rgba(11,16,38,.92), rgba(5,8,22,.92));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 36px rgba(0,0,0,.42);
}

#tab-friends .friends-invite-title{
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 6px;
}

#tab-friends .friends-invite-sub{
    font-size: 13px;
    color: rgba(199,210,254,.95);
}

#tab-friends .friends-invite-sub b{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 4px 10px;
    margin: 0 4px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    font-weight: 800;
}

#tab-friends .friends-hero{

    display:flex;
    justify-content:center;
}

#tab-friends .friends-hero .friends-link{
    width: 100%;
    display:flex;
    flex-direction:column;
    align-items:center;      
    gap: 10px;
}

#tab-friends .friends-link-label{
    display:block;
    width:100%;
    text-align:center;
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    color: rgba(229,231,235,.88);
}

#tab-friends .friends-link-row{
    width:100%;
    display:flex;
    align-items:stretch;
    gap: 10px;
}

#tab-friends .friends-link-input{
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(229,231,235,.95);
    font-size: 12px;
}

#tab-friends .friends-link-actions{
    display:flex;            
    gap: 10px;
}

#tab-friends .btn-friends-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    font-size: 18px;
    line-height: 1;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

#tab-friends .btn-friends-icon:active{
    transform: translateY(1px);
}

#tab-friends .friends-list-card.item-card{
    display:flex;            
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    width: 100%;
    gap: 12px;
}

#tab-friends .friends-list-head{
    display:none;
}

#tab-friends .friends-list{
    width:100%;
    display:flex;
    flex-direction:column;
    gap: 10px;
}

#tab-friends .friends-list .shop-placeholder{
    width:100%;
    padding: 16px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(148,163,184,.95);
    font-size: 13px;
}

#tab-friends .friends-stats{
    width:100%;
}

#tab-friends .friends-stats-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 420px){
    #tab-friends .friends-stats-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#tab-friends .friends-stat{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 54px;               
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

#tab-friends .friends-stat-meta{
    min-width:0;
}

#tab-friends .friends-stat-label{
    font-size: 11px;
    color: rgba(148,163,184,.95);
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#tab-friends .friend-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 16px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

#tab-friends .friend-left{
    position:relative;
    flex: 1;
    min-width:0;
    padding-left: 46px;  
}

#tab-friends .friend-left::before{
    content:"??";
    position:absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;

    background:
            radial-gradient(120% 120% at 30% 20%, rgba(99,102,241,.35), rgba(0,0,0,0) 60%),
            rgba(2,6,23,.55);
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 0 18px rgba(99,102,241,.18);
    font-size:18px;
}

#tab-friends .friend-name{
    font-weight: 900;
    font-size: 14px;
    line-height: 1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#tab-friends .friend-sub {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--muted);
    white-space: nowrap;
}

#tab-friends .friends-stats{

    margin: 10px 0 6px;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(15,23,42,.35);
    border: 1px solid rgba(148,163,184,.12);

    display: grid;
    gap: 10px;

    font-variant-numeric: tabular-nums;
}

#tab-friends .friends-stats-row{
    display: grid;
    grid-template-columns: 1fr auto; 
    align-items: center;
    gap: 12px;
}

#tab-friends .friends-stats-label{
    font-size: 12px;
    color: rgba(156,163,175,0.92);
    font-weight: 800;
    line-height: 1.15;
}

#tab-friends .friends-stats-value{
    font-size: 13px;
    color: rgba(226,232,240,0.96);
    font-weight: 950;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    white-space: nowrap;
}

#tab-friends .friends-stats-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 18px;
    background: rgba(2,6,23,.55);
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

#tab-friends .friends-stats-icon{
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 16px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

#tab-friends .friends-stats-num{
    display: inline-block;
    min-width: 26px; 
    text-align: right;
}

:root{
    --friendsStatIcon: 14px;   
    --friendsStatPillH: 28px;  
}

#tab-friends .friends-stats-pill{
    height: var(--friendsStatPillH);
    padding: 0 10px;                 
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#tab-friends .friends-stats-icon{
    width: var(--friendsStatIcon) !important;
    height: var(--friendsStatIcon) !important;
    min-width: var(--friendsStatIcon);
    min-height: var(--friendsStatIcon);
    max-width: var(--friendsStatIcon);
    max-height: var(--friendsStatIcon);

    object-fit: contain;
    flex: 0 0 var(--friendsStatIcon);
    display: block;

    transform: translateY(0.5px);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.30));
}

@media (max-width: 380px){
    :root{
        --friendsStatIcon: 13px;
        --friendsStatPillH: 26px;
    }
}

#tab-friends .friends-stats{
    padding: 12px 14px;
    gap: 8px;
}

#tab-friends .friends-stats-row{

    grid-template-columns: 110px 1fr;
    gap: 12px;
}

#tab-friends .friends-stats-label{
    opacity: .92;
    letter-spacing: .2px;
}

#tab-friends .friends-stats-value{
    justify-content: flex-start;   
    gap: 10px;
}

#tab-friends .friends-stats-row:first-child .friends-stats-value{

    font-weight: 1000;
    font-size: 14px;
}

:root{
    --friendsStatIcon: 14px;  
    --friendsStatPillH: 26px; 
}

#tab-friends .friends-stats-pill{
    height: var(--friendsStatPillH);
    padding: 0 10px;
    border-radius: 18px;
    gap: 7px;
}

#tab-friends .friends-stats-num{
    min-width: 30px;          
    text-align: right;
}

.chest-boutique{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.chest-boutique-top{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.chest-theme-tabs,
.chest-cat-tabs{
    display:flex;
    gap:8px;
    overflow:auto;
    padding:2px 2px 6px;
    -webkit-overflow-scrolling: touch;
}
.chest-theme-tab,
.chest-cat-tab{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.92);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .2px;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.chest-theme-tab:active,
.chest-cat-tab:active{ transform: translateY(1px) scale(.99); }

.chest-theme-tab.is-active,
.chest-cat-tab.is-active{
    border-color: rgba(56,189,248,.35);
    background:
            radial-gradient(120% 160% at 20% 0%, rgba(56,189,248,.18), rgba(0,0,0,0)),
            rgba(255,255,255,.06);
    box-shadow: 0 0 0 1px rgba(56,189,248,.10) inset;
}

.chest-theme-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset, 0 8px 18px rgba(0,0,0,.25);
}

.chest-shop-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.chest-offer{
    display:flex;
    gap:12px;
    align-items:stretch;
    padding:12px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.chest-offer.is-selected{
    border-color: rgba(56,189,248,.30);
    background:
            radial-gradient(120% 180% at 10% 0%, rgba(56,189,248,.14), rgba(0,0,0,0)),
            rgba(255,255,255,.05);
}

.chest-offer-main{
    flex: 1 1 auto;
    min-width: 0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.chest-offer-title{
    font-weight: 950;
    font-size: 14px;
    letter-spacing: .2px;
    color: rgba(255,255,255,.95);
    display:flex;
    align-items:center;
    gap:8px;
}
.chest-offer-sub{
    font-size: 12px;
    color: rgba(255,255,255,.70);
    line-height: 1.25;
}

.chest-offer-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-top:2px;
}

.chest-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.86);
    font-size: 11px;
    font-weight: 800;
}
.chest-pill .mini-ico{
    width:16px;
    height:16px;
    border-radius: 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    font-size: 12px;
    line-height: 1;
}

.chest-offer-actions{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    justify-content:center;
    align-items:stretch;
    min-width: 148px;
}

.chest-buy-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    font-weight: 900;
    font-size: 12px;
    cursor:pointer;
}
.chest-buy-btn[disabled]{
    opacity: .45;
    cursor:not-allowed;
}
.chest-buy-btn .need{
    font-weight: 900;
    opacity:.9;
}
.chest-buy-btn .short{
    opacity:.85;
    font-weight: 900;
}

.modal-card-chestshop .modal-body{
    padding: 10px 12px 14px;
}

.cs-modal-badge{
    background:
            radial-gradient(120% 120% at 30% 0%, rgba(52,211,153,.35), transparent 55%),
            rgba(99,102,241,.22);
}

.chestshop-balance{
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.chestshop-bal-item{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 13px;
    border: 1px solid rgba(148,163,184,.14);
    background: rgba(2,6,23,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.chestshop-bal-item--coins{
    border-color: rgba(250,204,21,.28);
    background: linear-gradient(145deg, rgba(250,204,21,.12), rgba(2,6,23,.6));
    color: #fef08a;
}

.chestshop-bal-item--stars{
    border-color: rgba(167,139,250,.35);
    background: linear-gradient(145deg, rgba(167,139,250,.14), rgba(2,6,23,.6));
    color: #e9d5ff;
}

.chestshop-bal-ic{ font-size: 15px; line-height: 1; }

.chestshop-filters{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background:
            radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,.1), transparent 55%),
            rgba(255,255,255,.02);
    border: 1px solid rgba(148,163,184,.12);
    margin-bottom: 12px;
}

.chestshop-filter-block{ min-width: 0; }

.chestshop-filter-title{
    font-size: 10px;
    font-weight: 900;
    color: rgba(255,255,255,.55);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 2px 6px;
}

.chestshop-tabs{
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.chestshop-tabs::-webkit-scrollbar{ display: none; }

.chestshop-chip{
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(15,23,42,.75);
    color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s, background .2s, transform .12s, box-shadow .2s;
}

.chestshop-chip:active{ transform: scale(.97); }

.chestshop-chip.is-active{
    border-color: rgba(129,140,248,.65);
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,.35), transparent 60%),
            linear-gradient(180deg, rgba(67,56,202,.5), rgba(30,27,75,.85));
    color: #fff;
    box-shadow: 0 6px 18px rgba(99,102,241,.28);
}

.chestshop-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.chestshop-empty{
    text-align: center;
    padding: 32px 16px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,.5);
    border-radius: 16px;
    border: 1px dashed rgba(148,163,184,.2);
    background: rgba(2,6,23,.35);
}

.chest-inventory-list{
    display:flex;
    flex-direction:column;
    gap: 8px;
}

.chest-inventory-item{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,0.14);
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.10), rgba(0,0,0,0)),
            rgba(2,6,23,0.60);
    transition: all 0.2s;
}

.chest-inventory-item:hover{
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.14), rgba(0,0,0,0)),
            rgba(2,6,23,0.72);
    border-color: rgba(148,163,184,0.20);
}

.chest-inventory-item-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(148,163,184,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    font-size: 22px;
    flex-shrink: 0;
}

.chest-inventory-item-info{
    flex: 1;
    min-width: 0;
}

.chest-inventory-item-title{
    font-weight: 900;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    line-height: 1.2;
    margin-bottom: 2px;
}

.chest-inventory-item-count{
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-weight: 700;
}

.chest-inventory-item-btn{
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chest-inventory-item-btn:hover:not(:disabled){
    background: rgba(255,255,255,0.10);
    border-color: rgba(148,163,184,0.20);
}

.chest-inventory-item-btn:active:not(:disabled){
    transform: scale(0.98);
}

.chest-inventory-item-btn:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}

.chest-inventory-empty{
    text-align: center;
    padding: 40px 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
}

.chestcard.cs-card{
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.16);
    background:
            radial-gradient(140% 100% at 0% 0%, var(--cs-card-tint, rgba(99,102,241,.12)), transparent 55%),
            linear-gradient(165deg, rgba(15,23,42,.96), rgba(30,27,75,.82));
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07);
    transition: border-color .2s, box-shadow .2s, transform .15s;
}

.cs-card.r-common{ --cs-glow: rgba(148,163,184,.22); --cs-card-tint: rgba(148,163,184,.08); }
.cs-card.r-rare{ --cs-glow: rgba(56,189,248,.35); --cs-card-tint: rgba(56,189,248,.12); border-color: rgba(56,189,248,.28); }
.cs-card.r-epic{ --cs-glow: rgba(167,139,250,.4); --cs-card-tint: rgba(167,139,250,.14); border-color: rgba(167,139,250,.32); }
.cs-card.r-legendary{
    --cs-glow: rgba(250,204,21,.45);
    --cs-card-tint: rgba(250,204,21,.14);
    border-color: rgba(250,204,21,.38);
    box-shadow: 0 12px 32px rgba(250,204,21,.1), inset 0 1px 0 rgba(255,255,255,.1);
}

.cs-card--disabled{
    opacity: .72;
    filter: saturate(.85);
}

.cs-glow{
    position: absolute;
    left: -8px;
    top: 8px;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--cs-glow, rgba(99,102,241,.2));
    filter: blur(18px);
    opacity: .7;
    pointer-events: none;
}

.cs-top{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 10px;
}

.cs-icon-wrap{
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.1),
            0 6px 16px rgba(0,0,0,.25);
}

.cs-icon{
    font-size: 30px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.cs-card.r-legendary .cs-icon-wrap{
    border-color: rgba(250,204,21,.4);
    animation: cs-icon-shine 3s ease-in-out infinite;
}

@keyframes cs-icon-shine{
    0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 12px rgba(250,204,21,.15); }
    50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 20px rgba(250,204,21,.35); }
}

.cs-main{
    flex: 1;
    min-width: 0;
}

.cs-title{
    font-size: 15px;
    font-weight: 1000;
    color: rgba(255,255,255,.96);
    line-height: 1.2;
    margin-bottom: 5px;
}

.cs-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.cs-tag{
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 18px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(148,163,184,.14);
    color: rgba(255,255,255,.72);
}

.cs-tag--rarity{
    color: #fde68a;
    border-color: rgba(250,204,21,.3);
    background: rgba(250,204,21,.1);
}

.cs-card.r-rare .cs-tag--rarity{ color: #7dd3fc; border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.1); }
.cs-card.r-epic .cs-tag--rarity{ color: #ddd6fe; border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.12); }

.cs-desc{
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255,255,255,.52);
}

.cs-rewards{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

.cs-reward{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.2);
    color: rgba(255,255,255,.85);
}

.cs-reward--coins{ border-color: rgba(250,204,21,.22); color: #fde68a; }
.cs-reward--tickets{ border-color: rgba(129,140,248,.25); color: #c7d2fe; }
.cs-reward--stars{ border-color: rgba(167,139,250,.3); color: #e9d5ff; }

.cs-farm{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(129,140,248,.2);
}

.cs-farm b{ color: rgba(255,255,255,.88); font-weight: 900; }
.cs-farm-ic{ font-size: 11px; }

.cs-info-btn{
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.2);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.75);
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
    font-family: Georgia, serif;
    display: grid;
    place-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, transform .12s;
}

.cs-info-btn:active{ transform: scale(.94); background: rgba(255,255,255,.1); }

.cs-buy-row{
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    padding: 0 10px 10px;
}

.cs-buy{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s, box-shadow .2s, filter .2s;
}

.cs-buy:active:not(:disabled){ transform: scale(.97); }

.cs-buy--coins{
    background: linear-gradient(180deg, rgba(250,204,21,.22), rgba(180,83,9,.15));
    border-color: rgba(250,204,21,.35);
    color: #fef9c3;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

.cs-buy--stars{
    background: linear-gradient(180deg, rgba(167,139,250,.28), rgba(79,70,229,.18));
    border-color: rgba(167,139,250,.4);
    color: #f3e8ff;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

.cs-buy-ic{
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.cs-buy-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.cs-buy-price{
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.1;
}

.cs-buy-sub{
    font-size: 9px;
    font-weight: 800;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.chestbuy:disabled{
    opacity: .4;
    cursor: not-allowed;
    filter: grayscale(.3);
}

.chestcard-tags{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chesttag{
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.14);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.76);
}

.chestshop-hint{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(255,255,255,.55);
    text-align: left;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(129,140,248,.15);
}

.chestshop-hint-ic{
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.2;
}

.chest-details-desc{
    font-size: 13px;
    color: rgba(255,255,255,0.70);
    line-height: 1.5;
    margin-bottom: 20px;
}

.chest-details-section{
    margin-bottom: 20px;
}

.chest-details-section:last-child{
    margin-bottom: 0;
}

.chest-details-section-title{
    font-weight: 900;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.chest-details-progress{
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.70);
}

.chest-details-rewards{
    display:flex;
    flex-direction:column;
    gap: 10px;
}

.chest-details-reward-item{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.12);
    background: rgba(255,255,255,0.04);
}

.chest-details-reward-icon{
    font-size: 18px;
    width: 24px;
    text-align:center;
}

.chest-details-reward-text{
    font-size: 13px;
    color: rgba(255,255,255,0.90);
    font-weight: 700;
}

.modal-card-chestqueue .modal-body{
    padding: 10px 12px 14px;
}

.cq-modal-badge{
    background:
            radial-gradient(120% 120% at 30% 0%, rgba(250,204,21,.35), transparent 55%),
            rgba(99,102,241,.25);
}

.cq-legend{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(148,163,184,.1);
}

.cq-legend-item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,.72);
    letter-spacing: .02em;
}

.cq-legend-item i{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cq-legend-item--farm i{ background: #facc15; box-shadow: 0 0 8px rgba(250,204,21,.65); }
.cq-legend-item--wait i{ background: #818cf8; box-shadow: 0 0 8px rgba(129,140,248,.55); }
.cq-legend-item--free i{ background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.45); }

.cq-timeline{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cq-slot{
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
}

.cq-slot--last{ padding-bottom: 0; }

.cq-rail{
    position: relative;
    width: 34px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cq-slot:not(.cq-slot--last) .cq-rail::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 34px;
    bottom: -2px;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(99,102,241,.55), rgba(99,102,241,.08));
    border-radius: 2px;
}

.cq-node{
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,.9);
    border: 2px solid rgba(148,163,184,.25);
    background: rgba(15,23,42,.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cq-node.is-farming{
    border-color: rgba(250,204,21,.65);
    background: radial-gradient(circle at 30% 20%, rgba(250,204,21,.35), rgba(15,23,42,.95));
    box-shadow: 0 0 16px rgba(250,204,21,.25), inset 0 1px 0 rgba(255,255,255,.12);
    animation: cq-node-pulse 2s ease-in-out infinite;
}

.cq-node.is-queued{
    border-color: rgba(129,140,248,.55);
    background: radial-gradient(circle at 30% 20%, rgba(99,102,241,.3), rgba(15,23,42,.95));
}

.cq-node.is-free{
    border-color: rgba(52,211,153,.4);
    color: rgba(167,243,208,.95);
}

.cq-node.is-locked{
    opacity: .55;
    filter: grayscale(.4);
}

@keyframes cq-node-pulse{
    0%, 100%{ box-shadow: 0 0 12px rgba(250,204,21,.2), inset 0 1px 0 rgba(255,255,255,.1); }
    50%{ box-shadow: 0 0 20px rgba(250,204,21,.45), inset 0 1px 0 rgba(255,255,255,.14); }
}

.cq-card{
    flex: 1;
    min-width: 0;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.14);
    background:
            radial-gradient(140% 100% at 0% 0%, rgba(99,102,241,.12), transparent 55%),
            linear-gradient(165deg, rgba(15,23,42,.95), rgba(30,27,75,.75));
    box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
}

.cq-slot--farming .cq-card{
    border-color: rgba(250,204,21,.32);
    box-shadow: 0 8px 24px rgba(250,204,21,.08), inset 0 1px 0 rgba(255,255,255,.08);
}

.cq-slot--queued .cq-card{
    border-color: rgba(129,140,248,.28);
}

.cq-slot--locked .cq-card{
    opacity: .78;
    background: rgba(2,6,23,.55);
}

.cq-slot[data-rarity="rare"] .cq-card{
    border-color: rgba(56,189,248,.3);
}
.cq-slot[data-rarity="epic"] .cq-card{
    border-color: rgba(167,139,250,.35);
}
.cq-slot[data-rarity="legendary"] .cq-card{
    border-color: rgba(250,204,21,.38);
    box-shadow: 0 8px 28px rgba(250,204,21,.1), inset 0 1px 0 rgba(255,255,255,.08);
}

.cq-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(148,163,184,.08);
}

.cq-card-label{
    font-size: 11px;
    font-weight: 900;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cq-badge{
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 18px;
    white-space: nowrap;
}

.cq-badge--farm{
    color: #fef08a;
    background: rgba(250,204,21,.18);
    border: 1px solid rgba(250,204,21,.35);
}

.cq-badge--wait{
    color: #c7d2fe;
    background: rgba(99,102,241,.2);
    border: 1px solid rgba(129,140,248,.35);
}

.cq-badge--free{
    color: #a7f3d0;
    background: rgba(16,185,129,.15);
    border: 1px solid rgba(52,211,153,.3);
}

.cq-card-body{ padding: 10px; }

.cq-add{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 88px;
    padding: 12px;
    border: 1px dashed rgba(129,140,248,.45);
    border-radius: 14px;
    background:
            radial-gradient(120% 80% at 50% 0%, rgba(99,102,241,.14), transparent 60%),
            rgba(2,6,23,.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s, transform .12s, box-shadow .2s;
}

.cq-add:hover,
.cq-add:focus-visible{
    border-color: rgba(167,139,250,.7);
    box-shadow: 0 0 20px rgba(99,102,241,.2);
}

.cq-add:active{ transform: scale(.98); }

.cq-add-ring{
    position: absolute;
    inset: 8px;
    border-radius: 12px;
    border: 1px solid rgba(99,102,241,.15);
    pointer-events: none;
}

.cq-add-icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 900;
    color: #e0e7ff;
    background: linear-gradient(145deg, rgba(99,102,241,.45), rgba(79,70,229,.25));
    border: 1px solid rgba(129,140,248,.4);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.cq-add-label{
    margin-top: 6px;
    font-size: 13px;
    font-weight: 900;
    color: rgba(255,255,255,.92);
}

.cq-add-hint{
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.5);
}

.cq-locked{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px 4px 4px;
}

.cq-locked-icon{
    font-size: 28px;
    opacity: .45;
    filter: grayscale(.2);
}

.cq-locked-title{
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    color: rgba(255,255,255,.85);
}

.cq-locked-sub{
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    line-height: 1.35;
    max-width: 220px;
}

.cq-unlock{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 18px;
    border: 1px solid rgba(167,139,250,.45);
    background: linear-gradient(180deg, rgba(99,102,241,.35), rgba(79,70,229,.2));
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
    -webkit-tap-highlight-color: transparent;
}

.cq-unlock:active{ transform: scale(.97); }

.cq-unlock-star{ font-size: 14px; line-height: 1; }

.cq-chest{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    min-width: 0;
}

.cq-chest-glow{
    position: absolute;
    left: 0;
    top: 50%;
    width: 52px;
    height: 52px;
    transform: translateY(-50%);
    border-radius: 14px;
    background: var(--cq-glow, rgba(148,163,184,.2));
    filter: blur(12px);
    opacity: .65;
    pointer-events: none;
}

.cq-chest.r-common{ --cq-glow: rgba(148,163,184,.25); }
.cq-chest.r-rare{ --cq-glow: rgba(56,189,248,.35); }
.cq-chest.r-epic{ --cq-glow: rgba(167,139,250,.4); }
.cq-chest.r-legendary{ --cq-glow: rgba(250,204,21,.45); }

.cq-chest-icon{
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 26px;
    line-height: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cq-slot--farming .cq-chest-icon{
    border-color: rgba(250,204,21,.35);
    animation: cq-chest-bob 2.4s ease-in-out infinite;
}

@keyframes cq-chest-bob{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-2px); }
}

.cq-chest-main{
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.cq-chest-title{
    font-size: 13px;
    font-weight: 900;
    color: rgba(255,255,255,.94);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cq-chest-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.cq-chest-tag{
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(148,163,184,.14);
    color: rgba(255,255,255,.7);
}

.cq-chest-progress-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,.65);
}

.cq-chest-pct{
    color: #fde68a;
    font-size: 11px;
}

.cq-chest-bar{
    margin-top: 4px;
    height: 6px;
    border-radius: 18px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
}

.cq-chest-bar-fill{
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(90deg, #f59e0b, #facc15, #fde68a);
    box-shadow: 0 0 10px rgba(250,204,21,.45);
    transition: width .35s ease;
}

.cq-chest--queued .cq-chest-wait{
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(199,210,254,.85);
}

.cq-pick-banner{
    position: relative;
    margin-bottom: 12px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(129,140,248,.4);
    background: linear-gradient(135deg, rgba(79,70,229,.45), rgba(30,27,75,.85));
    box-shadow: 0 10px 28px rgba(99,102,241,.22);
}

.cq-pick-banner-glow{
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 120% at 0% 0%, rgba(250,204,21,.2), transparent 55%);
    pointer-events: none;
}

.cq-pick-banner-inner{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.cq-pick-slot-badge{
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    color: #fef08a;
    background: rgba(250,204,21,.15);
    border: 1px solid rgba(250,204,21,.35);
}

.cq-pick-banner-text{
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255,255,255,.92);
    line-height: 1.3;
}

.cq-pick-cancel{
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.85);
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cq-pick-cancel:active{ transform: scale(.94); }

.chestshop-grid.is-queue-pick .chestcard--queue-target{
    border-color: rgba(129,140,248,.55);
    box-shadow:
            0 0 0 2px rgba(99,102,241,.35),
            0 14px 32px rgba(99,102,241,.2);
}

.chestshop-grid.is-queue-pick .cs-buy:not(:disabled){
    box-shadow: 0 0 16px rgba(99,102,241,.25), 0 6px 16px rgba(0,0,0,.25);
}

.chestshop-grid.is-queue-pick .cs-buy--coins:not(:disabled){
    border-color: rgba(129,140,248,.5);
    background: linear-gradient(180deg, rgba(99,102,241,.35), rgba(250,204,21,.15));
}

.chestshop-grid.is-queue-pick .cs-buy--stars:not(:disabled){
    border-color: rgba(167,139,250,.55);
    background: linear-gradient(180deg, rgba(99,102,241,.4), rgba(79,70,229,.3));
}

.chest-open-card{
    overflow: hidden;
    max-width: 400px;
}

.chest-open-body{
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.chest-open-rarity{
    align-self: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 18px;
    color: #e2e8f0;
    background: rgba(148,163,184,.15);
    border: 1px solid rgba(148,163,184,.2);
}

.chest-open-rarity.r-rare{
    color: #93c5fd;
    border-color: rgba(59,130,246,.4);
    background: rgba(59,130,246,.15);
}

.chest-open-rarity.r-epic{
    color: #d8b4fe;
    border-color: rgba(168,85,247,.45);
    background: rgba(168,85,247,.18);
}

.chest-open-rarity.r-legendary{
    color: #fde68a;
    border-color: rgba(250,204,21,.5);
    background: rgba(250,204,21,.2);
    box-shadow: 0 0 20px rgba(250,204,21,.25);
}

.chest-open-stage{
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.12);
    background:
            radial-gradient(ellipse 80% 50% at 50% 100%, rgba(99,102,241,.2), transparent),
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.12), transparent),
            rgba(2,6,23,0.65);
    overflow: hidden;
    display: grid;
    place-items: center;
    transition: height .4s ease, opacity .35s ease;
}

.chest-open-stage.is-revealed{
    height: 120px;
    opacity: .85;
}

.chest-open-flash{
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.55), transparent 55%);
    z-index: 5;
}

.chest-open-flash.is-flash{
    animation: chestFlash .45s ease-out both;
}

@keyframes chestFlash{
    0%{ opacity: 0; }
    25%{ opacity: .9; }
    100%{ opacity: 0; }
}

.chest-open-aura{
    position: absolute;
    inset: -60px;
    opacity: 0;
    filter: blur(22px);
    pointer-events: none;
    transition: opacity .25s ease;
}

.chest-open-aura.is-glow{ opacity: 1; }

.chest-open-particles{
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.chest-open-particle{
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
}

.chest-open-chest-wrap{
    position: relative;
    z-index: 3;
    perspective: 600px;
}

.chest-open-chest{
    position: relative;
    width: 130px;
    height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transform-origin: center bottom;
}

.chest-open-chest-base{
    width: 130px;
    height: 88px;
    border-radius: 16px 16px 22px 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
    border: 1px solid rgba(148,163,184,.2);
    box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.08);
    font-size: 48px;
    line-height: 1;
}

.chest-open-chest-base img{
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.chest-open-lid{
    position: absolute;
    top: 0;
    left: 50%;
    width: 134px;
    height: 44px;
    margin-left: -67px;
    border-radius: 14px 14px 6px 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.2));
    border: 1px solid rgba(148,163,184,.25);
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
    transform-origin: center bottom;
    transform: rotateX(0deg);
    transition: transform .55s cubic-bezier(.34,1.4,.64,1);
}

.chest-open-chest.is-open .chest-open-lid{
    transform: rotateX(-108deg) translateY(-8px);
}

.chest-open-sparks{
    position: absolute;
    inset: -24px;
    opacity: 0;
    pointer-events: none;
    background:
            radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 35%),
            radial-gradient(circle at 70% 45%, rgba(99,102,241,0.3), transparent 42%),
            radial-gradient(circle at 50% 80%, rgba(34,211,238,0.2), transparent 45%);
    filter: blur(8px);
    animation: sparkPulse 1.2s ease-in-out infinite;
}

@keyframes sparkPulse{
    0%, 100%{ opacity: .5; transform: scale(1); }
    50%{ opacity: 1; transform: scale(1.05); }
}

.chest-open-sparks.is-on{ opacity: 1; }

.chest-open-burst{
    position: absolute;
    left: 50%;
    top: 48%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(99,102,241,0.5), transparent 70%);
}

.chest-open-burst.is-boom{
    animation: burstBoom 620ms ease-out both;
}

.chest-open-rewards{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}

.reward-fly{
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%) scale(.85);
    opacity: 0;
    padding: 8px 14px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.2);
    background: rgba(2,6,23,0.8);
    backdrop-filter: blur(10px);
    font-weight: 800;
    font-size: 13px;
    color: #f8fafc;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.reward-fly.is-show{
    animation: rewardPop 780ms cubic-bezier(.34,1.2,.64,1) both;
}

@keyframes rewardPop{
    0%{ opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    45%{ opacity: 1; transform: translate(-50%, -68%) scale(1.06); }
    100%{ opacity: 1; transform: translate(-50%, -82%) scale(1); }
}

.chest-open-rewards-panel{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: rgba(2,6,23,.75);
    border: 1px solid rgba(148,163,184,.14);
    animation: panelSlideUp .45s cubic-bezier(.34,1.2,.64,1) both;
}

.chest-open-rewards-panel[hidden]{ display: none !important; }

@keyframes panelSlideUp{
    from{ opacity: 0; transform: translateY(16px); }
    to{ opacity: 1; transform: translateY(0); }
}

.chest-open-rewards-head{
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(148,163,184,.9);
    text-align: center;
}

.chest-open-rewards-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.chest-open-reward-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(15,23,42,.8);
    border: 1px solid rgba(148,163,184,.12);
    opacity: 0;
    transform: translateY(12px) scale(.92);
    animation: rewardCardIn .4s cubic-bezier(.34,1.25,.64,1) forwards;
}

.chest-open-reward-card:nth-child(1){ animation-delay: .05s; }
.chest-open-reward-card:nth-child(2){ animation-delay: .12s; }
.chest-open-reward-card:nth-child(3){ animation-delay: .19s; }
.chest-open-reward-card:nth-child(4){ animation-delay: .26s; }

@keyframes rewardCardIn{
    to{ opacity: 1; transform: translateY(0) scale(1); }
}

.chest-open-reward-card--coins{ border-color: rgba(250,204,21,.3); }
.chest-open-reward-card--tickets{ border-color: rgba(56,189,248,.3); }
.chest-open-reward-card--stars{ border-color: rgba(167,139,250,.35); }
.chest-open-reward-card--swoop{ border-color: rgba(34,211,238,.3); }

.chest-open-reward-ic{
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.chest-open-reward-ic-emoji{
    font-size: 28px;
    line-height: 1;
}

.chest-open-reward-val{
    font-size: 16px;
    font-weight: 900;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.chest-open-reward-lbl{
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(148,163,184,.85);
}

.chest-open-rewards-extra{
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #fde68a;
    min-height: 0;
}

.chest-open-rewards-extra:empty{
    display: none;
}

.chest-open-claim-btn{
    margin-top: 2px;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}

#chest-open-modal .modal-title-row{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

#chest-open-modal .modal-title-col{
    flex: 1;
    min-width: 0;
}

#chest-open-modal .modal-x{
    margin-left: auto !important;
    flex-shrink: 0;
}

#chest-open-modal .modal-subtitle.is-hidden{
    display: none;
}

.chest-open-claim-btn:not(:disabled){
    background: linear-gradient(135deg, #22d3ee, #6366f1) !important;
    border: none !important;
    color: #0f172a !important;
    font-weight: 900 !important;
}

.chest-open-stage.r-common #chest-open-aura.is-glow{
    background: radial-gradient(circle at 50% 40%, rgba(148,163,184,.35), transparent 60%);
}
.chest-open-stage.r-rare #chest-open-aura.is-glow{
    background: radial-gradient(circle at 50% 40%, rgba(59,130,246,.45), transparent 60%);
}
.chest-open-stage.r-epic #chest-open-aura.is-glow{
    background: radial-gradient(circle at 50% 40%, rgba(168,85,247,.5), transparent 60%);
}
.chest-open-stage.r-legendary #chest-open-aura.is-glow{
    background: radial-gradient(circle at 50% 40%, rgba(250,204,21,.55), rgba(245,158,11,.2), transparent 65%);
}

.chest-open-chest.is-in{
    animation: chestPopIn .35s cubic-bezier(.34,1.4,.64,1) both;
}

.chest-open-chest.is-charging{
    animation: chestCharge .7s ease-in-out infinite;
}

.chest-open-chest.is-shaking{
    animation: chestShake .22s ease-in-out infinite;
}

@keyframes chestPopIn{
    from{ transform: scale(.75) translateY(20px); opacity: 0; }
    to{ transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes chestCharge{
    0%, 100%{ filter: brightness(1); transform: scale(1); }
    50%{ filter: brightness(1.15); transform: scale(1.04); }
}

@keyframes chestShake{
    0%, 100%{ transform: translateX(0) rotate(0); }
    25%{ transform: translateX(-4px) rotate(-2deg); }
    75%{ transform: translateX(4px) rotate(2deg); }
}

@keyframes burstBoom{
    0%{ opacity: 0; transform: scale(.15); }
    35%{ opacity: 1; transform: scale(14); }
    100%{ opacity: 0; transform: scale(22); }
}

.top-tabs{
    display:flex;
    gap:10px;
    padding:10px 12px 0;
    border-bottom:1px solid var(--border-default);
}

.top-tab{
    flex:1;
    padding:10px 16px;
    background:transparent;
    border:none;
    border-bottom:2px solid transparent;
    color:var(--text-secondary);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all var(--transition-base);
    text-align:center;
}

.top-tab:hover{
    color:var(--text-primary);
}

.top-tab.top-tab-active{
    color:var(--text-primary);
    border-bottom-color:var(--accent-primary);
}

.top-tabs--modal{
    padding:0 0 8px;
    margin-bottom:8px;
}

.top-content--modal .top-list{
    max-height:min(52vh, 420px);
    padding:0 4px 8px;
}

.profile-leaderboard-btn{
    color:#fff7ed;
    background:linear-gradient(135deg,#f59e0b,#ea580c);
    box-shadow:0 10px 28px rgba(234,88,12,.32);
}

.profile-leaderboard-btn:active{ transform:scale(.98); }

.fr-top-ic--top,
.profile-action-ic--top{
    background:linear-gradient(135deg,rgba(245,158,11,.35),rgba(234,88,12,.25));
}

.top-content{
    position:relative;
    min-height:400px;
}

.top-list{
    display:none;
    padding:12px;
    max-height:calc(100vh - 300px);
    overflow-y:auto;
}

.top-list.top-list-active{
    display:block;
}

.top-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    margin-bottom:8px;
    background:var(--bg-elevated);
    border:1px solid var(--border-default);
    border-radius:var(--radius-md);
    transition:all var(--transition-base);
}

.top-item:hover{
    background:rgba(99,102,241,0.08);
    border-color:var(--border-strong);
}

.top-item.top-item-me{
    background:rgba(99,102,241,0.15);
    border-color:var(--accent-primary);
}

.top-item-rank{
    flex:0 0 40px;
    font-weight:700;
    font-size:16px;
    color:var(--text-primary);
    text-align:center;
}

.top-item-name{
    flex:1;
    font-size:14px;
    color:var(--text-primary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.top-item-value{
    flex:0 0 auto;
    font-weight:600;
    font-size:14px;
    color:var(--accent-primary);
}

.topbar{
    position:relative;
    z-index:5;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.top-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.avatar{
    width:42px; height:42px;
    border-radius:var(--r999);
    overflow:hidden;
    border:2px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 18px rgba(0,0,0,.35);
    flex:0 0 auto;
    background:#111;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}

.user{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}
.user-row{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}
.user-name{
    font-weight:800;
    font-size:16px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:150px;
    letter-spacing:.2px;
}
.vip{
    font-size:7px;
    font-weight:900;
    padding:4px 8px;
    border-radius:var(--r999);
    color:#1b1300;
    background: #ffd76a;
    border:1px solid rgba(0,0,0,.25);
    box-shadow: 0 10px 18px rgba(255,180,0,.12);
    flex:0 0 auto;
}
.user-lvl{
    font-size:12px;
    font-weight:600;
    color: var(--muted);
}

.top-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.pill{
    height:44px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius: var(--r999);
    background: linear-gradient(180deg, var(--glassA), var(--glassB));
    border:1px solid var(--stroke);
    box-shadow: var(--shadow2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.badge img{
    width:30px; height:30px; display:block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.pill-text{display:flex; flex-direction:column; line-height:1.05}
.pill-label{font-size:11px; font-weight:700; color:rgba(238,240,255,.55)}
.pill-value{font-size:14px; font-weight:900}

.pill.plus{
    padding-right:6px;
}
.pill-btn{
    width:30px; height:30px;
    border-radius:var(--r999);
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color:var(--text);
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(0,0,0,.25);
    transition: transform .08s ease, background .12s ease;
}
.pill-btn:active{transform:scale(.96)}
.pill-btn:hover{background: rgba(255,255,255,.12)}
.pill-btn span{font-size:18px; font-weight:900; transform: translateY(-1px);}

:root{
    --hdr-gap: clamp(6px, 2vw, 10px);

    --pill-h: clamp(34px, 6.2vw, 44px);
    --pill-w: clamp(92px, 24vw, 132px);

    --badge-sz: clamp(22px, 5vw, 30px);
    --pill-pad-x: clamp(8px, 2.2vw, 10px);
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--hdr-gap);
    min-width:0;
}

.top-left{
    flex: 1 1 auto;
    min-width:0;
}

.top-right{
    flex: 0 1 auto;       
    min-width:0;
    display:flex;
    align-items:center;
    gap: var(--hdr-gap);
}

.user-name{
    max-width: clamp(90px, 34vw, 170px);
}

.pill{
    height: var(--pill-h);
    width: var(--pill-w);        
    flex: 0 1 var(--pill-w);
    min-width:0;

    display:flex;
    align-items:center;
    gap: clamp(6px, 2vw, 10px);
    padding: 6px var(--pill-pad-x);
}

.badge{ flex:0 0 auto; }
.badge img{
    width: var(--badge-sz);
    height: var(--badge-sz);
}

.pill-text{
    flex: 1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.pill-label{
    font-size: clamp(10px, 2.4vw, 11px);
}

.pill-value{
    font-size: clamp(12px, 2.8vw, 14px);
    font-weight:900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.pill-btn{
    flex:0 0 auto;
    width: calc(var(--pill-h) - 10px);
    height: calc(var(--pill-h) - 10px);
}

@media (max-width: 340px){
    .top-right{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

:root{
    --pill-w: clamp(92px, 22vw, 132px);   
    --pill-h: clamp(34px, 6vw, 44px);
    --badge-sz: clamp(22px, 4.8vw, 30px);
}

.topbar{
    gap: clamp(6px, 2vw, 12px);
    min-width: 0;
    flex-wrap: nowrap; 
}

.top-left{
    flex: 1 1 auto;   
    min-width: 0;
}

.user-name{
    max-width: clamp(90px, 30vw, 150px); 
}

.top-right{
    flex: 0 1 auto;       
    min-width: 0;
    flex-wrap: nowrap;    
    gap: clamp(6px, 2vw, 10px);
}

.pill{
    height: var(--pill-h);

    width: var(--pill-w);         
    flex: 0 1 var(--pill-w);      
    min-width: clamp(76px, 18vw, 110px);

    gap: clamp(6px, 2vw, 10px);
    padding: 6px clamp(8px, 2vw, 10px);
}

.badge img{
    width: var(--badge-sz);
    height: var(--badge-sz);
}

.pill-text{
    min-width: 0;
}

.pill-value{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    font-variant-numeric: tabular-nums;
}

@media (max-width: 380px){
    .pill-label{ display:none; }
    .pill{ padding: 6px 8px; }
}

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

html, body { height: 100%; }

body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    margin: 0;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    font-family: "Paytone One", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

img, picture, video, canvas, svg{
    display: block;
    max-width: 100%;
}

input, button, textarea, select{
    font: inherit;
    color: inherit;
}

button{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

h1,h2,h3,h4,h5,h6,p{ margin: 0; }

ul, ol{
    margin: 0;
    padding: 0;
    list-style: none;
}

a{
    color: inherit;
    text-decoration: none;
}

body { background:#0B0925; }

.app-header-profile{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: calc(8px + env(safe-area-inset-left, 0px));
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
    gap: 12px;
    color:#fff;
    width:100%;
    box-sizing: border-box;
}

.app-header-profile-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width: 0;              
    flex: 1 1 auto;            
}

.app-header-profile-avatar img{
    width:35px;
    height:35px;
    border-radius:50%;
    object-fit: cover;
    max-width: none;  
}

.app-header-profile-userinfo{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width: 0;
}

.app-header-profile-name-row{
    display:flex;
    align-items:center;
    gap:8px;
    min-width: 0;
}

.app-header-profile-name-row .header-privilege-badge{
    flex: 0 0 auto;
    font-size: 8px;
    font-weight: 900;
    padding: 3px 7px;
    letter-spacing: .04em;
    line-height: 1.1;
}

.user-name{
    font-size:14px;
    font-weight:600;
}

#profile-name{
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-lvl{
    font-size:12px;
    opacity:.45;
}

.user-badge{
    font-size:8px;
    font-weight:700;
    padding:2px 6px;
    border-radius:999px;
    background:#898989;
    color:#1b1430;
    line-height:1;
}

.vip-badge{
    font-size:10px;
    font-weight:800;
    padding:2px 6px;
    border-radius:999px;
    background:#facc15;
    color:#1b1430;
    line-height:1;
}

.admin-badge{
    font-size:10px;
    font-weight:800;
    padding:2px 6px;
    border-radius:999px;
    background:red;
    color:#1b1430;
    line-height:1;
}

.app-header-profile-right{
    display:flex;
    align-items:center;
}

.app-header-profile-resources{
    display:flex;
    align-items:center;
    gap:10px;
}

.res-pill{
    display:grid;
    grid-template-columns: 30px 1fr; 
    align-items:center;

    height:35px;
    width:94px;                 
    padding:2px 4px;
    border-radius:999px;
    column-gap:6px;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.05);
}

.res-pill img{
    width:30px;
    height:30px;
    justify-self:center;
    align-self:center;
}

.res-text{
    display:flex;
    flex-direction:column;
    justify-content:center;

    align-items:flex-start;
    text-align:left;

    min-width:0;
    line-height:1.05;
}

.res-label{
    font-size:8px;
    opacity:.3;
}

.res-value{
    font-size:12px;
    font-weight:800;
    font-variant-numeric: tabular-nums; 
}

.res-pill--slot{
    height:52px;
    width:auto;              
    padding:6px 10px;
    column-gap:8px;
    flex: 0 0 auto;          
}

.res-pill--slot img{
    width:34px;
    height:34px;
}

.res-pill--slot .res-label{ font-size:9px; opacity:.35; }
.res-pill--slot .res-value{ font-size:14px; font-weight:900; }

.res-pill--coins{
    background:
            radial-gradient(60px 30px at 50% -6px,
            rgba(255, 170, 60, 0.35) 0%,
            rgba(255, 170, 60, 0.12) 35%,
            rgba(229, 113, 3, 0.012) 70%),

            linear-gradient(180deg,
            rgba(255,255,255,0.06) 0%,
            rgba(229, 113, 3, 0.02) 100%),
            rgba(137, 137, 137, 0.05);
}

.res-pill--stars{
    background:
            radial-gradient(60px 30px at 50% -6px,
            rgba(168, 85, 247, 0.38) 0%,
            rgba(168, 85, 247, 0.14) 35%,
            rgba(133, 29, 198, 0.012) 70%),

            linear-gradient(180deg,
            rgba(255,255,255,0.06) 0%,
            rgba(133, 29, 198, 0.02) 100%),
            rgba(137, 137, 137, 0.05);
}

button.res-pill{
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

button.res-pill:active{
    transform: scale(.97);
}

button.res-pill--stars.is-active,
button.res-pill--stars:focus-visible{
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 6px 18px rgba(133, 29, 198, 0.22);
}

.res-plus{
    width:28px;
    height:28px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.10);
    color:#fff;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
}

.app-main {
    background: rgba(137, 137, 137, 0.05);
    width: 100%;
    border-radius: 25px 25px 0px 0px;

}

.machine{
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.machine-frame{
    width: 100%;
    height: auto;
    display: block;

    transform: translateY(-30px);
}
.slots-wrapper{
    position: absolute;
    top: 32%;        
    left: 10%;
    width: 80%;
    height: 38%;
    pointer-events: none;
    z-index: 15;
}

.slots-clip{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;   
}

.slots, .reel{ height:100%; }

.reel-inner{
    height:auto !important;
    min-height:0 !important;
}

.reel{
    height:100% !important;
}

.machine .reel .cell,
.slots-wrapper .reel .cell{
    height: var(--reel-cell-h, calc(100% / 3));
    flex-shrink:0;
    box-sizing:border-box;
}

.cell-icon{
    width: min(42px, 70%);
    height: min(42px, 70%);
}

.cell{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    text-align:center !important;
}

.cell-icon{
    display:block !important;
    margin:0 auto !important;
    transform: translateX(0) translateY(0) !important;
    left:auto !important;
    right:auto !important;

    width: min(42px, 70%) !important;
    height: min(42px, 70%) !important;
    object-fit: contain !important;
}

.slots{
    width:100%;
    display:flex;
    justify-content:space-between; 
    gap: 20px;
}

.reel{
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;   
}

.cell-icon{
    width: min(40px, 75%);
    height: min(40px, 75%);
    object-fit: contain;
}

.slots-wrapper{

    box-sizing: border-box;
    background: #0B0925;
    border-radius: 12px;
}

.slots{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(4px, 1.2vw, 8px);
}

.slots{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(4px, 1vw, 8px) !important;
    width: 100% !important;
}

.reel{
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.cell{
    width: 100% !important;     
    min-width: 0 !important;
    padding: 0 !important;
}

.cell-icon{
    display:block !important;
    margin: 0 auto !important;
    width: min(60px, 80%) !important;
    height: min(40px, 80%) !important;
    object-fit: contain !important;
}

.slots{
    width: 100% !important;   
    margin: 0 auto !important;
}

.slots-wrapper{
    width: 80% !important;   
    left: 9.6% !important;    
}

.machine{ position: relative !important; }

.machine #win-amount{
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
    z-index: 999;
    pointer-events: none;
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    min-height: 22px;
    line-height: 22px;
    width: max-content;
    max-width: 72%;
}

.machine #win-amount::before{
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 5px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("assets/coin_icon2.png") center / contain no-repeat;
}

.machine #win-amount:empty{ display: none; }
.machine #win-amount:empty::before{ display: none; }

.bottom-nav__panel{
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: var(--nav-panel-h);
    box-sizing: border-box;
    border-radius: var(--nav-top-radius) var(--nav-top-radius) 0 0;
    background: rgba(8, 9, 33, 0.94);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 10px 14px 8px;
    border: 1px solid rgba(148,163,184,0.14);
    border-bottom: none;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.35);
    pointer-events: auto;
}

.nav-item{
    width:20%;
    display:flex;
    flex-direction:column;
    align-items:center;   
    justify-content:center;
    gap:6px;

    text-align:center;    
    color: rgba(24, 24, 76, 0.77);
    font-size:10px;
    text-decoration:none;
}

.nav-item{
    width:20%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    text-decoration:none;
    color:rgba(126, 126, 159, 1);
}

.nav-ico svg { width:32px; height:32px; }
.nav-ico svg, .nav-ico svg *{ fill: rgba(126, 126, 159, 1); }  

.nav-item.is-active{
    color: #c6c6c6;                 
}

.nav-item.is-active .nav-label{
    color:#c6c6c6
}

.nav-item.is-active .nav-ico svg,
.nav-item.is-active .nav-ico svg *{
    fill: rgba(244, 244, 255, 0.77) 
}

.nav-label{
    display:block;
    width:100%;
    text-align:center;
    line-height:1;
}

.nav-item{
    color: rgba(126, 126, 159, 1);
}

.nav-ico svg, .nav-ico svg *{
    fill: rgba(126, 126, 159, 1);
}

.nav-item.is-active{
    color: var(--active, #fff);
}

.nav-item.is-active .nav-label{
    color: var(--active, #fff);
}

.nav-item.is-active .nav-ico svg,
.nav-item.is-active .nav-ico svg *{
    fill: var(--active, #fff) !important; 
}

.coin-test {

    width: 100%;
    height: 45px;
}

.machine{
    position: relative;
}

.machine-ticket-pill{
    position:absolute;

    left:20%;
    top:50%;

    transform:translate(-50%, -50%);

    width:32%;
    height:62%;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6%;

    padding:0 6%;

    box-shadow:
            0 6px 14px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.08);

    overflow:hidden;
}

.machine-ticket-pill img{
    width:22%;
    aspect-ratio:1/1;
    object-fit:contain;
    flex:0 0 auto;
}

.machine-ticket-text{
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;

    line-height:1;
}

.machine-ticket-label{
    font-size:.55vw;
    opacity:.7;
    text-transform:uppercase;
    white-space:nowrap;
}

.machine-ticket-value{
    font-size:.9vw;
    font-weight:900;
    color:#fff;

    white-space:nowrap;
}

.bonus-panel{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%, -50%);

    width:90%;
    height:70%;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6%;

    padding:4px 6px;

    border:1px solid rgba(180,120,255,.35);

    box-shadow:
            0 6px 14px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.08);

    overflow:hidden;
}

.bonus-panel .chest-panel{
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}
.bonus-panel .chest-progress-top-text{
    font-size: 8px;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bonus-panel .chest-farm-repeat-btn,
.bonus-panel .chest-farm-queue-btn{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.2);
    background: rgba(2,6,23,.6);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bonus-panel .chest-farm-repeat-btn:active,
.bonus-panel .chest-farm-queue-btn:active{
    transform: scale(.94);
}

.bonus-panel2{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%, -50%);

    width:14%;
    height:62%;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6%;

    padding:0 6%;

    background:
            linear-gradient(
                    180deg,
                    rgba(90,45,220,.95),
                    rgba(45,20,120,.95)
            );

    border:1px solid rgba(180,120,255,.35);

    box-shadow:
            0 6px 14px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.08);

    overflow:hidden;
}

.shark-mouth-panel{
    position:absolute;

    left:50%;
    top:21%;

    transform:translateX(-50%);

    width:63%;
    height:8.5%;

    z-index:30;

    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.boss-unlock-widget{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    gap:4%;
}

.boss-avatar{
    width:18%;
    aspect-ratio:1/1;

    border-radius:50%;
    overflow:hidden;

    background:rgba(20,20,60,.9);
    border:1px solid rgba(255,255,255,.18);

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;
}

.boss-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.boss-progress-wrap{
    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:4px;
}

.boss-progress-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:clamp(7px, 1.8vw, 10px);
    line-height:1;
    color:rgba(255,255,255,.85);
    text-transform:uppercase;
}

.boss-progress-bar{
    width:100%;
    height:clamp(6px, 1.6vw, 10px);

    border-radius:999px;
    overflow:hidden;

    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.12);
}

.boss-progress-fill{
    height:100%;
    border-radius:999px;

    background:linear-gradient(90deg, #22c55e, #60a5fa, #a855f7);

    box-shadow:
            0 0 10px rgba(96,165,250,.55),
            inset 0 1px 0 rgba(255,255,255,.25);
}

.boss-progress-fill--hp{
    background:linear-gradient(90deg, #ef4444, #f97316, #eab308);
    box-shadow:
            0 0 10px rgba(239,68,68,.45),
            inset 0 1px 0 rgba(255,255,255,.25);
}

.boss-widget-sub{
    font-size:10px;
    line-height:1.2;
    color:rgba(255,255,255,.75);
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.machine--boss-battle .machine-frame{
    filter:drop-shadow(0 0 12px rgba(239,68,68,.35));
}

.machine-bottom-panel{
    position: absolute;

    left: 50%;
    top: 74%;              
    transform: translateX(-50%);

    width: 74%;            
    height: 15.5%;           

    z-index: 20;

    border-radius: 3px;

    background: linear-gradient(
            180deg,
            rgba(18, 28, 95, 1),
            rgba(8, 12, 45, 1)
    );

    border: 1px solid rgba(80, 140, 255, .25);

    box-shadow:
            0 12px 24px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.08);

    display: flex;
    align-items: center;
    justify-content: center;
}

.machine-ticket-label{
    font-size: clamp(7px, 1.8vw, 10px);

    opacity:.7;
    text-transform:uppercase;
    white-space:nowrap;
}

.machine-ticket-value{
    font-size: clamp(11px, 2.8vw, 16px);

    font-weight:900;
    color:#fff;

    white-space:nowrap;
}

.multiplier-btn{
    width:72px;
    height:70px;
    flex:0 0 72px;

    margin-right:0px;

    border:none;
    border-radius:22px;

    cursor:pointer;

    color:#fff;
    font-size:20px;
    font-weight:900;

    background:
            radial-gradient(circle at top left,
            rgba(255,255,255,.18),
            transparent 45%),
            linear-gradient(180deg,
            var(--mult-top, #7c3aed) 0%,
            var(--mult-bot, #5b21b6) 100%);

    border:1px solid var(--mult-accent, rgba(255,255,255,.25));

    box-shadow:
            0 12px 24px rgba(0,0,0,.35),
            0 0 18px var(--mult-glow, transparent),
            inset 0 1px 0 rgba(255,255,255,.15);

    transition:
            transform .12s ease,
            filter .15s ease,
            box-shadow .2s ease,
            background .2s ease,
            border-color .2s ease;

    -webkit-tap-highlight-color: transparent;
}

.multiplier-btn:active{
    transform:scale(.96);
    filter:brightness(.95);
}

.slot-actions{
    width: 100%;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 70px;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 10px;
}

.multiplier-btn{
    width: 56px;
    height: 58px;
    border: 1px solid var(--mult-accent, rgba(56, 189, 248, .4));
    border-radius: 18px;
    background:
            radial-gradient(circle at 35% 20%, var(--mult-glow, rgba(56, 189, 248, .35)), transparent 55%),
            linear-gradient(180deg, var(--mult-top, #0ea5e9), var(--mult-bot, #0369a1));
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    box-shadow:
            0 12px 24px rgba(0,0,0,.42),
            0 0 16px var(--mult-glow, rgba(56, 189, 248, .3)),
            inset 0 1px 0 rgba(255,255,255,.14);
}

#spinBtn.btn-full{
    width: 100% !important;
    max-width: none !important;
    height: 72px;
    border-radius: 18px;
    font-size: 26px;
    letter-spacing: 1px;
}

.autospin-toggle{
    height: 58px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
            radial-gradient(circle at 50% 0%, rgba(34,197,94,.22), transparent 58%),
            linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 12px 24px rgba(0,0,0,.35);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.autospin-toggle input{
    display: none;
}

.autospin-box{
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,.35);
    background: rgba(2,6,23,.65);
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
}

.autospin-toggle input:checked + .autospin-box{
    border-color: rgba(34,197,94,.85);
    background: linear-gradient(135deg, #22c55e, #2dd4bf);
    box-shadow:
            0 0 16px rgba(34,197,94,.45),
            inset 0 1px 0 rgba(255,255,255,.28);
}

.autospin-toggle input:checked + .autospin-box::after{
    content: "\2713";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #04130b;
    font-size: 17px;
    font-weight: 900;
}

.autospin-text{
    margin-top: 4px;
    font-size: 9px;
    line-height: .9;
    text-align: center;
    color: rgba(255,255,255,.82);
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

@media (max-width: 380px){
    .slot-actions{
        grid-template-columns: 50px minmax(0, 1fr) 62px;
        gap: 6px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .multiplier-btn,
    .autospin-toggle{
        height: 54px;
        border-radius: 16px;
    }

    .multiplier-btn{
        width: 50px;
        font-size: 16px;
    }

    #spinBtn.btn-full{
        height: 68px;
        font-size: 24px;
    }

    .autospin-text{
        font-size: 8px;
    }
}

.slot-actions{
    width: 100%;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 10px;
}

.multiplier-btn{
    width: 52px;
    height: 52px;

    border-radius: 20px;
    border: 1px solid var(--mult-accent, rgba(56, 189, 248, .4));

    background:
            radial-gradient(circle at 35% 20%, var(--mult-glow, rgba(56, 189, 248, .3)), transparent 55%),
            linear-gradient(180deg, var(--mult-top, #0ea5e9), var(--mult-bot, #0369a1));

    color: #fff;
    font-size: 20px;
    font-weight: 900;

    box-shadow:
            0 14px 28px rgba(0,0,0,.42),
            0 0 16px var(--mult-glow, rgba(56, 189, 248, .28)),
            inset 0 1px 0 rgba(255,255,255,.12);

    display:flex;
    align-items:center;
    justify-content:center;
}

#spinBtn.btn-full{
    width: 100% !important;
    max-width: none !important;

    height: 76px;
    border-radius: 18px;

    font-size: 28px;
    letter-spacing: 1px;
}

.autospin-toggle{
    width: 52px;
    height: 52px;

    border-radius: 20px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:
            radial-gradient(circle at 50% 0%, rgba(34,197,94,.18), transparent 58%),
            linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));

    border: 1px solid rgba(148,163,184,.18);

    box-shadow:
            0 14px 28px rgba(0,0,0,.38),
            inset 0 1px 0 rgba(255,255,255,.08);

    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
}

.autospin-toggle input{
    display:none;
}

.autospin-box{
    width: 20px;
    height: 20px;

    border-radius: 8px;
    border: 2px solid rgba(255,255,255,.35);

    background: rgba(2,6,23,.65);

    position: relative;
}

.autospin-toggle input:checked + .autospin-box{
    border-color: rgba(34,197,94,.9);
    background: linear-gradient(135deg, #22c55e, #2dd4bf);

    box-shadow:
            0 0 16px rgba(34,197,94,.45),
            inset 0 1px 0 rgba(255,255,255,.24);
}

.autospin-toggle input:checked + .autospin-box::after{
    content:"\2713";

    position:absolute;
    inset:0;

    display:grid;
    place-items:center;

    color:#04130b;
    font-size:16px;
    font-weight:900;
}

.autospin-text{
    margin-top:4px;

    font-size:8px;
    line-height:.9;

    text-align:center;

    color: rgba(255,255,255,.82);
}

@media (max-width:380px){

    .slot-actions{
        grid-template-columns: 58px minmax(0,1fr) 58px;
        gap: 8px;
    }

    .multiplier-btn,
    .autospin-toggle{
        width:58px;
        height:58px;
        border-radius:18px;
    }

    #spinBtn.btn-full{
        height:70px;
        font-size:24px;
    }
}

.spin-cost{
    margin-top: -30px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width: fit-content;
    margin-left:auto;
    margin-right:auto;

    padding: 8px 16px;

    border-radius: 18px;

    background:
            linear-gradient(180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03));

    border:1px solid rgba(148,163,184,.14);

    box-shadow:
            0 10px 22px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.spin-cost img{
    width: 22px;
    height: 22px;
    object-fit: contain;

    filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}

.spin-cost span{
    font-size: 18px;
    font-weight: 900;

    color: #fff;

    letter-spacing: .3px;

    text-shadow:
            0 2px 10px rgba(0,0,0,.45);
}

.spin-regen-hint{
    margin-top: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(148,163,184,.85);
}

.slot-actions{
    transform: translateY(-20px);
}

.side-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.side-action-label{
    font-size:9px;
    line-height:1;
    text-align:center;

    color: rgba(255,255,255,.75);

    text-shadow:
            0 2px 10px rgba(0,0,0,.45);

    letter-spacing:.4px;
}

.autospin-text{
    display:none;
}

.multiplier-btn,
.autospin-toggle{
    width: 52px;
    height: 52px;

    border-radius: 16px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.multiplier-btn{
    font-size:17px;
    font-weight:900;
}

.autospin-toggle{
    position:relative;
}

.slot-actions{
    width:100%;

    display:grid;
    grid-template-columns: 58px minmax(0,1fr) 58px;

    align-items:start;
    gap:10px;

    padding:8px 10px;
}

.side-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.multiplier-btn,
.autospin-toggle{
    width:58px;
    height:58px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    position:relative;

    border:1px solid rgba(148,163,184,.18);

    background:
            linear-gradient(
                    180deg,
                    rgba(255,255,255,.08),
                    rgba(255,255,255,.03)
            );

    box-shadow:
            0 12px 24px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.multiplier-btn{
    color:#fff;

    font-size:18px;
    font-weight:900;

    letter-spacing:.3px;

    text-shadow:
            0 2px 10px rgba(0,0,0,.45);
}

.autospin-toggle{
    cursor:pointer;
}

.autospin-toggle input{
    display:none;
}

.autospin-box{
    width:22px;
    height:22px;

    border-radius:7px;

    border:2px solid rgba(255,255,255,.35);

    background:rgba(2,6,23,.7);

    position:relative;
}

.autospin-toggle input:checked + .autospin-box{
    background: linear-gradient(
            135deg,
            #22c55e,
            #2dd4bf
    );

    border-color:rgba(34,197,94,.95);

    box-shadow:
            0 0 16px rgba(34,197,94,.45);
}

.autospin-toggle input:checked + .autospin-box::after{
    content:"\2713";

    position:absolute;
    inset:0;

    display:grid;
    place-items:center;

    color:#04130b;

    font-size:15px;
    font-weight:900;
}

.side-action-label{
    font-size:8px;
    line-height:1;

    text-align:center;

    color:rgba(255,255,255,.75);

    letter-spacing:.4px;

    text-shadow:
            0 2px 10px rgba(0,0,0,.45);
}

#spinBtn.btn-full{
    width:100%;
    max-width:none;

    height:72px;

    border-radius:18px;

    font-size:26px;
    font-weight:900;

    letter-spacing:1px;
}

.side-action{
    width:58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.multiplier-btn,
.autospin-toggle{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    max-width:58px !important;
    padding:0 !important;

    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}

.multiplier-btn{
    line-height:1;
    font-size:17px;
}

.autospin-box{
    width:22px;
    height:22px;
}

.slot-actions{
    display:grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 58px !important;
    gap:10px !important;
    align-items:start !important;
    padding:8px 10px !important;
}

.side-action{
    width:58px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:6px !important;
}

.side-square:not(.multiplier-btn){
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    max-width:58px !important;
    max-height:58px !important;

    padding:0 !important;
    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
    border:1px solid rgba(148,163,184,.18) !important;

    box-shadow:
            0 12px 24px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#multiplierBtn.multiplier-btn.side-square{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    font-size:17px !important;
    font-weight:900 !important;
    color:#fff !important;
    background:
            radial-gradient(circle at 28% 0%, rgba(255,255,255,.22), transparent 52%),
            linear-gradient(180deg, var(--mult-top, #0ea5e9), var(--mult-bot, #0369a1)) !important;
    border:1px solid var(--mult-accent, rgba(56, 189, 248, .45)) !important;
    box-shadow:
            0 12px 24px rgba(0,0,0,.38),
            0 0 20px var(--mult-glow, rgba(56, 189, 248, .35)),
            inset 0 1px 0 rgba(255,255,255,.14) !important;
}

#multiplierBtn.multiplier-btn[data-mult="100"],
#multiplierBtn.multiplier-btn[data-mult="250"]{
    font-size:13px !important;
}

#multiplierBtn.multiplier-btn[data-mult="20"],
#multiplierBtn.multiplier-btn[data-mult="30"],
#multiplierBtn.multiplier-btn[data-mult="40"],
#multiplierBtn.multiplier-btn[data-mult="50"]{
    font-size:15px !important;
}

.multiplier-btn{
    color:#fff !important;
    font-size:18px !important;
    font-weight:900 !important;
    line-height:1 !important;
}

.autospin-toggle input{
    display:none !important;
}

.autospin-box{
    width:22px !important;
    height:22px !important;
    border-radius:7px !important;
    border:2px solid rgba(255,255,255,.35) !important;
    background:rgba(2,6,23,.7) !important;
}

.side-action-label{
    width:58px !important;
    text-align:center !important;
    font-size:8px !important;
    line-height:1 !important;
    color:rgba(255,255,255,.75) !important;
}

#spinBtn.btn-full{
    width:100% !important;
    max-width:none !important;
    height:72px !important;
}

.spin-cost{
    margin-top:-px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    background:none;
    border:none;
    box-shadow:none;
    padding:0;
}

.spin-cost img{
    width:18px;
    height:18px;
    object-fit:contain;

    filter:
            drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

.spin-cost span{
    font-size:15px;
    font-weight:900;

    color:rgba(255,255,255,.92);

    line-height:1;

    text-shadow:
            0 2px 8px rgba(0,0,0,.55);
}

.multiplier-btn{
    cursor:pointer;

    color:#fff;

    font-size:18px;
    font-weight:900;

    line-height:1;

    transition:
            transform .12s ease,
            background .2s ease,
            box-shadow .2s ease;

    user-select:none;
    -webkit-tap-highlight-color: transparent;
}

.multiplier-btn:active{
    transform:scale(.94);
}

.multiplier-btn.is-active,
#multiplierBtn.multiplier-btn.is-active{
    background:
            radial-gradient(circle at 28% 0%, rgba(255,255,255,.26), transparent 52%),
            linear-gradient(180deg, var(--mult-top, #0ea5e9), var(--mult-bot, #0369a1)) !important;
    border-color: var(--mult-accent, rgba(56, 189, 248, .55)) !important;
    box-shadow:
            0 0 22px var(--mult-glow, rgba(56, 189, 248, .4)),
            0 12px 24px rgba(0,0,0,.4),
            inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.multiplier-btn{
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
}

.multiplier-btn:active{
    transform:scale(.94);
}

.autospin-toggle.is-active,
.autospin-toggle:has(input:checked){
    border-color: rgba(34,197,94,.5) !important;
    background:
            radial-gradient(circle at 50% 0%, rgba(34,197,94,.28), transparent 58%),
            linear-gradient(180deg, rgba(34,197,94,.14), rgba(255,255,255,.04)) !important;
    box-shadow:
            0 0 18px rgba(34,197,94,.32),
            0 12px 24px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.autospin-toggle.is-active .autospin-box,
.autospin-toggle input:checked + .autospin-box{
    border-color: rgba(34,197,94,.95) !important;
    background: linear-gradient(135deg, #22c55e, #2dd4bf) !important;
    box-shadow:
            0 0 14px rgba(34,197,94,.5),
            inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.autospin-toggle.is-active .autospin-box::after,
.autospin-toggle input:checked + .autospin-box::after{
    content: "\2713";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #04130b;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.profile-screen{
    gap: 12px;
    padding: 8px 12px var(--nav-content-gap);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-hero{
    position: relative;
    border-radius: 20px;
    padding: 18px 16px 14px;
    overflow: hidden;
    background:
            radial-gradient(120% 80% at 10% 0%, rgba(99,102,241,.35), transparent 55%),
            radial-gradient(90% 70% at 100% 20%, rgba(212,175,55,.22), transparent 50%),
            linear-gradient(165deg, rgba(15,23,42,.95), rgba(2,6,23,.98));
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

.profile-hero-glow{
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.25), transparent 70%);
    pointer-events: none;
}

.profile-hero-inner{
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-hero-inner--no-avatar{
    justify-content: center;
}

.profile-hero-inner--no-avatar .profile-identity{
    text-align: center;
    align-items: center;
}

.profile-avatar-wrap{
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
}

.profile-avatar-ring{
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 200deg, #d4af37, #6366f1, #22d3ee, #d4af37);
    animation: profile-ring-spin 8s linear infinite;
}

@keyframes profile-ring-spin{
    to { transform: rotate(360deg); }
}

.profile-avatar-img{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(2,6,23,.9);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.profile-level-pill{
    position: absolute;
    right: -4px;
    bottom: -2px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 4px 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #d4af37, #f59e0b);
    color: #1b1430;
    box-shadow: 0 6px 16px rgba(212,175,55,.45);
    line-height: 1;
}

.profile-level-pill-label{
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.profile-level-pill-value{
    font-size: 18px;
    font-weight: 900;
    font-family: "Paytone One", "Signika", sans-serif;
}

.profile-identity{ min-width: 0; flex: 1 1 auto; }

.profile-screen-name{
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Signika", "Open Sans", sans-serif;
}

.profile-screen-username{
    margin-top: 2px;
    font-size: 13px;
    color: rgba(148,163,184,.95);
}

.profile-screen-rank{
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #e0e7ff;
    background: rgba(99,102,241,.25);
    border: 1px solid rgba(99,102,241,.4);
}

#tab-profile .profile-tagline{
    position: relative;
    margin-top: 12px;
    font-size: 12px;
    color: rgba(226,232,240,.65);
    line-height: 1.35;
}

.profile-xp-card{
    padding: 14px;
    border-radius: 16px;
    background: rgba(2,6,23,.72);
    border: 1px solid rgba(148,163,184,.14);
}

.profile-xp-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(226,232,240,.85);
}

.profile-xp-value{
    font-variant-numeric: tabular-nums;
    color: #a5b4fc;
}

.profile-xp-track{
    height: 10px;
    border-radius: 18px;
    background: rgba(15,23,42,.9);
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.12);
}

.profile-xp-fill{
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1, #22d3ee, #a78bfa);
    box-shadow: 0 0 12px rgba(99,102,241,.5);
    transition: width .35s ease;
}

.profile-xp-foot{
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(148,163,184,.8);
}

.profile-stats-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.profile-stat-tile{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(2,6,23,.65);
    border: 1px solid rgba(148,163,184,.12);
}

.profile-stat-tile img{
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.profile-stat-emoji{
    font-size: 26px;
    line-height: 1;
    width: 28px;
    text-align: center;
}

.profile-stat-body{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-stat-label{
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(148,163,184,.85);
}

.profile-stat-value{
    font-size: 15px;
    font-weight: 800;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
}

.profile-stat-tile--coins{ border-color: rgba(250,204,21,.2); }
.profile-stat-tile--tickets{ border-color: rgba(56,189,248,.2); }
.profile-stat-tile--stars{ border-color: rgba(167,139,250,.25); }
.profile-stat-tile--swoop{ border-color: rgba(34,211,238,.2); }

.profile-card{
    padding: 14px;
    border-radius: 16px;
    background: rgba(2,6,23,.72);
    border: 1px solid rgba(148,163,184,.14);
}

.profile-card-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.profile-card-title{
    font-size: 13px;
    font-weight: 800;
    color: #e2e8f0;
}

.profile-card-badge{
    font-size: 12px;
    font-weight: 800;
    color: #67e8f9;
    padding: 2px 8px;
    border-radius: 18px;
    background: rgba(34,211,238,.12);
}

.profile-card-main{
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 8px;
}

.profile-boss-bar{
    height: 8px;
    border-radius: 18px;
    background: rgba(15,23,42,.9);
    overflow: hidden;
}

.profile-boss-fill{
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f97316);
    transition: width .35s ease;
}

.profile-boss-fill.boss-progress-fill--hp{
    background: linear-gradient(90deg, #dc2626, #fb7185);
}

.profile-card-sub{
    margin-top: 6px;
    font-size: 11px;
    color: rgba(148,163,184,.9);
}

.profile-perks{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-perk{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(2,6,23,.55);
    border: 1px solid rgba(148,163,184,.1);
}

.profile-perk-ic{
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.profile-perk-text{
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.profile-perk-label{
    font-size: 11px;
    color: rgba(148,163,184,.9);
}

.profile-perk-value{
    font-size: 13px;
    font-weight: 800;
    color: #f1f5f9;
}

.profile-actions{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.profile-action-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 10px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.profile-action-ic{ font-size: 18px; line-height: 1; }

.profile-action-text,
.profile-daily-btn-text{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-friends-btn{
    color: #f5f3ff;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    box-shadow: 0 10px 28px rgba(99,102,241,.35);
}

.profile-friends-btn:active{ transform: scale(.98); }

.profile-daily-btn{
    color: #0f172a;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 10px 28px rgba(245,158,11,.35);
}

.profile-daily-btn:active{ transform: scale(.98); }

.profile-daily-btn--ready{
    animation: profile-daily-pulse 2s ease-in-out infinite;
}

@keyframes profile-daily-pulse{
    0%, 100% { box-shadow: 0 10px 28px rgba(245,158,11,.35); }
    50% { box-shadow: 0 10px 32px rgba(245,158,11,.55), 0 0 0 3px rgba(251,191,36,.25); }
}

.profile-daily-dot{
    position: absolute;
    top: 10px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,.8);
}

.profile-footer-meta{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(148,163,184,.55);
    padding-bottom: 8px;
}

.profile-player-id{
    font-variant-numeric: tabular-nums;
    color: rgba(148,163,184,.75);
}

.bottom-nav .nav-item{
    position: relative;
}

.nav-inv-badge{
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 18px;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    color: #0f172a;
    background: linear-gradient(135deg, #22d3ee, #6366f1);
    box-shadow: 0 0 10px rgba(34,211,238,.5);
    pointer-events: none;
}

.inventory-screen{
    gap: 12px;
    padding: 8px 12px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.inv-hero{
    position: relative;
    border-radius: 20px;
    padding: 16px;
    overflow: hidden;
    background:
            radial-gradient(100% 80% at 0% 0%, rgba(34,211,238,.28), transparent 55%),
            radial-gradient(80% 60% at 100% 30%, rgba(99,102,241,.25), transparent 50%),
            linear-gradient(165deg, rgba(15,23,42,.95), rgba(2,6,23,.98));
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
}

.inv-hero-glow{
    position: absolute;
    inset: -30% auto auto -20%;
    width: 70%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(34,211,238,.2), transparent 70%);
    pointer-events: none;
}

.inv-hero-top{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.inv-hero-title{
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #f8fafc;
    font-family: "Signika", sans-serif;
}

.inv-hero-sub{
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(148,163,184,.9);
}

.inv-hero-stat{
    text-align: center;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(2,6,23,.55);
    border: 1px solid rgba(34,211,238,.25);
}

.inv-hero-stat-value{
    display: block;
    font-size: 24px;
    font-weight: 900;
    color: #67e8f9;
    line-height: 1.1;
    font-family: "Paytone One", sans-serif;
}

.inv-hero-stat-label{
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(148,163,184,.85);
    letter-spacing: .06em;
}

.inv-hero-chips{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.inv-chip{
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 18px;
    background: rgba(2,6,23,.5);
    border: 1px solid rgba(148,163,184,.15);
    color: rgba(226,232,240,.85);
}

.inv-chip--bonus{
    border-color: rgba(250,204,21,.3);
    color: #fde68a;
}

.inv-farm-card{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(2,6,23,.72);
    border: 1px solid rgba(148,163,184,.14);
}

.inv-farm-card--active{
    border-color: rgba(34,211,238,.35);
    background:
            radial-gradient(80% 100% at 0% 0%, rgba(34,211,238,.12), transparent),
            rgba(2,6,23,.78);
}

.inv-farm-card--empty{
    opacity: .92;
}

.inv-farm-emoji{
    font-size: 36px;
    line-height: 1;
    width: 48px;
    text-align: center;
}

.inv-farm-body{ min-width: 0; }

.inv-farm-title{
    font-size: 14px;
    font-weight: 800;
    color: #f1f5f9;
}

.inv-farm-sub{
    margin-top: 2px;
    font-size: 11px;
    color: rgba(148,163,184,.9);
}

.inv-farm-bar{
    margin-top: 8px;
    height: 6px;
    border-radius: 18px;
    background: rgba(15,23,42,.9);
    overflow: hidden;
}

.inv-farm-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #6366f1);
    transition: width .35s ease;
}

.inv-farm-link{
    border: none;
    background: transparent;
    color: #67e8f9;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 0;
}

.inv-actions{
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 8px;
}

.inv-action-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(2,6,23,.65);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.inv-action-btn:active:not(:disabled){ transform: scale(.98); }

.inv-action-btn:disabled{
    opacity: .45;
    cursor: not-allowed;
}

.inv-action-btn--gold{
    border-color: rgba(250,204,21,.35);
    background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(245,158,11,.12));
    color: #fde68a;
}

.inv-action-ic{ font-size: 14px; line-height: 1; }

.inv-filter-tabs{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    margin-top: 0;
}

.inv-filter-tabs::-webkit-scrollbar{ display: none; }

.inv-screen{ gap: 8px; }
.inv-hero-compact{ margin-bottom: 0; }
.inv-total-badge{ display: none; }
.inv-toolbar{ display: none; }
.inv-tool-btn{ display: none; }

.inv-filter-dot{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 18px;
    background: #22d3ee;
    box-shadow: 0 0 6px rgba(34,211,238,.6);
}

.inv-filter-modal-body{
    gap: 14px !important;
}

.inv-filter-modal-section{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inv-filter-modal-label{
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(148,163,184,.75);
}

.inv-filter-modal-chips{
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.inv-filter-modal-chips--wrap{
    flex-wrap: wrap;
    overflow-x: visible;
}

.inv-filter-modal-chips::-webkit-scrollbar{ display: none; }

.inv-filter-modal-reset{
    align-self: center;
    margin-top: 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(148,163,184,.85);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.inv-filter-modal-reset:active{ color: var(--tab-accent, #5eead4); }

#inv-filter-modal .inv-filter-chip.is-active,
#inv-filter-modal .inv-filter-tabs .is-active,
#inv-filter-modal .inv-chip-btn.is-active{
    border-color: color-mix(in srgb, var(--tab-a) 55%, transparent) !important;
    background: color-mix(in srgb, var(--tab-a) 15%, transparent) !important;
    color: var(--tab-accent, #5eead4) !important;
}

.inv-filter-chip.is-active,
.inv-filter-tabs .is-active{
    border-color: rgba(34,211,238,.55) !important;
    background: rgba(34,211,238,.15) !important;
    color: #a5f3fc !important;
}

.inv-chip-btn{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 11px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(15,23,42,.65);
    color: rgba(226,232,240,.88);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease;
}

.inv-chip-btn--sm{
    min-width: 28px;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 8px;
}

.inv-chip-btn:active{ transform: scale(.97); }

.inv-chip-btn.is-active{
    border-color: rgba(34,211,238,.5);
    background: rgba(34,211,238,.14);
    color: #a5f3fc;
}

.inv-chip-btn.r-common.is-active{ border-color: rgba(148,163,184,.45); background: rgba(148,163,184,.12); color: #e2e8f0; }
.inv-chip-btn.r-rare.is-active{ border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.14); color: #7dd3fc; }
.inv-chip-btn.r-epic.is-active{ border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.14); color: #c4b5fd; }
.inv-chip-btn.r-mythic.is-active{ border-color: rgba(244,114,182,.5); background: rgba(244,114,182,.14); color: #fbcfe8; }
.inv-chip-btn.r-legendary.is-active{ border-color: rgba(250,204,21,.5); background: rgba(250,204,21,.12); color: #fde68a; }

.inv-chip-em{ font-size: 11px; line-height: 1; }

.inv-chest-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.inv-chest-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 112px;
    padding: 8px 8px 9px;
    border-radius: 15px;
    background: rgba(8,12,28,.85);
    border: 1px solid rgba(148,163,184,.12);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.24);
}

.inv-chest-card--clickable{
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.inv-chest-card--clickable:active{
    transform: scale(.97);
}

.inv-chest-card--clickable:focus-visible{
    outline: 2px solid rgba(34,211,238,.55);
    outline-offset: 2px;
}

.inv-chest-card::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: .4;
    pointer-events: none;
    background: radial-gradient(80% 55% at 50% 0%, var(--inv-rarity-glow, rgba(99,102,241,.3)), transparent);
}

.tab-page--inventory .inv-chest-card{
    border-color: color-mix(in srgb, var(--tab-a) 12%, rgba(148,163,184,.12));
}

.tab-page--inventory .inv-chest-card::before{
    background: radial-gradient(80% 55% at 50% 0%, color-mix(in srgb, var(--tab-a) 35%, var(--inv-rarity-glow, rgba(99,102,241,.3))), transparent);
}

.tab-page--inventory .inv-chest-count{
    color: var(--tab-accent, #5eead4);
    border-color: color-mix(in srgb, var(--tab-a) 35%, transparent);
    background: color-mix(in srgb, var(--tab-a) 8%, rgba(2,6,23,.82));
}

.tab-page--inventory .inv-chest-card.r-common{
    --inv-rarity-glow: color-mix(in srgb, var(--tab-a) 30%, rgba(148,163,184,.22));
}

.tab-page--inventory .inv-chest-card.r-rare{
    --inv-rarity-glow: color-mix(in srgb, var(--tab-b) 40%, rgba(56,189,248,.35));
    border-color: color-mix(in srgb, var(--tab-b) 28%, transparent);
}

.tab-page--inventory .inv-chest-card.r-epic{
    --inv-rarity-glow: rgba(167,139,250,.4);
}

.inv-chest-card.r-common{ --inv-rarity-glow: rgba(148,163,184,.22); border-color: rgba(148,163,184,.2); }
.inv-chest-card.r-rare{ --inv-rarity-glow: rgba(56,189,248,.35); border-color: rgba(56,189,248,.32); }
.inv-chest-card.r-epic{ --inv-rarity-glow: rgba(167,139,250,.4); border-color: rgba(167,139,250,.38); }
.inv-chest-card.r-mythic{
    --inv-rarity-glow: rgba(244,114,182,.42);
    border-color: rgba(244,114,182,.4);
    box-shadow: 0 8px 24px rgba(244,114,182,.1);
}
.inv-chest-card.r-legendary{
    --inv-rarity-glow: rgba(250,204,21,.45);
    border-color: rgba(250,204,21,.42);
    box-shadow: 0 8px 24px rgba(250,204,21,.08);
}

.inv-chest-card-head{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    min-height: 16px;
    margin-bottom: 0;
}

.inv-chest-badge{
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 28px);
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-chest-badge.r-common{
    color: #cbd5e1;
    background: rgba(148,163,184,.18);
    border: 1px solid rgba(148,163,184,.22);
}

.inv-chest-badge.r-rare{
    color: #7dd3fc;
    background: rgba(56,189,248,.16);
    border: 1px solid rgba(56,189,248,.28);
}

.inv-chest-badge.r-epic{
    color: #c4b5fd;
    background: rgba(167,139,250,.16);
    border: 1px solid rgba(167,139,250,.3);
}

.inv-chest-badge.r-mythic{
    color: #fbcfe8;
    background: rgba(244,114,182,.16);
    border: 1px solid rgba(244,114,182,.32);
}

.inv-chest-badge.r-legendary{
    color: #fde68a;
    background: rgba(250,204,21,.14);
    border: 1px solid rgba(250,204,21,.32);
}

.inv-chest-card-top{
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.inv-chest-rarity{
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(226,232,240,.75);
}

.inv-chest-count{
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 900;
    color: #67e8f9;
    padding: 2px 6px;
    border-radius: 18px;
    background: rgba(2,6,23,.82);
    border: 1px solid rgba(34,211,238,.28);
    line-height: 1.2;
}

.inv-chest-icon{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 52px;
    padding: 2px 0;
}

.inv-chest-emoji{ font-size: clamp(28px, 9vw, 38px); line-height: 1; }

.inv-chest-img{
    width: 68%;
    height: auto;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.chest-inventory-item-img,
.chest-details-art-img,
.chest-open-badge-img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}

.chest-art-img--lg{
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.modal-badge .chest-details-art-img{
    width: 40px;
    height: 40px;
}

.chest-inventory-item-icon .chest-inventory-item-img{
    width: 36px;
    height: 36px;
}

.inv-chest-foot{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    min-height: 24px;
    padding: 0 2px;
}

.inv-chest-title{
    min-width: 0;
    font-size: 10px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inv-fruit-card{
    --inv-rarity-glow: rgba(52,211,153,.28);
    border-color: rgba(52,211,153,.28);
}
.inv-fruit-badge{
    background: rgba(52,211,153,.16);
    border-color: rgba(52,211,153,.35);
    color: #6ee7b7;
}
.inv-fruit-card .inv-chest-foot{
    flex-direction: column;
    gap: 2px;
    min-height: 30px;
}
.inv-fruit-sub{
    font-size: 9px;
    font-weight: 700;
    color: rgba(110,231,183,.85);
    line-height: 1.2;
}
.inv-fruit-img{
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.inv-chest-theme-dot{
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
    opacity: .9;
}

.inv-chest-open-btn{
    position: relative;
    z-index: 1;
    margin-top: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    background: linear-gradient(135deg, #22d3ee, #6366f1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.inv-chest-open-btn:active{ transform: scale(.98); }

.inv-empty{
    grid-column: 1 / -1;
}

#inv-chest-modal .inv-chest-modal-art{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 280px;
    min-height: 280px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.12);
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(99,102,241,.2), transparent),
        radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.12), transparent),
        rgba(2,6,23,0.65);
    overflow: hidden;
}

#inv-chest-modal .inv-chest-modal-art::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    pointer-events: none;
    background: radial-gradient(80% 60% at 50% 0%, var(--inv-rarity-glow, rgba(99,102,241,.3)), transparent);
}

#inv-chest-modal .inv-chest-modal-art.r-common{ --inv-rarity-glow: rgba(148,163,184,.25); }
#inv-chest-modal .inv-chest-modal-art.r-rare{ --inv-rarity-glow: rgba(56,189,248,.4); }
#inv-chest-modal .inv-chest-modal-art.r-epic{ --inv-rarity-glow: rgba(167,139,250,.45); }
#inv-chest-modal .inv-chest-modal-art.r-mythic{ --inv-rarity-glow: rgba(244,114,182,.48); }
#inv-chest-modal .inv-chest-modal-art.r-legendary{ --inv-rarity-glow: rgba(250,204,21,.5); }

#inv-chest-modal .inv-chest-modal-emoji{
    position: relative;
    z-index: 1;
    font-size: 88px;
    line-height: 1;
}

#inv-chest-modal .inv-chest-modal-img{
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    object-fit: contain;
}

#inv-chest-modal .inv-chest-drop-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    margin: -2px 0 0;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: rgba(148,163,184,.88);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#inv-chest-modal .inv-chest-drop-link:active{
    color: rgba(226,232,240,.95);
}

#inv-chest-modal .inv-chest-drop-link-ic{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(148,163,184,.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    color: rgba(203,213,225,.9);
}

#inv-chest-drop-modal .inv-chest-drop-tags,
#inv-chest-drop-modal .inv-chest-drop-rewards{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#inv-chest-drop-modal .inv-chest-drop-tags{
    flex-direction: row;
    flex-wrap: wrap;
}

#inv-chest-drop-modal .inv-chest-reward-row,
#inv-chest-drop-modal .inv-chest-modal-empty{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(255,255,255,.04);
    font-size: 13px;
    font-weight: 700;
    color: rgba(248,250,252,.92);
}

#inv-chest-drop-modal .inv-chest-modal-empty{
    justify-content: center;
    font-size: 12px;
    color: rgba(148,163,184,.8);
}

#inv-chest-modal .inv-chest-modal-tags,
#inv-chest-modal .inv-chest-modal-rewards{
    display: none;
}

#inv-chest-modal .inv-chest-modal-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 2px;
    flex-shrink: 0;
}

#inv-chest-modal .dr-claim{
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 1000;
    letter-spacing: .02em;
    text-transform: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#inv-chest-modal .dr-claim.is-ready{
    color: #fff;
    background: linear-gradient(95deg, #4f46e5, #7c3aed 40%, #16a34a);
    box-shadow: 0 10px 28px rgba(99,102,241,.4);
}

#inv-chest-modal .dr-claim.inv-chest-open-all.is-ready{
    background: linear-gradient(95deg, #b45309, #eab308 45%, #f59e0b);
    box-shadow: 0 10px 28px rgba(245,158,11,.35);
}

#inv-chest-modal .dr-claim:disabled{
    color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(148,163,184,.12);
    box-shadow: none;
    cursor: default;
}

#inv-chest-modal .dr-claim.is-ready:active:not(:disabled){
    transform: scale(.98);
}

#inv-chest-modal .inv-chest-open-all[hidden]{
    display: none;
}

#inv-chest-modal .inv-chest-modal-actions:has(#inv-chest-open-all[hidden]){
    grid-template-columns: 1fr;
}

#daily-modal .dr-top-brand{
    display: flex;
    align-items: center;
    gap: 8px;
}

#daily-modal .dr-top-ic{
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 18px;
    background: linear-gradient(135deg, rgba(250,204,21,.35), rgba(99,102,241,.3));
    border: 1px solid rgba(250,204,21,.4);
    box-shadow: 0 4px 14px rgba(250,204,21,.2);
}

#daily-modal .dr-top-title{
    font-size: 17px;
    font-weight: 1000;
    color: #f8fafc;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#daily-modal .dr-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

#daily-modal .dr-board{
    position: relative;
    padding: 14px 12px 12px;
    border-radius: 18px;
    border: 1px solid rgba(129,140,248,.2);
    background:
            radial-gradient(90% 70% at 50% 0%, rgba(99,102,241,.18), transparent 60%),
            rgba(2,6,23,.55);
    overflow: hidden;
}

#daily-modal .dr-board-glow{
    position: absolute;
    width: 160px;
    height: 160px;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(129,140,248,.35), transparent 68%);
    pointer-events: none;
    animation: dr-glow-pulse 4s ease-in-out infinite;
}

@keyframes dr-glow-pulse{
    0%, 100%{ opacity: .5; transform: translateX(-50%) scale(.9); }
    50%{ opacity: 1; transform: translateX(-50%) scale(1.05); }
}

#daily-modal .dr-path-block{
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}

#daily-modal .dr-path-rail{
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

#daily-modal .dr-path-fill{
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(90deg, #6366f1, #a78bfa, #facc15);
    box-shadow: 0 0 10px rgba(167,139,250,.5);
    transition: width .4s ease;
}

#daily-modal .dr-days-path{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
}

#daily-modal .dr-node{
    position: relative;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#daily-modal .dr-node-core{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 1000;
    color: #cbd5e1;
    background: rgba(15,23,42,.9);
    border: 2px solid rgba(148,163,184,.35);
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

#daily-modal .dr-node.is-active .dr-node-core,
#daily-modal .dr-node:focus-visible .dr-node-core{
    transform: scale(1.12);
    border-color: #a78bfa;
    box-shadow: 0 0 16px rgba(167,139,250,.45);
}

#daily-modal .dr-node.is-today .dr-node-core{
    border-color: rgba(52,211,153,.7);
    color: #6ee7b7;
    background: rgba(16,185,129,.2);
    animation: dr-today-pulse 2s ease-in-out infinite;
}

@keyframes dr-today-pulse{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(52,211,153,.35); }
    50%{ box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}

#daily-modal .dr-node.is-claimed .dr-node-core{
    border-color: rgba(148,163,184,.5);
    color: #94a3b8;
    background: rgba(30,41,59,.8);
}

#daily-modal .dr-node.is-missed .dr-node-core{
    border-color: rgba(239,68,68,.45);
    color: #fca5a5;
    opacity: .75;
}

#daily-modal .dr-node.is-locked .dr-node-core{
    opacity: .55;
}

#daily-modal .dr-stage{
    position: relative;
    z-index: 1;
    min-height: 108px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.14);
    background: rgba(0,0,0,.28);
    transition: border-color .2s, box-shadow .2s;
}

#daily-modal .dr-stage.is-today{
    border-color: rgba(52,211,153,.35);
    box-shadow: inset 0 0 24px rgba(52,211,153,.08);
}

#daily-modal .dr-stage.is-today.is-claimable{
    border-color: rgba(52,211,153,.55);
    box-shadow:
            inset 0 0 28px rgba(52,211,153,.12),
            0 0 20px rgba(52,211,153,.15);
}

#daily-modal .dr-stage.is-claimed{ opacity: .85; }

#daily-modal .dr-stage.is-missed{
    border-color: rgba(239,68,68,.25);
    opacity: .8;
}

#daily-modal .dr-stage-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

#daily-modal .dr-stage-day{
    font-size: 20px;
    font-weight: 1000;
    color: #e0e7ff;
    letter-spacing: .06em;
}

#daily-modal .dr-stage-tag{
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 8px;
    border-radius: 18px;
    color: #c4b5fd;
    background: rgba(99,102,241,.2);
    border: 1px solid rgba(129,140,248,.3);
}

#daily-modal .dr-stage.is-today .dr-stage-tag{
    color: #6ee7b7;
    background: rgba(16,185,129,.15);
    border-color: rgba(52,211,153,.35);
}

#daily-modal .dr-stage-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}

#daily-modal .dr-tile{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 12px;
    background: rgba(15,23,42,.7);
    border: 1px solid rgba(148,163,184,.12);
}

#daily-modal .dr-tile .ui-res-ic{
    width: 28px;
    height: 28px;
}

#daily-modal .dr-tile .reward-emoji-text{
    font-size: 24px;
    line-height: 1;
}

#daily-modal .dr-tile-val{
    font-size: 13px;
    font-weight: 1000;
    color: #bbf7d0;
}

#daily-modal .dr-tile--coin{ border-color: rgba(250,204,21,.2); }
#daily-modal .dr-tile--ticket{ border-color: rgba(56,189,248,.2); }

#daily-modal .dr-stage-empty{
    text-align: center;
    padding: 16px;
    color: rgba(255,255,255,.3);
    font-weight: 800;
}

#daily-modal .dr-chest-zone{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(250,204,21,.22);
    background: linear-gradient(90deg, rgba(250,204,21,.08), rgba(2,6,23,.4));
    transition: box-shadow .25s, border-color .25s;
}

#daily-modal .dr-chest-zone.is-ready{
    border-color: rgba(250,204,21,.5);
    box-shadow: 0 0 20px rgba(250,204,21,.2);
    animation: dr-chest-ready 2.5s ease-in-out infinite;
}

@keyframes dr-chest-ready{
    0%, 100%{ box-shadow: 0 0 16px rgba(250,204,21,.15); }
    50%{ box-shadow: 0 0 24px rgba(250,204,21,.35); }
}

#daily-modal .dr-chest-visual{
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
}

#daily-modal .dr-chest-glow{
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(250,204,21,.3), transparent 70%);
    pointer-events: none;
}

#daily-modal .dr-chest-emoji{
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}

#daily-modal .dr-chest-info{
    flex: 1;
    min-width: 0;
}

#daily-modal .dr-chest-label{
    display: block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.45);
}

#daily-modal .dr-chest-progress{
    font-size: 15px;
    font-weight: 1000;
    color: #fde68a;
}

#daily-modal .dr-chest-bar{
    margin-top: 4px;
    height: 4px;
    border-radius: 18px;
    background: rgba(0,0,0,.35);
    overflow: hidden;
}

#daily-modal .dr-chest-bar-fill{
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(90deg, #d97706, #facc15);
    transition: width .35s ease;
}

#daily-modal .dr-chest-btn{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1;
    background: rgba(250,204,21,.12);
    border: 1px solid rgba(250,204,21,.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#daily-modal .dr-chest-btn.is-ready{
    background: linear-gradient(145deg, #facc15, #f59e0b);
    box-shadow: 0 6px 18px rgba(250,204,21,.35);
}

#daily-modal .dr-chest-btn.is-done{ opacity: .5; filter: grayscale(.35); }

#daily-modal .dr-chest-btn:disabled:not(.is-done){ opacity: .35; }

#daily-modal .dr-chest-btn:active:not(:disabled){ transform: scale(.94); }

#daily-modal .dr-claim{
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#daily-modal .dr-claim.is-ready{
    color: #fff;
    background: linear-gradient(95deg, #4f46e5, #7c3aed 40%, #16a34a);
    box-shadow: 0 10px 28px rgba(99,102,241,.4);
    animation: dr-claim-shine 2.2s ease-in-out infinite;
}

@keyframes dr-claim-shine{
    0%, 100%{ filter: brightness(1); }
    50%{ filter: brightness(1.08); }
}

#daily-modal .dr-claim.is-wait{
    color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(148,163,184,.12);
    cursor: default;
    text-transform: none;
}

#daily-modal .dr-claim.is-ready:active{ transform: scale(.98); }

#slot-daily-btn{
    position: relative;
}

#slot-daily-btn.is-daily-ready .quick-box{
    box-shadow: 0 0 16px rgba(250,204,21,.45);
    animation: slot-daily-glow 2s ease-in-out infinite;
}

@keyframes slot-daily-glow{
    0%, 100%{ filter: brightness(1); }
    50%{ filter: brightness(1.15); }
}

.slot-daily-dot{
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #facc15;
    border: 2px solid rgba(15,23,42,.9);
    box-shadow: 0 0 8px rgba(250,204,21,.8);
    z-index: 2;
}

.slot-daily-dot.is-on,
.slot-daily-dot:not([hidden]){
    display: block;
}

.slot-daily-dot[hidden]{ display: none !important; }

#tab-shop{
    padding: 10px 12px var(--nav-content-gap);
    background:
            radial-gradient(120% 60% at 50% -10%, rgba(99,102,241,.12), transparent 50%),
            transparent;
}

#tab-shop .shop-hero{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 18px;
    border: 1px solid rgba(129,140,248,.22);
    background:
            radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,.18), transparent 55%),
            linear-gradient(165deg, rgba(15,23,42,.95), rgba(30,27,75,.75));
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
}

#tab-shop .shop-top-switch{
    flex-shrink: 0;
    margin: -10px -12px 4px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(129,140,248,.14);
    background:
            radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,.14), transparent 55%),
            linear-gradient(165deg, rgba(15,23,42,.92), rgba(30,27,75,.78));
}

#tab-shop .shop-slot-subnav--pinned{
    position: sticky;
    top: 0;
    z-index: 31;
    flex-shrink: 0;
    margin: 0 -12px 6px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(129,140,248,.22);
    background:
            radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,.18), transparent 55%),
            linear-gradient(165deg, rgba(15,23,42,.98), rgba(30,27,75,.92));
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#tab-shop .shop-hero--switch,
#tab-tasks .shop-hero--switch{
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#tab-shop .shop-hero-switch,
#tab-tasks .shop-hero-switch{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(129,140,248,.24);
    background: rgba(2,6,23,.45);
}

#tab-shop .shop-slot-subnav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(2,6,23,.35);
}

#tab-shop .shop-slot-subnav.is-hidden{
    display: none;
}

#tab-shop .shop-slot-subnav-btn{
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(226,232,240,.68);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}

#tab-shop .shop-slot-subnav-btn.is-active{
    color: #fff;
    background: rgba(99,102,241,.22);
    box-shadow: inset 0 0 0 1px rgba(129,140,248,.35);
}

#tab-shop .shop-slot-subnav-btn:active{
    transform: scale(.98);
}

#tab-shop .shop-hero-switch-btn,
#tab-tasks .shop-hero-switch-btn{
    height: 42px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(226,232,240,.72);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}

#tab-shop .shop-hero-switch-btn.is-active{
    color: #fff;
    background: linear-gradient(145deg, rgba(99,102,241,.95), rgba(79,70,229,.88));
    box-shadow: 0 8px 20px rgba(99,102,241,.28);
}

#tab-shop .shop-hero-switch-btn:active,
#tab-tasks .shop-hero-switch-btn:active{
    transform: scale(.98);
}

#tab-shop .shop-hero-title{
    margin: 0;
    font-size: 20px;
    font-weight: 1000;
    color: rgba(255,255,255,.96);
    letter-spacing: .02em;
}

#tab-shop .shop-hero-sub{
    margin: 4px 0 0;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    line-height: 1.35;
}

#tab-shop .shop-hero-bal{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(250,204,21,.3);
    background: linear-gradient(145deg, rgba(250,204,21,.12), rgba(2,6,23,.5));
}

#tab-shop .shop-hero-bal-ic{ font-size: 16px; line-height: 1; }

#tab-shop .shop-hero-bal-val{
    font-size: 14px;
    font-weight: 1000;
    color: #fde68a;
}

#tab-shop .shop-tabs{
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 6px;
    margin-bottom: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(2,6,23,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 4;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

#tab-shop .shop-tabs::-webkit-scrollbar{ display: none; }

#tab-shop .shop-tab{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,.55);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    scroll-snap-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

#tab-shop .shop-tab-ic{ font-size: 18px; line-height: 1; }

#tab-shop.screen-active{
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#tab-shop .shop-sections{
    margin-top: 0;
    min-height: 200px;
    flex: 1;
    min-width: 0;
}

#tab-shop .shop-tab.shop-tab-active{
    color: #fff;
    border-color: rgba(129,140,248,.4);
    background:
            radial-gradient(120% 100% at 30% 0%, rgba(99,102,241,.35), transparent 60%),
            rgba(67,56,202,.35);
    box-shadow: 0 8px 20px rgba(99,102,241,.2);
}

#tab-shop .shop-section-head{
    margin-bottom: 10px;
}

#tab-shop .shop-section-title{
    margin: 0;
    font-size: 16px;
    font-weight: 1000;
    color: rgba(255,255,255,.94);
}

#tab-shop .shop-section-sub{
    margin: 4px 0 0;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.48);
}

#tab-shop .slot-subtabs{
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(148,163,184,.1);
}

#tab-shop .slot-subtab{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 8px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.55);
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

#tab-shop .slot-subtab.is-active{
    color: #e0e7ff;
    background: rgba(99,102,241,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

#tab-shop .shop-grid{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#tab-shop .shop-empty{
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,.45);
    border-radius: 16px;
    border: 1px dashed rgba(148,163,184,.2);
    background: rgba(2,6,23,.35);
}

#tab-shop .sc-card.item-card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.16);
    background:
            radial-gradient(140% 100% at 0% 0%, rgba(99,102,241,.12), transparent 55%),
            linear-gradient(165deg, rgba(15,23,42,.96), rgba(30,27,75,.8));
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
}

#tab-shop .sc-card--max{
    opacity: .88;
    border-color: rgba(148,163,184,.12);
}

#tab-shop .sc-glow{
    position: absolute;
    left: 12px;
    top: 12px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(99,102,241,.25);
    filter: blur(14px);
    pointer-events: none;
}

#tab-shop .sc-top{
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    padding: 12px 12px 8px;
}

#tab-shop .sc-icon{
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 26px;
    line-height: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

#tab-shop .sc-main{
    flex: 1;
    min-width: 0;
}

#tab-shop .sc-title-row{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

#tab-shop .sc-title{
    font-size: 14px;
    font-weight: 1000;
    color: rgba(255,255,255,.95);
    line-height: 1.2;
}

#tab-shop .sc-badge{
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 18px;
    background: rgba(52,211,153,.15);
    border: 1px solid rgba(52,211,153,.35);
    color: #a7f3d0;
}

#tab-shop .sc-card--max .sc-badge{
    background: rgba(148,163,184,.12);
    border-color: rgba(148,163,184,.25);
    color: rgba(255,255,255,.6);
}

#tab-shop .sc-level-row{
    margin-top: 6px;
}

#tab-shop .sc-level-text{
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,.55);
}

#tab-shop .sc-lvl-bar{
    margin-top: 4px;
    height: 5px;
    border-radius: 18px;
    background: rgba(0,0,0,.35);
    overflow: hidden;
}

#tab-shop .sc-lvl-fill{
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    transition: width .3s ease;
}

#tab-shop .sc-desc{
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255,255,255,.5);
}

#tab-shop .sc-foot{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(148,163,184,.1);
    background: rgba(0,0,0,.15);
}

#tab-shop .sc-cost{
    font-size: 12px;
    font-weight: 900;
    color: #fde68a;
}

#tab-shop .sc-buy-btn{
    flex-shrink: 0;
    min-width: 100px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    box-shadow: 0 6px 16px rgba(99,102,241,.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#tab-shop .sc-buy-btn:active:not(:disabled){ transform: scale(.97); }

#tab-shop .sc-buy-btn:disabled{
    opacity: .45;
    filter: grayscale(.35);
    cursor: not-allowed;
}

#tab-shop .sc-card--max .sc-buy-btn{
    background: rgba(148,163,184,.2);
    box-shadow: none;
}

#shop-section-bosses .sc-card .sc-glow,
#tab-tasks #shop-section-bosses .sc-card .sc-glow{
    background: rgba(239,68,68,.2);
}

#shop-section-bosses .sc-lvl-fill,
#tab-tasks #shop-section-bosses .sc-lvl-fill{
    background: linear-gradient(90deg, #dc2626, #f97316);
}

#shop-section-bosses .sc-buy-btn,
#tab-tasks #shop-section-bosses .sc-buy-btn{
    background: linear-gradient(90deg, #b91c1c, #ea580c);
    box-shadow: 0 6px 16px rgba(239,68,68,.3);
}

.modal{
    z-index: 10050 !important;
}

.modal.is-open{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

.modal-backdrop{
    background: rgba(2, 6, 23, 0.82) !important;
    backdrop-filter: blur(6px);
}

.modal-shell{
    width: min(100%, 400px) !important;
    margin: 0 auto !important;
    animation: ssModalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes ssModalIn{
    from{ opacity: 0; transform: translateY(12px) scale(0.97); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}

.modal-card{
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-default) !important;
    background: linear-gradient(165deg, #0f172a 0%, #020617 55%, #0b0925 100%) !important;
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.modal-title{
    color: var(--text-primary) !important;
}

.modal-subtitle{
    color: var(--text-muted) !important;
}

.ss-reward-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: rgba(2, 6, 23, 0.55);
}

.ss-reward-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ss-reward-icon{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 18px;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.2);
    flex-shrink: 0;
}

.ss-reward-label{
    font-size: 13px;
    color: var(--text-secondary);
}

.ss-reward-value{
    font-weight: 800;
    font-size: 14px;
    color: var(--accent-warning);
    white-space: nowrap;
}

#boss-victory-modal .bv-card{
    overflow: hidden;
    border-color: rgba(34, 197, 94, 0.35) !important;
    max-height: min(92vh, 680px);
    display: flex;
    flex-direction: column;
}

#boss-victory-modal .bv-hero{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 18px 16px;
    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.14) 0%, transparent 100%);
}

#boss-victory-modal .bv-hero-glow{
    position: absolute;
    inset: -30% 5% auto;
    height: 80%;
    background: radial-gradient(ellipse at 50% 0%, rgba(250, 204, 21, 0.35), transparent 68%);
    pointer-events: none;
}

#boss-victory-modal .bv-icon-ring{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #facc15, #22c55e, #16a34a);
    box-shadow: 0 0 28px rgba(34, 197, 94, 0.4);
    margin-bottom: 12px;
    z-index: 1;
}

#boss-victory-modal .bv-icon{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0b0925;
    font-size: 36px;
}

#boss-victory-modal .bv-kicker{
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(134, 239, 172, 0.9);
    margin-bottom: 4px;
}

#boss-victory-modal .bv-title{
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #f0fdf4;
}

#boss-victory-modal .bv-subtitle{
    margin-top: 6px;
    font-size: 12px;
    color: rgba(134, 239, 172, 0.85);
}

#boss-victory-modal .bv-body{
    padding: 16px 18px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

#boss-victory-modal .bv-rewards-title{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

#boss-victory-modal .bv-rewards{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

#boss-victory-modal .bv-empty{
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin: 8px 0 16px;
}

#boss-victory-modal .bv-btn-accept{
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
}

#boss-victory-modal .ss-reward-icon{
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.22);
}

#multiplier-picker-modal .mx-shell{
    max-width: 380px;
}

#multiplier-picker-modal .mx-card{
    overflow: hidden;
    border: 1px solid rgba(167, 139, 250, 0.45);
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(124, 58, 237, 0.35), transparent 55%),
        linear-gradient(168deg, #14102a 0%, #070b18 48%, #050814 100%);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 40px rgba(99, 102, 241, 0.15);
}

#multiplier-picker-modal .mx-hero{
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.18) 0%, transparent 100%);
    overflow: hidden;
}

#multiplier-picker-modal .mx-hero-glow{
    position: absolute;
    inset: -30% 0 auto;
    height: 85%;
    background: radial-gradient(ellipse at 50% 0%, rgba(167, 139, 250, 0.45), transparent 70%);
    pointer-events: none;
}

#multiplier-picker-modal .mx-hero-spark{
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(28px);
    opacity: 0.5;
}

#multiplier-picker-modal .mx-hero-spark--a{
    top: -40px;
    left: -20px;
    background: rgba(56, 189, 248, 0.35);
}

#multiplier-picker-modal .mx-hero-spark--b{
    top: -30px;
    right: -10px;
    background: rgba(250, 204, 21, 0.28);
}

#multiplier-picker-modal .mx-icon{
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.35), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(165, 180, 252, 0.35);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 1;
}

#multiplier-picker-modal .mx-icon-ring{
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    border: 1px solid rgba(250, 204, 21, 0.35);
    animation: mx-icon-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mx-icon-pulse{
    0%, 100%{ opacity: 0.35; transform: scale(1); }
    50%{ opacity: 0.85; transform: scale(1.04); }
}

#multiplier-picker-modal .mx-hero-text{
    min-width: 0;
    z-index: 1;
}

#multiplier-picker-modal .mx-kicker{
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(196, 181, 253, 0.95);
    font-weight: 700;
}

#multiplier-picker-modal .mx-title{
    margin: 3px 0 0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #f8fafc;
    text-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
}

#multiplier-picker-modal .mx-subtitle{
    margin-top: 5px;
    font-size: 11px;
    color: rgba(148, 163, 184, 0.95);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

#multiplier-picker-modal .mx-close{
    align-self: start;
    z-index: 2;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

#multiplier-picker-modal .mx-body{
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#multiplier-picker-modal .mx-preview,
#multiplier-picker-modal .mx-grid,
#multiplier-picker-modal .mx-hint{
    width: 100%;
}

#multiplier-picker-modal .mx-preview{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(250, 204, 21, 0.22);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(99, 102, 241, 0.1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#multiplier-picker-modal .mx-preview-label,
#multiplier-picker-modal .mx-preview-cost-label{
    display: block;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.9);
    font-weight: 700;
}

#multiplier-picker-modal .mx-preview-value{
    display: block;
    margin-top: 2px;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: #fde68a;
    text-shadow: 0 0 18px rgba(250, 204, 21, 0.45);
}

#multiplier-picker-modal .mx-preview-side{
    text-align: right;
    padding-left: 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#multiplier-picker-modal .mx-preview-cost{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 800;
    color: #e2e8f0;
}

#multiplier-picker-modal .mx-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 14px;
}

#multiplier-picker-modal .mx-opt{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 72px;
    padding: 10px 6px 8px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    -webkit-tap-highlight-color: transparent;
    animation: mx-opt-in 0.35s ease backwards;
    animation-delay: calc(var(--mx-i, 0) * 45ms);
}

@keyframes mx-opt-in{
    from{ opacity: 0; transform: translateY(8px) scale(0.96); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}

#multiplier-picker-modal .mx-opt-shine{
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.5s ease;
    pointer-events: none;
}

#multiplier-picker-modal .mx-opt:not(:disabled):hover .mx-opt-shine{
    transform: translateX(120%);
}

#multiplier-picker-modal .mx-opt-ring{
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

#multiplier-picker-modal .mx-opt-value{
    position: relative;
    z-index: 1;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #f1f5f9;
    line-height: 1;
}

#multiplier-picker-modal .mx-opt[data-mult="100"] .mx-opt-value,
#multiplier-picker-modal .mx-opt[data-mult="250"] .mx-opt-value{
    font-size: 17px;
}

#multiplier-picker-modal .mx-opt-tier{
    position: relative;
    z-index: 1;
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.85);
}

#multiplier-picker-modal .mx-opt-tickets{
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    padding: 2px 7px;
    border-radius: 18px;
    font-size: 10px;
    font-weight: 800;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

#multiplier-picker-modal .mx-opt-badge{
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    padding: 2px 5px;
    border-radius: 6px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #052e16;
    background: linear-gradient(180deg, #4ade80, #22c55e);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.45);
}

#multiplier-picker-modal .mx-opt.is-active{
    border-color: var(--mx-accent, rgba(250, 204, 21, 0.55));
    background: linear-gradient(155deg, rgba(99, 102, 241, 0.4), rgba(15, 23, 42, 0.92));
    box-shadow:
        0 0 0 1px var(--mx-accent, rgba(250, 204, 21, 0.35)),
        0 10px 24px var(--mx-glow, rgba(99, 102, 241, 0.25));
    transform: translateY(-2px);
}

#multiplier-picker-modal .mx-opt.is-active .mx-opt-ring{
    border-color: var(--mx-accent);
    box-shadow: inset 0 0 20px var(--mx-glow);
}

#multiplier-picker-modal .mx-opt.is-active .mx-opt-value{
    color: var(--mx-text, #fde68a);
    text-shadow: 0 0 14px var(--mx-glow, rgba(250, 204, 21, 0.4));
}

#multiplier-picker-modal .mx-opt.is-active .mx-opt-tier{
    color: var(--mx-text, #fde68a);
    opacity: 0.85;
}

#multiplier-picker-modal .mx-opt:not(:disabled):active{
    transform: scale(0.96);
}

#multiplier-picker-modal .mx-opt.is-disabled{
    opacity: 0.32;
    filter: grayscale(0.35);
    cursor: not-allowed;
}

#multiplier-picker-modal .mx-opt.is-privilege-locked{
    opacity: 0.42;
    filter: grayscale(0.5) saturate(0.6);
}

#multiplier-picker-modal .mx-opt-lock{
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 18px;
    background: rgba(15,23,42,.85);
    border: 1px solid rgba(148,163,184,.25);
    color: #c4b5fd;
    z-index: 2;
    pointer-events: none;
}

#multiplier-picker-modal .mx-hint{
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
    color: rgba(203, 213, 225, 0.92);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

#multiplier-picker-modal .mx-hint b{
    color: #c4b5fd;
    font-weight: 800;
}

#multiplier-picker-modal .mx-hint-ic{
    display: inline-block;
    margin-right: 4px;
    opacity: 0.7;
}

#multiplier-picker-modal .mx-btn-close{
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 45%, #4f46e5 100%);
    box-shadow:
        0 10px 24px rgba(79, 70, 229, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#multiplier-picker-modal .mx-btn-close:active{
    transform: scale(0.98);
    filter: brightness(0.95);
}

.multiplier-btn.is-holding{
    transform: scale(0.94);
    box-shadow:
        0 0 20px rgba(167, 139, 250, 0.55),
        0 0 40px rgba(99, 102, 241, 0.25);
}

@media (prefers-reduced-motion: reduce){
    .modal-shell{ animation: none !important; }
}

.shark-mouth-panel{
    width: 66%;
    height: 9%;
    top: 21%;
    min-height: 38px;
    max-height: 48px;
    padding: 1px 3px;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: stretch;
}

.shark-mouth-panel .boss-farm-panel{
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.boss-farm-panel.is-summon{
    background: transparent;
    border: none;
    box-shadow: none;
}

.boss-farm-panel.is-summon .boss-farm-avatar-ring,
.boss-farm-panel.is-summon .boss-farm-avatar-pulse{
    opacity: 0;
}

.boss-farm-panel.is-summon .boss-farm-avatar-badge{
    display: none;
}

.boss-farm-panel.is-ready,
.boss-farm-panel.boss-unlock-widget--ready{
    background: transparent;
    border: none;
    box-shadow: none;
}

.boss-farm-panel.is-ready .boss-farm-avatar-ring{
    opacity: 1;
    background: conic-gradient(from 200deg, #fbbf24, #f59e0b, #fde68a, #fbbf24);
    animation: bossFarmRingSpin 3s linear infinite;
}

.boss-farm-panel.is-ready .boss-farm-avatar-pulse{
    opacity: 1;
    border-color: rgba(251,191,36,.5);
    animation: bossFarmPulse 1.5s ease-out infinite;
}

.boss-farm-panel.is-ready .boss-farm-avatar-badge{
    display: flex;
    background: linear-gradient(135deg, #facc15, #f97316);
    color: #451a03;
    box-shadow: 0 0 10px rgba(250,204,21,.6);
}

.boss-farm-panel.is-battle{
    background: transparent;
    border: none;
    box-shadow: none;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    padding: 1px 3px;
}

.boss-farm-panel.is-battle .boss-farm-avatar-wrap{
    width: 28px;
    height: 28px;
}

.boss-farm-panel.is-battle .boss-farm-main{
    gap: 2px;
}

.boss-farm-panel.is-battle .boss-pane--battle{
    gap: 1px;
}

.boss-farm-panel.is-battle .boss-farm-avatar-ring{
    opacity: 1;
    background: conic-gradient(from 200deg, #ef4444, #f97316, #fca5a5, #ef4444);
    animation: bossFarmRingSpin 2.2s linear infinite;
}

.boss-farm-panel.is-battle .boss-farm-avatar-pulse{
    opacity: 1;
    border-color: rgba(239,68,68,.5);
    animation: bossFarmPulse 1.1s ease-out infinite;
}

.boss-farm-panel.is-battle .boss-farm-avatar-badge{
    display: none;
}

@keyframes bossFarmRingSpin{
    to{ transform: rotate(360deg); }
}

@keyframes bossFarmPulse{
    0%{ opacity: .75; transform: scale(.94); }
    100%{ opacity: 0; transform: scale(1.1); }
}

.boss-farm-avatar-wrap{
    grid-column: 1;
    position: relative;
    align-self: center;
    justify-self: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.boss-farm-avatar-badge{
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 3;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 1000;
    line-height: 1;
    pointer-events: none;
}

.boss-farm-avatar-ring{
    position: absolute;
    inset: -2px;
    border-radius: 9px;
    background: conic-gradient(from 200deg, #6366f1, #22d3ee, #a855f7, #6366f1);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.boss-farm-avatar-pulse{
    position: absolute;
    inset: -3px;
    border-radius: 10px;
    border: 2px solid rgba(34,211,238,.35);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.boss-farm-avatar{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    border: 1px solid rgba(148,163,184,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.boss-farm-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.boss-farm-main{
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.boss-pane{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.boss-pane[hidden]{
    display: none !important;
}

.boss-pane__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-width: 0;
    line-height: 1.1;
}

.boss-pane__row--muted .boss-pane__tag{
    color: rgba(148,163,184,.75);
}

.boss-pane__name{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 800;
    color: #f8fafc;
}

.boss-pane__lvl{
    flex-shrink: 0;
    font-size: 7px;
    font-weight: 900;
    color: #a5b4fc;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(99,102,241,.2);
    border: 1px solid rgba(99,102,241,.3);
}

.boss-pane__tag{
    flex-shrink: 0;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(165,180,252,.9);
}

.boss-pane__val{
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #c7d2fe;
}

.boss-pane--ready{
    gap: 1px;
}

.boss-ready-hero{
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.boss-ready-hero__text{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.boss-ready-hero__title{
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fde68a;
    line-height: 1.1;
}

.boss-ready-hero__name{
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boss-ready-hero__go{
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #451a03;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    box-shadow: 0 0 10px rgba(250,204,21,.45);
    animation: bossReadyGoPulse 1.2s ease-in-out infinite;
}

.boss-ready-hint{
    display: none;
}

@keyframes bossReadyGoPulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.08); }
}

.boss-battle-spins-badge{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(69,26,3,.45);
    border: 1px solid rgba(250,204,21,.35);
}

.boss-battle-spins-badge__icon{
    font-size: 8px;
    line-height: 1;
}

.boss-battle-spins-badge__val{
    font-size: 8px;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
    color: #fde68a;
    line-height: 1.1;
}

.boss-farm-bar-overlay{
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    pointer-events: none;
    letter-spacing: 0;
}

.boss-farm-panel.is-battle .boss-farm-bar{
    height: 7px;
    min-height: 7px;
    max-height: 7px;
}

.boss-farm-track-wrap{
    flex: 0 0 auto;
    width: 100%;
}

.boss-farm-track-wrap[hidden]{
    display: none !important;
}

.boss-farm-bar{
    position: relative;
    width: 100%;
    height: 7px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(99,102,241,.25);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
}

.boss-farm-panel.is-battle .boss-farm-bar{
    border-color: rgba(239,68,68,.4);
}

.boss-farm-bar-bg{
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.65);
}

.boss-farm-panel.is-summon .boss-farm-bar-bg{
    background: repeating-linear-gradient(
            -45deg,
            rgba(30,41,59,.55) 0,
            rgba(30,41,59,.55) 4px,
            rgba(15,23,42,.4) 4px,
            rgba(15,23,42,.4) 8px
    );
}

.boss-farm-bar-idle{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity .2s ease;
}

.boss-farm-bar-idle-text{
    font-size: 6px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(148,163,184,.45);
}

.boss-farm-panel .boss-progress-fill{
    position: relative;
    z-index: 1;
    height: 100%;
    border-radius: inherit;
    transition: width .4s cubic-bezier(.34,1.1,.64,1);
}

.boss-progress-fill--summon{
    background: linear-gradient(90deg, #4f46e5, #6366f1, #22d3ee);
    box-shadow: 0 0 8px rgba(99,102,241,.4);
}

.boss-progress-fill--ready{
    background: linear-gradient(90deg, #facc15, #f97316, #ef4444) !important;
    box-shadow: 0 0 10px rgba(250,204,21,.45);
}

.boss-farm-panel .boss-progress-fill--hp{
    background: linear-gradient(90deg, #7f1d1d, #ef4444, #fb923c) !important;
    box-shadow: 0 0 10px rgba(239,68,68,.5);
}

.boss-farm-panel.is-battle[data-rarity="rare"] .boss-farm-avatar-ring,
.boss-farm-panel.is-ready[data-rarity="rare"] .boss-farm-avatar-ring,
.boss-farm-panel.is-summon[data-rarity="rare"] .boss-farm-avatar-ring{
    background: conic-gradient(from 200deg, #3b82f6, #60a5fa, #818cf8, #3b82f6);
}

.boss-farm-panel.is-battle[data-rarity="epic"] .boss-farm-avatar-ring,
.boss-farm-panel.is-ready[data-rarity="epic"] .boss-farm-avatar-ring,
.boss-farm-panel.is-summon[data-rarity="epic"] .boss-farm-avatar-ring{
    background: conic-gradient(from 200deg, #a855f7, #ec4899, #c084fc, #a855f7);
}

.boss-farm-panel.is-battle[data-rarity="legendary"] .boss-farm-avatar-ring,
.boss-farm-panel.is-ready[data-rarity="legendary"] .boss-farm-avatar-ring,
.boss-farm-panel.is-summon[data-rarity="legendary"] .boss-farm-avatar-ring{
    background: conic-gradient(from 200deg, #fbbf24, #f59e0b, #fde68a, #fbbf24);
}

.machine-bottom-panel{
    height: 16%;
    top: 74%;
    min-height: 48px;
    padding: 3px 5px;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: stretch;
}

.machine-bottom-panel > .bonus-panel{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    display: block;
}

.machine-bottom-panel .bonus-panel .chest-panel{
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 5px 7px;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.machine-bottom-panel .bonus-panel .chest-panel > *:not(.chest-panel-ambient){
    position: relative;
    z-index: 1;
}

.machine-bottom-panel .chest-farm-icon-btn{
    grid-column: 1;
    grid-row: 1;
    position: relative;
    align-self: center;
    justify-self: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    border-radius: 8px;
    box-shadow: none;
    display: grid;
    place-items: center;
    grid-template: 1fr / 1fr;
    overflow: visible;
}

.machine-bottom-panel .chest-farm-icon-ring,
.machine-bottom-panel .chest-farm-icon-pulse{
    grid-area: 1 / 1;
    place-self: center;
    pointer-events: none;
}

.machine-bottom-panel .chest-farm-icon-ring{
    inset: -2px;
    border-radius: 10px;
}

.machine-bottom-panel .chest-farm-icon-pulse{
    inset: -3px;
    border-radius: 11px;
}

.machine-bottom-panel .chest-farm-icon-btn .pick-plus,
.machine-bottom-panel .chest-farm-icon-btn .pick-emoji{
    grid-area: 1 / 1;
    place-self: center;
    margin: 0;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    transform: none;
    z-index: 1;
}

.machine-bottom-panel .chest-farm-icon-btn .pick-emoji{
    font-size: 20px;
    width: 34px;
    height: 34px;
}

.machine-bottom-panel .chest-farm-icon-btn .pick-emoji .pick-chest-img{
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.4));
}

.machine-bottom-panel .chest-farm-icon-btn .pick-plus{
    width: 18px;
    height: 18px;
    display: none;
    transform: none;
}

.machine-bottom-panel .chest-farm-icon-btn .pick-plus::before{
    width: 18px;
    height: 3px;
}

.machine-bottom-panel .chest-farm-icon-btn .pick-plus::after{
    width: 3px;
    height: 18px;
}

.machine-bottom-panel .chest-farm-icon-btn.is-empty .pick-plus{
    display: block;
}

.machine-bottom-panel .chest-farm-icon-btn.is-selected .pick-emoji{
    display: flex;
}

.machine-bottom-panel .chest-farm-info{
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: clamp(3px, 12%, 6px);
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.machine-bottom-panel .chest-farm-top{
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 0;
}

.machine-bottom-panel .chest-farm-titles{
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.machine-bottom-panel .chest-status{
    font-size: clamp(9px, 2.2vw, 11px);
    font-weight: 800;
    line-height: 1.25;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.machine-bottom-panel .chest-farm-sub{
    display: none !important;
}

.machine-bottom-panel .chest-farm-pct{
    flex: 0 0 auto;
    font-size: clamp(8px, 2vw, 10px);
    padding: 2px 7px;
    min-width: 28px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.machine-bottom-panel .chest-panel.is-idle .chest-farm-pct{
    display: none;
}

.machine-bottom-panel .chest-progress-bar{
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: clamp(10px, 42%, 16px);
    max-height: 18px;
    margin: 0;
    border-radius: 18px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}

.machine-bottom-panel .chest-panel.is-idle .chest-farm-icon-btn .pick-plus{
    animation: chestIdlePlusPulseMachine 2.4s ease-in-out infinite;
}

@keyframes chestIdlePlusPulseMachine{
    0%, 100% { opacity: .78; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.machine-bottom-panel .chest-progress-idle-text{
    font-size: clamp(7px, 1.8vw, 9px);
    letter-spacing: .05em;
}

.machine-bottom-panel .chest-progress-idle-dash{
    display: none;
}

.machine-bottom-panel .chest-farm-meta{
    display: none !important;
}

.machine-bottom-panel .chest-farm-repeat-btn{
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    border-radius: 8px;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1;
    color: rgba(203,213,225,.88);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.machine-bottom-panel .chest-farm-repeat-btn.is-on{
    border-color: rgba(74,222,128,.45);
    background: rgba(74,222,128,.12);
    color: #86efac;
    animation: chestRepeatGlow 2.4s ease-in-out infinite;
}

.machine-bottom-panel .chest-panel.is-ready .chest-farm-pct,
.machine-bottom-panel .chest-panel.is-complete .chest-farm-pct{
    animation: chestPctPop .7s ease;
}

.machine-bottom-panel .chest-farm-queue-btn{
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    border-radius: 8px;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    color: rgba(203,213,225,.88);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.machine-bottom-panel .chest-farm-queue-btn::before{
    content: "";
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.machine-bottom-panel .chest-farm-icon-btn:active,
.machine-bottom-panel .chest-farm-repeat-btn:active,
.machine-bottom-panel .chest-farm-queue-btn:active{
    transform: scale(.96);
}

.machine-bottom-panel .chest-farm-icon-btn:active .pick-plus{
    transform: scale(.9);
}

.machine-bottom-panel .chest-farm-icon-btn:active .pick-emoji{
    transform: scale(.92);
}

.machine--boss-battle .shark-mouth-panel .boss-pane__name{
    color: #fecaca;
}

#shop-section-symbols{
    padding-top: 4px;
}

.sym-shop-head{
    margin-bottom: 14px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    border: 1px solid rgba(129,140,248,.22);
    background:
            radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,.2), transparent 55%),
            linear-gradient(160deg, rgba(15,23,42,.95), rgba(30,27,75,.75));
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
}

.sym-shop-title{
    margin: 0;
    font-size: 17px;
    font-weight: 1000;
    letter-spacing: -.02em;
    color: #fff;
}

.sym-shop-sub{
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    color: rgba(255,255,255,.52);
}

.sym-shop-legend{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(148,163,184,.12);
}

.sym-legend-item{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sym-legend-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148,163,184,.35);
    border: 1px solid rgba(255,255,255,.15);
}

.sym-legend-dot--on{
    background: var(--sym-accent, #4ade80);
    box-shadow: 0 0 8px color-mix(in srgb, var(--sym-accent, #4ade80) 60%, transparent);
}

#symbols-shop.symbols-shop-grid,
#tab-shop #symbols-shop.symbols-shop-grid,
#tab-shop #bosses-symbols-shop.symbols-shop-grid,
#tab-tasks #bosses-symbols-shop.symbols-shop-grid{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#tab-shop .shop-section-head--slot{
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(56,189,248,.18);
    background:
            radial-gradient(120% 100% at 0% 0%, rgba(56,189,248,.12), transparent 55%),
            linear-gradient(135deg, rgba(15,23,42,.85), rgba(30,41,59,.5));
}

#tab-shop .shop-section-head--slot .shop-section-title{
    color: #bae6fd;
}

#tab-shop .shop-section-head--boss,
#tab-tasks .shop-section-head--boss{
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(249,115,22,.25);
    background:
            radial-gradient(120% 100% at 100% 0%, rgba(239,68,68,.14), transparent 55%),
            linear-gradient(135deg, rgba(28,15,12,.9), rgba(42,22,18,.55));
}

#tab-shop .shop-section-head--boss .shop-section-title,
#tab-tasks .shop-section-head--boss .shop-section-title{
    color: #fdba74;
}

#tab-shop .symbols-shop-grid--slot{
    padding: 4px 0 8px;
}

#tab-shop .symbols-shop-grid--boss,
#tab-tasks .symbols-shop-grid--boss{
    padding: 4px 0 8px;
}

.sym-card-title-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.sym-card-title-row .sym-card-name{
    flex: 1;
    min-width: 0;
}

.sym-mode-pill{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 18px;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.sym-mode-pill--slot{
    color: #7dd3fc;
    background: rgba(14,165,233,.15);
    border: 1px solid rgba(56,189,248,.35);
}

.sym-mode-pill--boss{
    color: #fdba74;
    background: rgba(249,115,22,.18);
    border: 1px solid rgba(251,146,60,.4);
}

#bosses-symbols-shop .sym-progress-fill--boss{
    background: linear-gradient(90deg, #f97316, #ef4444);
}

#tab-shop #symbols-shop .sym-progress-fill{
    background: linear-gradient(90deg, #38bdf8, #6366f1);
}

#bosses-symbols-shop .sym-card-next--boss{
    border-color: rgba(249,115,22,.22);
    background: linear-gradient(135deg, rgba(249,115,22,.1), rgba(99,102,241,.08));
}

#bosses-symbols-shop .sym-card-next--boss .sym-next-label{
    color: #fdba74;
}

#tab-shop #symbols-shop .sym-card-next--slot{
    border-color: rgba(56,189,248,.2);
    background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(99,102,241,.06));
}

#tab-shop #symbols-shop .sym-card-next--slot .sym-next-label{
    color: #7dd3fc;
}

#symbols-shop .sym-card,
#bosses-symbols-shop .sym-card{
    --sym-accent: #818cf8;
    --sym-mode-accent: var(--sym-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--sym-mode-accent) 28%, rgba(148,163,184,.18));
    box-shadow:
            0 14px 36px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.06);
    transition: box-shadow .2s ease, border-color .2s ease;
}

#symbols-shop .sym-card--slot{
    --sym-mode-accent: #38bdf8;
    background:
            radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sym-accent) 16%, transparent), transparent 50%),
            radial-gradient(80% 60% at 0% 100%, rgba(56,189,248,.1), transparent 45%),
            linear-gradient(168deg, rgba(10,18,32,.98), rgba(18,32,56,.92));
}

#bosses-symbols-shop .sym-card--boss{
    --sym-mode-accent: #f97316;
    background:
            radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sym-accent) 20%, transparent), transparent 50%),
            radial-gradient(80% 60% at 0% 100%, rgba(239,68,68,.1), transparent 45%),
            linear-gradient(168deg, rgba(24,12,10,.98), rgba(36,18,16,.92));
}

#symbols-shop .sym-card--locked,
#bosses-symbols-shop .sym-card--locked{
    border-style: dashed;
    border-color: rgba(148,163,184,.22);
    opacity: .94;
}

#symbols-shop .sym-card--locked .sym-card-art,
#bosses-symbols-shop .sym-card--locked .sym-card-art{
    filter: grayscale(.65) brightness(.75);
}

#symbols-shop .sym-card--poor .sym-buy-btn,
#bosses-symbols-shop .sym-card--poor .sym-buy-btn{
    opacity: .55;
}

.sym-card-badge--slot{
    color: #0c4a6e;
    background: linear-gradient(135deg, #38bdf8, #818cf8);
}

.sym-card-badge--boss{
    color: #431407;
    background: linear-gradient(135deg, #fb923c, #ef4444);
}

.sym-card-block--slot{
    border-top: 1px solid rgba(56,189,248,.08);
}

.sym-card-block--boss{
    border-top: 1px solid rgba(249,115,22,.1);
    background: rgba(40,12,8,.25);
}

.sym-card-locked-hint--slot{
    border-left: 3px solid rgba(56,189,248,.45);
}

.sym-card-locked-hint--boss{
    border-left: 3px solid rgba(249,115,22,.5);
}

.sym-card-glow{
    position: absolute;
    left: 20px;
    top: 18px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--sym-accent);
    opacity: .22;
    filter: blur(22px);
    pointer-events: none;
}

.sym-card-head{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 10px;
}

.sym-card-art{
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background:
            radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--sym-accent) 35%, transparent), transparent 65%),
            rgba(2,6,23,.65);
    border: 1px solid color-mix(in srgb, var(--sym-accent) 40%, rgba(255,255,255,.08));
    box-shadow:
            0 8px 20px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.1);
}

.sym-card-art-img{
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}

.sym-card-art-emoji{
    font-size: 34px;
    line-height: 1;
}

.sym-card-badge{
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 28px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 1000;
    color: #0f172a;
    background: linear-gradient(135deg, var(--sym-accent), color-mix(in srgb, var(--sym-accent) 70%, #fff));
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

.sym-card-badge--lock{
    color: #94a3b8;
    background: rgba(30,41,59,.95);
    border-color: rgba(148,163,184,.25);
}

.sym-card-meta{
    flex: 1;
    min-width: 0;
}

.sym-card-name{
    margin: 0;
    font-size: 16px;
    font-weight: 1000;
    letter-spacing: -.02em;
    color: #fff;
    text-transform: capitalize;
}

.sym-card-level-row{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.sym-lvl-dots{
    display: flex;
    gap: 4px;
    align-items: center;
}

.sym-lvl-dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(148,163,184,.25);
    border: 1px solid rgba(255,255,255,.1);
    transition: background .2s, transform .2s, box-shadow .2s;
}

.sym-lvl-dot.is-done{
    background: var(--sym-accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--sym-accent) 55%, transparent);
}

.sym-lvl-dot.is-current{
    background: var(--sym-accent);
    transform: scale(1.25);
    box-shadow: 0 0 10px color-mix(in srgb, var(--sym-accent) 70%, transparent);
}

.sym-card-lvl-text{
    font-size: 10px;
    font-weight: 900;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sym-card-progress{
    margin: 0 14px 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.06);
}

.sym-progress-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sym-progress-title{
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.42);
}

.sym-progress-pct{
    font-size: 12px;
    font-weight: 1000;
    color: color-mix(in srgb, var(--sym-accent) 80%, #fff);
}

.sym-progress-track{
    height: 8px;
    border-radius: 18px;
    background: rgba(15,23,42,.9);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}

.sym-progress-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,
    color-mix(in srgb, var(--sym-accent) 85%, #166534),
    var(--sym-accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--sym-accent) 50%, transparent);
    transition: width .35s cubic-bezier(.4,0,.2,1);
}

.sym-progress-foot{
    margin-top: 6px;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,.5);
}

.sym-card-locked-hint{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 14px 10px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(255,255,255,.55);
    background: rgba(0,0,0,.25);
    border: 1px dashed rgba(148,163,184,.2);
}

.sym-locked-ic{
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.sym-card-body{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 14px 10px;
}

.sym-card-block{
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.04);
}

.sym-block-label{
    font-size: 9px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.38);
    margin-bottom: 8px;
}

.sym-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sym-chip{
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 900;
    border: 1px solid transparent;
}

.sym-chip--coin{
    color: #fde68a;
    background: rgba(251,191,36,.12);
    border-color: rgba(251,191,36,.25);
}
.sym-chip--ticket{
    color: #bae6fd;
    background: rgba(56,189,248,.12);
    border-color: rgba(56,189,248,.25);
}
.sym-chip--drop{
    color: #bbf7d0;
    background: rgba(74,222,128,.1);
    border-color: rgba(74,222,128,.22);
}
.sym-chip--mult{
    color: #e9d5ff;
    background: rgba(192,132,252,.12);
    border-color: rgba(192,132,252,.25);
}
.sym-chip--unique{
    color: #fecdd3;
    background: rgba(251,113,133,.12);
    border-color: rgba(251,113,133,.28);
}
.sym-chip--muted{
    color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}

.sym-card-block--effects{
    background: rgba(0,0,0,.12);
    padding: 8px 10px;
}

.sym-effect-empty{
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    line-height: 1.35;
}

.sym-effect-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.sym-eff{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 52px;
    max-width: 72px;
    padding: 5px 6px 4px;
    border-radius: 10px;
    background: rgba(15,23,42,.5);
    border: 1px solid rgba(255,255,255,.08);
    text-align: center;
    cursor: default;
}

.sym-eff--coin{ border-color: rgba(250,204,21,.22); }
.sym-eff--ticket{ border-color: rgba(74,222,128,.22); }
.sym-eff--star{ border-color: rgba(56,189,248,.25); }
.sym-eff--drop{ border-color: rgba(74,222,128,.18); }
.sym-eff--mult{ border-color: rgba(192,132,252,.22); }
.sym-eff--double{ border-color: rgba(251,113,133,.22); }
.sym-eff--boss-dmg,
.sym-eff--boss-flat,
.sym-eff--boss-crit,
.sym-eff--boss-sum,
.sym-eff--boss-mult{
    background: rgba(40,15,10,.45);
}
.sym-eff--boss-dmg{ border-color: rgba(251,146,60,.35); }
.sym-eff--boss-flat{ border-color: rgba(248,113,113,.3); }
.sym-eff--boss-crit{ border-color: rgba(253,224,71,.28); }
.sym-eff--boss-sum{ border-color: rgba(192,132,252,.28); }
.sym-eff--boss-mult{ border-color: rgba(239,68,68,.32); }
.sym-eff--idle{
    opacity: .65;
    border-style: dashed;
}

.sym-eff__ic{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
}

.sym-eff__ic .ui-res-ic--sym-eff{
    width: 14px;
    height: 14px;
}

.sym-eff-emoji{
    font-size: 12px;
    line-height: 1;
}

.sym-eff__label{
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.45);
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sym-eff__val{
    font-size: 9px;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
    color: #f8fafc;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sym-card-next{
    margin: 0 14px 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(99,102,241,.08));
    border: 1px solid rgba(251,191,36,.18);
}

.sym-next-label{
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fde68a;
}

.sym-next-desc{
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    color: rgba(255,255,255,.62);
}

.sym-card-unique{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 14px 10px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    color: #fecdd3;
    background: rgba(244,63,94,.1);
    border: 1px solid rgba(244,63,94,.22);
}

.sym-unique-ic{ font-size: 16px; }

.sym-card-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.22);
}

.sym-price{
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.sym-price-val{
    font-size: 18px;
    font-weight: 1000;
    color: #fde68a;
    letter-spacing: -.02em;
}

.sym-price--low .sym-price-val{
    color: #f87171;
}

.sym-price-unit{
    font-size: 14px;
}

.sym-buy-btn{
    flex: 1;
    max-width: 160px;
    min-height: 42px;
    padding: 10px 16px;
    border: none;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .02em;
    color: #0f172a;
    cursor: pointer;
    background: linear-gradient(135deg, var(--sym-accent), color-mix(in srgb, var(--sym-accent) 65%, #fff));
    box-shadow:
            0 6px 18px color-mix(in srgb, var(--sym-accent) 45%, transparent),
            inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .15s ease, filter .15s ease, opacity .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.sym-buy-btn:active:not(:disabled){
    transform: scale(.96);
}

.sym-buy-btn:disabled{
    cursor: not-allowed;
    filter: grayscale(.4);
}

.sym-buy-btn--slot{
    color: #0c4a6e;
    background: linear-gradient(135deg, #38bdf8, color-mix(in srgb, var(--sym-accent) 55%, #818cf8));
    box-shadow:
            0 6px 18px rgba(56,189,248,.35),
            inset 0 1px 0 rgba(255,255,255,.35);
}

.sym-buy-btn--boss{
    color: #431407;
    background: linear-gradient(135deg, #fb923c, #ef4444);
    box-shadow:
            0 6px 18px rgba(249,115,22,.4),
            inset 0 1px 0 rgba(255,255,255,.3);
}

.sym-card--cherry{ --sym-accent: #fb7185; }
.sym-card--banana{ --sym-accent: #facc15; }
.sym-card--clover{ --sym-accent: #a3e635; }
.sym-card--grape{ --sym-accent: #fb923c; }
.sym-card--chest{ --sym-accent: #c084fc; }
.sym-card--horseshoe{ --sym-accent: #4ade80; }
.sym-card--bar{ --sym-accent: #d97706; }
.sym-card--diamond{ --sym-accent: #fde047; }
.sym-card--seven{ --sym-accent: #f87171; }

.ui-abb{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
}
.ui-abb--sym-eff,
.ui-abb--boss-eff{
    min-width: 1.8em;
    font-size: 8px;
}
.ui-abb--tsk{ min-width: 22px; min-height: 22px; }

.tab-empty__glyph{
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    position: relative;
}
.tab-empty__glyph::after{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 1000;
    color: rgba(255,255,255,.55);
}
.tab-empty__glyph--loading::after{ content: "?"; }
.tab-empty__glyph--error::after{ content: "!"; }
.tab-empty__glyph--empty::after{ content: "?"; }
.tab-empty__glyph--search::after{ content: "?"; }
.tab-empty__glyph--soon::after{ content: "+"; }
.tab-empty__glyph--tasks::after{ content: "T"; }
.tab-empty__glyph--default::after{ content: "?"; }

.sym-card-badge--lock::before{
    content: "";
    display: block;
    width: 10px;
    height: 12px;
    margin: 2px auto 0;
    border-radius: 2px 2px 1px 1px;
    border: 2px solid currentColor;
    border-top: none;
    box-sizing: border-box;
}
.sym-card-badge--lock{
    color: #94a3b8;
    background: rgba(30,41,59,.95);
    min-width: 22px;
    min-height: 22px;
    padding: 0;
}
.sym-locked-ic{
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 2px solid rgba(148,163,184,.5);
    border-top: none;
    display: inline-block;
}
.sym-unique-ic{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #facc15, #f97316);
    flex-shrink: 0;
}
.sym-unique-ic--boss{
    background: linear-gradient(135deg, #fb923c, #ef4444);
}
.sym-card-art-fallback{
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    text-align: center;
    line-height: 1.1;
    padding: 4px;
}

.bc-node-img img,
.bc-detail-avatar-img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}
#tab-tasks .tasks-boss-catalog .bc-node-img{
    display: grid;
    place-items: center;
}
#tab-tasks .tasks-boss-catalog .bc-node-img img{
    width: 32px;
    height: 32px;
}
#tab-tasks .tasks-boss-catalog .bc-node-img--locked,
.bc-avatar-placeholder{
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(15,23,42,.65);
    border: 1px dashed rgba(148,163,184,.35);
    color: rgba(148,163,184,.85);
    font-size: 14px;
    line-height: 1;
}
.bc-detail-avatar-img.bc-avatar-placeholder{
    width: 56px;
    height: 56px;
    font-size: 22px;
    border-radius: 14px;
}
#tab-tasks .tasks-boss-catalog .bc-node--locked .bc-node-name{
    color: rgba(148,163,184,.75);
}

.meta-ic--timer::after{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,.45);
    border-radius: 50%;
    border-top-color: transparent;
}

.tab-hero__icon--challenges,
.tab-hero__icon--inventory,
.profile-perk-ic,
.profile-action-ic,
.fr-top-ic--friends,
.fr-top-ic--top{
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.fr-top-ic--top,
.profile-action-ic--top{
    background: linear-gradient(135deg, rgba(245,158,11,.35), rgba(234,88,12,.25));
    border-color: rgba(245,158,11,.35);
}

.chest-open-chest-img{
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.ui-res-ic--profile-stat{ width: 22px; height: 22px; }
.ui-res-ic--modal-badge{ width: 28px; height: 28px; }
.ui-res-ic--dr-chest{ width: 28px; height: 28px; }
.ui-res-ic--pack{ width: 32px; height: 32px; }
.ui-res-ic--cell-mod{ width: 14px; height: 14px; }

@media (min-width: 400px){
    #symbols-shop.symbols-shop-grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.ui-res-ic{
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;
}
.ui-res-ic--xs{ width: 12px; height: 12px; }
.ui-res-ic--cell{ width: 10px; height: 10px; }
.ui-res-ic--sym-eff{ width: 14px; height: 14px; }
.ui-res-ic--sm{ width: 16px; height: 16px; }
.ui-res-ic--inline{ width: 18px; height: 18px; margin: 0 2px; }
.ui-res-ic--chip{ width: 14px; height: 14px; margin-right: 3px; }
.ui-res-ic--md{ width: 22px; height: 22px; }
.ui-res-ic--lg{ width: 28px; height: 28px; }
.ui-res-ic--reward{ width: 24px; height: 24px; }

#messages .ui-res-ic--inline{
    vertical-align: -3px;
}

.ui-messages {
    position: fixed;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 12000;
    max-width: min(92vw, 340px);
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(6, 10, 28, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ui-messages.is-visible:not(:empty) {
    opacity: 1;
    visibility: visible;
}

.shop-hero-bal-ic,
.meta-ic,
.tp-modal-badge,
.tp-count-ic,
.mx-icon,
.chestshop-bal-ic,
.cs-buy-ic,
.chest-details-reward-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.sym-price-unit{
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.sym-chip{
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.mx-opt-tickets,
.cs-reward{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mod-badge{
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.win-particle-coin{
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}
.win-particle-ic{
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

.reward-emoji,
.ss-reward-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

.reward-fly{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.bi-reward-chip{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#tab-stars-shop.screen-active{
    min-height: 0;
}

.tab-page--stars-shop{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 14px 24px;
}

#tab-stars-shop .ss-shop-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
#tab-stars-shop .ss-shop-title{
    font-weight: 800;
    font-size: 16px;
    margin: 0 0 6px;
}
#tab-stars-shop .ss-shop-sub{
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    opacity: .78;
}
#tab-stars-shop .ss-shop-badge{
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(255,214,90,.25), rgba(255,160,40,.12));
    border: 1px solid rgba(255,200,80,.35);
    color: #ffe9a8;
}

#tab-shield-shop.screen-active{
    min-height: 0;
}

.tab-page--shield-shop{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 14px 24px;
}

.cs-shop-head{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

.cs-shop-head .cr-back-btn{
    margin-top: 2px;
}

.cs-shop-head-text{
    min-width: 0;
}

.cs-shop-title{
    font-weight: 800;
    font-size: 16px;
    margin: 0 0 6px;
}

.cs-shop-sub{
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    opacity: .78;
}

.cs-shop-badge{
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(99, 102, 241, 0.12));
    border: 1px solid rgba(34, 211, 238, 0.35);
    color: #a5f3fc;
}

.cs-shield-active{
    margin-bottom: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(34, 211, 238, 0.35);
}
.cs-shield-active__head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.cs-shield-active__title{
    font-size: 13px;
    font-weight: 800;
    color: #a5f3fc;
}
.cs-shield-active__pct{
    font-size: 11px;
    font-weight: 700;
    color: #67e8f9;
}
.cs-shield-active__bar{
    height: 6px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.8);
    overflow: hidden;
}
.cs-shield-active__fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #6366f1);
    transition: width 0.35s ease;
}
.cs-shield-active__meta{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: 10px;
    color: #94a3b8;
}

.cs-shield-section{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-shield-heading,
.ss-stars-heading{
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.cs-shield-desc{
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(148, 163, 184, 0.95);
}
.cs-shield-packs{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 400px){
    .cs-shield-packs{
        grid-template-columns: repeat(2, 1fr);
    }
    .cs-shield-pack--featured{
        grid-column: 1 / -1;
    }
}
.cs-shield-pack{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(51, 65, 85, 0.55);
}
.cs-shield-pack--featured{
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.08);
}
.cs-shield-pack--disabled{
    opacity: 0.55;
}
.cs-shield-pack-tag{
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    border-radius: 18px;
    background: rgba(34, 211, 238, 0.15);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.3);
}
.cs-shield-pack-title{
    font-size: 14px;
    font-weight: 800;
    color: #f1f5f9;
}
.cs-shield-pack-stats{
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: #94a3b8;
}
.cs-shield-pack-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #f8fafc;
    font-weight: 800;
    cursor: pointer;
}
.cs-shield-pack-btn:disabled{
    background: rgba(51, 65, 85, 0.6);
    cursor: not-allowed;
}
.cs-shield-pack-btn-xtr{
    font-size: 13px;
}
.cs-shield-pack-btn-label{
    font-size: 10px;
    opacity: 0.9;
}

.ss-stars-section{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

#tab-stars-shop .stars-shop-grid{
    display: block;
}
#tab-stars-shop .ss-packs{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 400px){
    #tab-stars-shop .ss-packs{
        grid-template-columns: repeat(2, 1fr);
    }
    #tab-stars-shop .ss-pack--featured{
        grid-column: 1 / -1;
    }
}
#tab-stars-shop .ss-pack{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(40,80,140,.45), rgba(20,30,60,.75));
    border: 1px solid rgba(120,180,255,.22);
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    overflow: hidden;
}
#tab-stars-shop .ss-pack--featured{
    background: linear-gradient(160deg, rgba(80,50,140,.5), rgba(30,20,70,.8));
    border-color: rgba(200,140,255,.35);
}
#tab-stars-shop .ss-pack-glow{
    position: absolute;
    inset: -40% -20% auto auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,220,100,.2), transparent 70%);
    pointer-events: none;
}
#tab-stars-shop .ss-pack-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
}
#tab-stars-shop .ss-pack-tag{
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.15);
}
#tab-stars-shop .ss-pack-emoji{
    font-size: 28px;
    line-height: 1;
}
#tab-stars-shop .ss-pack-stars{
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}
#tab-stars-shop .ss-pack-stars-label{
    font-size: 12px;
    font-weight: 600;
    opacity: .75;
}
#tab-stars-shop .ss-pack-title{
    font-size: 12px;
    opacity: .8;
    margin-top: 2px;
}
#tab-stars-shop .ss-pack-btn{
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    color: #1a1208;
    background: linear-gradient(180deg, #ffe566, #f5b830);
    box-shadow: 0 6px 18px rgba(245,180,40,.45);
}
#tab-stars-shop .ss-pack-btn:active{
    transform: scale(.98);
}
#tab-stars-shop .ss-pack-btn-stars{
    font-size: 15px;
}
#tab-stars-shop .ss-pack-btn-label{
    opacity: .85;
    font-size: 12px;
}

#privileges-modal .pr-shop-sub{
    margin: 0 2px 12px;
    font-size: 12px;
    line-height: 1.35;
    opacity: .78;
}

.vip--vip{
    background: linear-gradient(180deg, #7ee8c8, #2db88a);
    color: #062418;
}
.vip--premium{
    background: linear-gradient(180deg, #c9a8ff, #7b4fd4);
    color: #1a0a30;
}
.vip--lord{
    background: linear-gradient(180deg, #ffe08a, #e85c20);
    color: #2a1200;
    box-shadow: 0 10px 22px rgba(232,92,32,.35);
}

#privileges-modal .pr-active-pill{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
}
#privileges-modal .pr-active-pill--vip{
    border-color: rgba(80,220,160,.45);
    background: linear-gradient(135deg, rgba(46,180,130,.25), rgba(20,60,50,.5));
}
#privileges-modal .pr-active-pill--premium{
    border-color: rgba(180,140,255,.45);
    background: linear-gradient(135deg, rgba(120,80,220,.3), rgba(40,20,80,.55));
}
#privileges-modal .pr-active-pill--lord{
    border-color: rgba(255,180,80,.5);
    background: linear-gradient(135deg, rgba(255,140,40,.28), rgba(80,30,10,.55));
}
#privileges-modal .pr-active-pill-label{
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
}
#privileges-modal .pr-active-pill-value{
    font-size: 11px;
    font-weight: 800;
}
#privileges-modal .pr-packs{
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#privileges-modal .pr-pack{
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 4px 12px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(145deg, rgba(30,45,80,.65), rgba(12,18,36,.9));
    box-shadow: 0 14px 36px rgba(0,0,0,.45);
    overflow: hidden;
}
#privileges-modal .pr-pack--vip{
    border-color: rgba(80,220,170,.28);
}
#privileges-modal .pr-pack--premium{
    border-color: rgba(160,120,255,.35);
    background: linear-gradient(145deg, rgba(55,35,100,.7), rgba(18,12,40,.92));
}
#privileges-modal .pr-pack--lord{
    border-color: rgba(255,170,70,.4);
    background: linear-gradient(145deg, rgba(90,45,20,.75), rgba(30,15,8,.94));
}
#privileges-modal .pr-pack--active{
    box-shadow: 0 0 0 2px rgba(255,220,100,.35), 0 14px 36px rgba(0,0,0,.45);
}
#privileges-modal .pr-pack--locked{
    opacity: .72;
}
#privileges-modal .pr-pack-aura{
    position: absolute;
    top: -30px;
    right: -20px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 68%);
    pointer-events: none;
}
#privileges-modal .pr-pack-crown{
    grid-row: 1 / span 3;
    font-size: 40px;
    line-height: 1;
    align-self: center;
    justify-self: center;
}
#privileges-modal .pr-pack-head{
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#privileges-modal .pr-pack-tier{
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}
#privileges-modal .pr-pack-status{
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 18px;
    background: rgba(120,255,180,.2);
    color: #b8ffd8;
    border: 1px solid rgba(120,255,180,.35);
}
#privileges-modal .pr-pack-title{
    grid-column: 2;
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}
#privileges-modal .pr-pack-sub{
    grid-column: 2;
    margin: 0;
    font-size: 12px;
    opacity: .75;
}
#privileges-modal .pr-pack-bonus{
    grid-column: 2;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 4px 0;
}
#privileges-modal .pr-pack-bonus-val{
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(180deg, #fff6c8, #ffc040);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#privileges-modal .pr-pack--premium .pr-pack-bonus-val{
    background: linear-gradient(180deg, #f0e0ff, #b080ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#privileges-modal .pr-pack-bonus-label{
    font-size: 11px;
    opacity: .8;
}
#privileges-modal .pr-pack-perks{
    grid-column: 1 / -1;
    margin: 8px 0 0;
    padding: 0 0 0 18px;
    font-size: 11px;
    line-height: 1.45;
    opacity: .82;
}
#privileges-modal .pr-pack-perks li{
    margin: 2px 0;
}
#privileges-modal .pr-pack-btn{
    grid-column: 1 / -1;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    cursor: pointer;
    color: #1a1208;
    background: linear-gradient(180deg, #ffe566, #f5b830);
    box-shadow: 0 6px 18px rgba(245,180,40,.4);
}
#privileges-modal .pr-pack-btn:disabled{
    cursor: default;
    opacity: .55;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    box-shadow: none;
}
#privileges-modal .pr-pack-btn--premium:not(:disabled){
    color: #f5eeff;
    background: linear-gradient(180deg, #c9a8ff, #7b4fd4);
    box-shadow: 0 6px 20px rgba(123,79,212,.45);
}
#privileges-modal .pr-pack-btn--lord:not(:disabled){
    color: #2a1200;
    background: linear-gradient(180deg, #ffe08a, #e85c20);
    box-shadow: 0 6px 22px rgba(232,92,32,.5);
}
#privileges-modal .pr-pack-btn:active:not(:disabled){
    transform: scale(.98);
}

#friends-modal.modal.is-open{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    background: rgba(2,6,23,.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#friends-modal .modal-backdrop{
    position: absolute;
    inset: 0;
    z-index: 0;
}
#friends-modal .fr-shell{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    max-height: calc(100dvh - 24px);
}
#friends-modal .fr-modal-card{
    width: 100%;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(139,92,246,.35);
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(139,92,246,.28), transparent 55%),
        radial-gradient(90% 60% at 100% 100%, rgba(99,102,241,.18), transparent 50%),
        linear-gradient(165deg, rgba(22,28,52,.98), rgba(10,14,28,.99));
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
#friends-modal .fr-top{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    flex-shrink: 0;
}
#friends-modal .fr-top-brand{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
#friends-modal .fr-top-ic{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
}
#friends-modal .fr-top-title{
    font-size: 18px;
    font-weight: 900;
}
#friends-modal .fr-refresh-btn{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #e2e8f0;
    font-size: 18px;
    cursor: pointer;
}
#friends-modal .fr-close{
    flex-shrink: 0;
}
#friends-modal .fr-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 14px 16px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#friends-modal .friends-invite-card{
    margin: 0;
}
#friends-modal .fr-link-card{
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
#friends-modal .friends-link-label{
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(199,210,254,.85);
    margin-bottom: 8px;
}
#friends-modal .fr-link-hint{
    margin: 8px 0 0;
    font-size: 11px;
    color: rgba(148,163,184,.85);
}
#friends-modal .friends-link-input.is-copied{
    border-color: rgba(34,197,94,.55);
    box-shadow: 0 0 0 2px rgba(34,197,94,.2);
}
#friends-modal #friends-stats{
    margin: 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    flex-direction: column;
    gap: 10px;
}
#friends-modal .friends-stats-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#friends-modal .friends-stats-label{
    font-size: 12px;
    font-weight: 700;
    color: rgba(199,210,254,.9);
}
#friends-modal .friends-stats-value{
    display: flex;
    align-items: center;
    gap: 8px;
}
#friends-modal .friends-stats-num{
    font-size: 16px;
    font-weight: 800;
    color: #f8fafc;
}
#friends-modal .friends-stats-pill{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
}
#friends-modal .friends-stats-icon{
    width: 16px;
    height: 16px;
    object-fit: contain;
}
#friends-modal .fr-stats-error{
    font-size: 13px;
    color: #fca5a5;
    text-align: center;
}
#friends-modal .fr-list-wrap{
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
#friends-modal .fr-list-head{
    font-size: 12px;
    font-weight: 800;
    color: rgba(199,210,254,.95);
    margin-bottom: 10px;
}
#friends-modal .friends-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}
#friends-modal .friend-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
}
#friends-modal .friend-name{
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
}
#friends-modal .friend-sub{
    font-size: 11px;
    color: rgba(148,163,184,.9);
    margin-top: 2px;
}
#friends-modal .friend-date{
    font-size: 10px;
    color: rgba(148,163,184,.75);
    white-space: nowrap;
}
#friends-modal .btn-friends-icon--share{
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

#tab-tasks .tasks-boss-catalog .bc-filters{
    display: flex;
    gap: 6px;
    padding: 0 12px 10px;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#tab-tasks .tasks-boss-catalog .bc-filter{
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(226,232,240,.9);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
#tab-tasks .tasks-boss-catalog .bc-filter.is-active{
    border-color: rgba(56,189,248,.45);
    background: rgba(14,165,233,.22);
    color: #e0f2fe;
}
#tab-tasks .tasks-boss-catalog .bc-body{
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#tab-tasks .tasks-boss-catalog .bc-map{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 16px;
    -webkit-overflow-scrolling: touch;
}
#tab-tasks .tasks-boss-catalog .bc-track{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#tab-tasks .tasks-boss-catalog .bc-row{
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 72px;
}
#tab-tasks .tasks-boss-catalog .bc-row--right .bc-node{
    margin-left: auto;
    max-width: calc(100% - 8px);
}
#tab-tasks .tasks-boss-catalog .bc-spine{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 72px;
}
#tab-tasks .tasks-boss-catalog .bc-spine-line{
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: calc(100% + 8px);
    background: linear-gradient(180deg, rgba(56,189,248,.35), rgba(99,102,241,.2));
    border-radius: 18px;
}
#tab-tasks .tasks-boss-catalog .bc-spine-dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 1;
    border: 2px solid rgba(15,23,42,.9);
    background: rgba(148,163,184,.5);
}
#tab-tasks .tasks-boss-catalog .bc-spine-dot--defeated{ background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,.5); }
#tab-tasks .tasks-boss-catalog .bc-spine-dot--current{ background: #38bdf8; box-shadow: 0 0 10px rgba(56,189,248,.55); }
#tab-tasks .tasks-boss-catalog .bc-spine-dot--active{ background: #f97316; box-shadow: 0 0 10px rgba(249,115,22,.55); }
#tab-tasks .tasks-boss-catalog .bc-spine-dot--locked{ background: rgba(71,85,105,.8); }
#tab-tasks .tasks-boss-catalog .bc-node{
    display: grid;
    grid-template-columns: 36px 40px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: #f1f5f9;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#tab-tasks .tasks-boss-catalog .bc-node:active{ transform: scale(.98); }
#tab-tasks .tasks-boss-catalog .bc-node.is-selected{
    border-color: rgba(56,189,248,.55);
    box-shadow: 0 0 0 2px rgba(56,189,248,.2);
}
#tab-tasks .tasks-boss-catalog .bc-node--defeated{
    border-color: rgba(34,197,94,.25);
    background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(255,255,255,.04));
}
#tab-tasks .tasks-boss-catalog .bc-node--current,
#tab-tasks .tasks-boss-catalog .bc-node--active{
    border-color: rgba(56,189,248,.4);
    background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(255,255,255,.05));
}
#tab-tasks .tasks-boss-catalog .bc-node--locked{
    opacity: .55;
    filter: grayscale(.35);
}
#tab-tasks .tasks-boss-catalog .bc-node-lvl{
    grid-row: 1 / span 2;
    font-size: 13px;
    font-weight: 900;
    color: rgba(148,163,184,.95);
}
#tab-tasks .tasks-boss-catalog .bc-node-emoji{
    font-size: 28px;
    line-height: 1;
}
#tab-tasks .tasks-boss-catalog .bc-node-name{
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tab-tasks .tasks-boss-catalog .bc-node-badge{
    grid-column: 3;
    font-size: 10px;
    font-weight: 700;
    opacity: .8;
}
#tab-tasks .tasks-boss-catalog .bc-detail{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 14px 16px;
    -webkit-overflow-scrolling: touch;
}
#tab-tasks .tasks-boss-catalog .bc-detail-back{
    border: none;
    background: transparent;
    color: rgba(148,163,184,.95);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 0 10px;
    cursor: pointer;
}
#tab-tasks .tasks-boss-catalog .bc-detail-hero{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
#tab-tasks .tasks-boss-catalog .bc-detail-emoji{
    font-size: 48px;
    line-height: 1;
}
#tab-tasks .tasks-boss-catalog .bc-detail-status{
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 18px;
    margin-bottom: 4px;
}
#tab-tasks .tasks-boss-catalog .bc-detail-status--defeated{
    background: rgba(34,197,94,.2);
    color: #86efac;
}
#tab-tasks .tasks-boss-catalog .bc-detail-status--current,
#tab-tasks .tasks-boss-catalog .bc-detail-status--active{
    background: rgba(56,189,248,.22);
    color: #7dd3fc;
}
#tab-tasks .tasks-boss-catalog .bc-detail-status--locked{
    background: rgba(71,85,105,.35);
    color: #94a3b8;
}
#tab-tasks .tasks-boss-catalog .bc-detail-title{
    margin: 0;
    font-size: 20px;
    font-weight: 900;
}
#tab-tasks .tasks-boss-catalog .bc-detail-level{
    font-size: 12px;
    opacity: .75;
}
#tab-tasks .tasks-boss-catalog .bc-detail-stats{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
#tab-tasks .tasks-boss-catalog .bc-detail-stats .bi-stat,
#tab-tasks .tasks-boss-catalog .bc-detail-rewards .bi-rewards{
    margin-bottom: 0;
}
#tab-tasks .tasks-boss-catalog .bi-stat{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(2,6,23,.5);
}
#tab-tasks .tasks-boss-catalog .bi-stat-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
#tab-tasks .tasks-boss-catalog .bi-stat-icon{
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 16px;
    background: rgba(99,102,241,.14);
    border: 1px solid rgba(99,102,241,.2);
    flex-shrink: 0;
}
#tab-tasks .tasks-boss-catalog .bi-stat-label{
    font-size: 13px;
    color: rgba(229,231,235,.88);
}
#tab-tasks .tasks-boss-catalog .bi-stat-value{
    font-size: 13px;
    font-weight: 800;
    color: #facc15;
    text-align: right;
    white-space: nowrap;
}
#tab-tasks .tasks-boss-catalog .bi-rewards-title{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(148,163,184,.9);
    margin-bottom: 8px;
}
#tab-tasks .tasks-boss-catalog .bi-reward-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#tab-tasks .tasks-boss-catalog .bi-reward-chip{
    padding: 6px 10px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(250,204,21,.12);
    border: 1px solid rgba(250,204,21,.28);
    color: #fde68a;
}
#tab-tasks .tasks-boss-catalog .bc-detail-hint{
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(148,163,184,.9);
}
#tab-tasks .tasks-boss-catalog .bc-detail-actions{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#tab-tasks .tasks-boss-catalog .bc-btn-primary{
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #f8fafc;
    border: none;
    border-radius: 14px;
    padding: 14px;
    font-weight: 800;
}
#tab-tasks .tasks-boss-catalog .bc-btn-ghost{
    background: rgba(255,255,255,.08);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px;
    font-weight: 700;
}

#chest-shop-modal{
    --chest-header-offset: calc(88px + env(safe-area-inset-top, 0px));
}

#chest-shop-modal.modal.is-open{
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding:
        var(--chest-header-offset)
        0
        env(safe-area-inset-bottom, 0px) !important;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: auto;
}

#chest-shop-modal .modal-backdrop{
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#chest-shop-modal .modal-backdrop::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--chest-header-offset);
    background: rgba(2,6,23,.28);
    pointer-events: auto;
}

#chest-shop-modal .modal-shell{
    overflow: hidden !important;
    max-height: 100%;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#chest-shop-modal .modal-shell{
    width: 100% !important;
    max-width: 100% !important;
}

#chest-shop-modal .cs2-shell{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: min(72dvh, 560px);
    min-height: min(72dvh, 560px);
    max-height: min(72dvh, 560px);
    overflow: hidden;
    pointer-events: auto;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#chest-shop-modal .cs2-card{
    touch-action: manipulation;
}

#chest-shop-modal .chest-sym-head{
    touch-action: manipulation;
}

body.modal-open #chest-shop-modal.modal.is-open .cs2-body{
    touch-action: pan-y !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.modal-open #chest-shop-modal.modal.is-open .chest-sym-card{
    touch-action: manipulation;
}

#chest-shop-modal .cs2-card{
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r20);
    border: 1px solid rgba(148,163,184,.22);
    background: linear-gradient(
        180deg,
        rgba(14, 8, 67, 0.72),
        rgba(10, 6, 40, 0.58)
    );
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#chest-shop-modal .chest-sym-head{
    flex-shrink: 0;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--stroke);
    background: rgba(255,255,255,.03);
}

#chest-shop-modal .chest-sym-head-row{
    display: flex;
    align-items: center;
    gap: 10px;
}

#chest-shop-modal .chest-sym-head-row--centered{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 36px;
}

#chest-shop-modal .chest-sym-head-spacer{
    display: none;
}

#chest-shop-modal .chest-sym-head-row--centered .sym-shop-title{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: calc(100% - 80px);
    margin: 0;
    text-align: center;
    pointer-events: none;
}

#chest-shop-modal .chest-sym-head-row--centered .cs2-close{
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

#chest-shop-modal .chest-sym-head .sym-shop-head-text{
    flex: 1;
    min-width: 0;
}

#chest-shop-modal .chest-sym-head .sym-shop-title{
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -.01em;
}

#chest-shop-modal .cs2-close{ flex-shrink: 0; }

#chest-shop-modal .cs2-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#chest-shop-modal .cs2-body::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
}

#chest-shop-modal .cs2-chip{
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(2,6,23,.45);
    color: rgba(226,232,240,.85);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#chest-shop-modal .cs2-chip.is-active,
#chest-shop-modal .cs2-chip.is-active.cs2-chip--all,
#chest-shop-modal .cs2-chip.is-active.cs2-chip--ocean,
#chest-shop-modal .cs2-chip.is-active.cs2-chip--neon,
#chest-shop-modal .cs2-chip.is-active.cs2-chip--abyss,
#chest-shop-modal .cs2-chip.is-active.cs2-chip--sky,
#chest-shop-modal .cs2-chip.is-active.cs2-chip--ancient{
    border-color: rgba(99,102,241,.55);
    background: rgba(99,102,241,.14);
    color: #e0e7ff;
    box-shadow: inset 0 0 0 1px rgba(99,102,241,.12);
}

#chest-shop-modal .cs2-chip-em{
    font-size: 14px;
    line-height: 1;
}

#chest-shop-modal .chest-shop-grid{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px 0;
}

#chest-shop-modal .chest-shop-grid--sections{
    gap: 14px;
}

#chest-shop-modal .chest-sym-section-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#chest-shop-modal .chest-sym-section-lbl{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    padding: 0 2px;
    background: transparent;
    border: none;
    border-radius: 0;
}

#chest-shop-modal .chest-sym-section-title{
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(199,210,254,.9);
}

#chest-shop-modal .chest-sym-section-count{
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
}

#chest-shop-modal .chest-sym-empty{
    text-align: center;
    padding: 28px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

#chest-shop-modal .chest-sym-card.chestcard{
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1.5px solid var(--chest-accent, #818cf8) !important;
    background:
        radial-gradient(88% 72% at 100% 0%, color-mix(in srgb, var(--chest-accent, #818cf8) 24%, transparent), transparent 58%),
        rgba(14, 12, 40, 0.88) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#chest-shop-modal .chest-sym-card.chestcard::before,
#chest-shop-modal .chest-sym-card.chestcard .cs-glow{
    display: none !important;
}

#chest-shop-modal .chest-sym-card-glow{
    position: absolute;
    top: -6px;
    right: -6px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--chest-accent, #818cf8);
    opacity: .32;
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

#chest-shop-modal .chest-sym-card.chestcard::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse 75% 65% at 100% 0%,
        color-mix(in srgb, var(--chest-accent, #818cf8) 28%, transparent),
        transparent 68%
    );
    pointer-events: none;
    z-index: 0;
}

#chest-shop-modal .chest-sym-card--disabled,
#chest-shop-modal .chest-sym-card--locked{
    opacity: .55;
    filter: grayscale(.35) brightness(.72);
}

#chest-shop-modal .chest-sym-card--locked .sym-card-art{
    opacity: .75;
}

#chest-shop-modal .chest-sym-unlock-label{
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(148,163,184,.95);
    letter-spacing: .02em;
}

#chest-shop-modal .chest-sym-card--selected{
    outline: 2px solid rgba(250,204,21,.65);
    outline-offset: -2px;
    box-shadow: 0 0 18px rgba(250,204,21,.12);
}

#chest-shop-modal .chest-sym-selected-badge{
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fde68a;
    background: rgba(250,204,21,.12);
    border: 1px solid rgba(250,204,21,.35);
}

#chest-shop-modal .chest-sym-select-btn{
    position: relative;
    z-index: 6;
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    pointer-events: auto !important;
    cursor: pointer;
    touch-action: manipulation;
}

body.modal-open #chest-shop-modal.modal.is-open .chest-sym-select-btn{
    touch-action: manipulation;
    pointer-events: auto !important;
}

#chest-shop-modal .chest-sym-select-btn--selected{
    pointer-events: none;
    opacity: .92;
    background: rgba(250,204,21,.12);
    border-color: rgba(250,204,21,.35);
    color: #fde68a;
}

#chest-shop-modal .chest-sym-card--disabled{
    opacity: .72;
}

#chest-shop-modal .chest-sym-card--farming-now{
    outline: 2px solid rgba(74,222,128,.55);
    outline-offset: -2px;
    box-shadow: 0 0 16px rgba(74,222,128,.15);
}

#chest-shop-modal .chest-sym-farming-badge,
#chest-shop-modal .chest-sym-next-badge{
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#chest-shop-modal .chest-sym-farming-badge{
    color: #86efac;
    background: rgba(74,222,128,.15);
    border: 1px solid rgba(74,222,128,.35);
}

#chest-shop-modal .chest-sym-farming-label{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #86efac;
    padding: 8px 0;
}

#chest-shop-modal .chest-sym-next-badge{
    color: #c4b5fd;
    background: rgba(129,140,248,.15);
    border: 1px solid rgba(129,140,248,.35);
}

#chest-shop-modal .chest-sym-card--selected-next{
    outline: 2px solid rgba(129,140,248,.55);
    outline-offset: -2px;
}

#chest-shop-modal .chest-shop-hint{
    grid-column: 1 / -1;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(203,213,225,.88);
    background: rgba(129,140,248,.1);
    border: 1px solid rgba(129,140,248,.22);
}

#chest-shop-modal .chest-sym-card--poor{
    opacity: .88;
}

#chest-shop-modal .chest-sym-detail-btn{
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#chest-shop-modal .chest-sym-card .sym-card-head{
    padding: 12px 12px 4px;
}

#chest-shop-modal .chest-sym-card .sym-card-art{
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--chest-accent) 16%, transparent), transparent 65%),
        rgba(255,255,255,.06);
    border: 1px solid color-mix(in srgb, var(--chest-accent) 28%, rgba(255,255,255,.1));
    box-shadow: none;
}

#chest-shop-modal .chest-sym-card .sym-card-art-emoji{
    font-size: 30px;
}

#chest-shop-modal .chest-sym-card .sym-card-art-img{
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}

#chest-shop-modal .chest-sym-card .sym-card-badge{
    font-size: 9px;
    font-weight: 900;
    border-radius: 8px;
    color: #0f172a;
    background: linear-gradient(135deg, var(--sym-accent, #6366f1), color-mix(in srgb, var(--sym-accent, #6366f1) 70%, #fff));
}

#chest-shop-modal .chest-sym-card .sym-chip{
    font-size: 10px;
    border-radius: var(--r999);
}

#chest-shop-modal .chest-sym-card .sym-chip--muted{
    color: color-mix(in srgb, var(--chest-accent) 75%, #fff);
    border-color: color-mix(in srgb, var(--chest-accent) 35%, rgba(255,255,255,.1));
    background: color-mix(in srgb, var(--chest-accent) 14%, rgba(0,0,0,.2));
}

#chest-shop-modal .chest-sym-card .sym-card-name{
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    text-transform: none;
}

#chest-shop-modal .chest-sym-card-foot{
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 12px 14px;
    pointer-events: auto;
    border-top: 1px solid color-mix(in srgb, var(--chest-accent) 18%, rgba(255,255,255,.08));
    background: rgba(0,0,0,.12);
    border-radius: 0 0 calc(var(--r20) - 1px) calc(var(--r20) - 1px);
}

#chest-shop-modal .chest-sym-buy-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: var(--r999) !important;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid transparent;
}

#chest-shop-modal .chest-sym-buy-btn--coins{
    color: #fde68a;
    background: rgba(250,204,21,.12);
    border-color: rgba(250,204,21,.28);
}

#chest-shop-modal .chest-sym-buy-btn--stars{
    color: #fef08a;
    background: rgba(251,191,36,.1);
    border-color: rgba(251,191,36,.25);
}

#chest-shop-modal .chestcard--queue-target{
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--chest-accent) 65%, #fff),
        0 0 0 2px color-mix(in srgb, var(--chest-accent) 35%, transparent),
        0 12px 32px rgba(0,0,0,.4) !important;
}

#chest-shop-modal .chest-sym-card--ocean{
    --chest-accent: #38bdf8;
    box-shadow:
        inset 0 0 0 1.5px rgba(56,189,248,.55),
        0 10px 28px rgba(0,0,0,.35) !important;
}
#chest-shop-modal .chest-sym-card--neon{
    --chest-accent: #c084fc;
    box-shadow:
        inset 0 0 0 1.5px rgba(192,132,252,.55),
        0 10px 28px rgba(0,0,0,.35) !important;
}
#chest-shop-modal .chest-sym-card--abyss{
    --chest-accent: #94a3b8;
    box-shadow:
        inset 0 0 0 1.5px rgba(100,116,139,.5),
        0 10px 28px rgba(0,0,0,.35) !important;
}
#chest-shop-modal .chest-sym-card--sky{
    --chest-accent: #60a5fa;
    box-shadow:
        inset 0 0 0 1.5px rgba(96,165,250,.55),
        0 10px 28px rgba(0,0,0,.35) !important;
}
#chest-shop-modal .chest-sym-card--ancient{
    --chest-accent: #fbbf24;
    box-shadow:
        inset 0 0 0 1.5px rgba(251,191,36,.55),
        0 10px 28px rgba(0,0,0,.35) !important;
}

#chest-queue-modal{
    --chest-header-offset: calc(88px + env(safe-area-inset-top, 0px));
}

#chest-queue-modal.modal.is-open{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding:
        var(--chest-header-offset)
        0
        env(safe-area-inset-bottom, 0px);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#chest-queue-modal .modal-backdrop{
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#chest-queue-modal .modal-backdrop::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--chest-header-offset);
    background: rgba(2,6,23,.28);
    pointer-events: auto;
}

#chest-queue-modal .modal-shell{
    overflow: hidden !important;
    max-height: 100%;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#chest-queue-modal .cs2-shell{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: min(72dvh, 560px);
    min-height: min(72dvh, 560px);
    max-height: min(72dvh, 560px);
    overflow: hidden;
    pointer-events: auto;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#chest-queue-modal .cs2-card{
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r20);
    border: 1px solid rgba(148,163,184,.22);
    background: linear-gradient(
        180deg,
        rgba(14, 8, 67, 0.72),
        rgba(10, 6, 40, 0.58)
    );
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    touch-action: manipulation;
}

#chest-queue-modal .chest-sym-head{
    flex-shrink: 0;
    display: block;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--stroke);
    background: rgba(255,255,255,.03);
    touch-action: manipulation;
}

#chest-queue-modal .chest-sym-head-row{
    display: flex;
    align-items: center;
    gap: 10px;
}

#chest-queue-modal .chest-sym-head .sym-shop-head-text{
    flex: 1;
    min-width: 0;
}

#chest-queue-modal .chest-sym-head .sym-shop-title{
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -.01em;
}

#chest-queue-modal .cs2-close{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
}

#chest-queue-modal .cs2-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#chest-queue-modal .cs2-body::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
}

body.modal-open #chest-queue-modal.modal.is-open .cs2-body{
    touch-action: pan-y !important;
    overscroll-behavior: contain;
}

#chest-queue-modal .cq-timeline{
    display: flex;
    flex-direction: column;
    gap: 0;
}

#chest-queue-modal .cq-slot{
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
}

#chest-queue-modal .cq-slot--last{
    padding-bottom: 0;
}

#chest-queue-modal .cq-rail{
    width: 28px;
}

#chest-queue-modal .cq-slot:not(.cq-slot--last) .cq-rail::after{
    top: 28px;
}

#chest-queue-modal .cq-node{
    width: 26px;
    height: 26px;
    font-size: 11px;
}

#chest-queue-modal .cq-card{
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: var(--r20);
    overflow: hidden;
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(148,163,184,.18),
        0 6px 16px rgba(0,0,0,.28);
    background: rgba(14, 12, 40, 0.82);
}

#chest-queue-modal .cq-slot--farming .cq-card{
    box-shadow:
        inset 0 0 0 1.5px rgba(250,204,21,.4),
        0 6px 16px rgba(250,204,21,.08);
}

#chest-queue-modal .cq-slot--queued .cq-card{
    box-shadow:
        inset 0 0 0 1.5px rgba(129,140,248,.35),
        0 6px 16px rgba(0,0,0,.25);
}

#chest-queue-modal .cq-slot--locked .cq-card{
    opacity: .82;
}

#chest-queue-modal .cq-card-badge{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    pointer-events: none;
}

#chest-queue-modal .cq-badge{
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1;
}

#chest-queue-modal .cq-card-body{
    padding: 8px;
}

#chest-queue-modal .cq-add{
    min-height: 0;
    padding: 8px;
    gap: 0;
    border-radius: var(--r20);
    justify-content: center;
}

#chest-queue-modal .cq-add-icon{
    width: 36px;
    height: 36px;
    margin-top: 0;
    font-size: 22px;
    border-radius: 12px;
}

#chest-queue-modal .cq-unlock{
    width: 100%;
    justify-content: center;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: var(--r999);
}

#chest-queue-modal .cq-unlock-lock{
    font-size: 16px;
    line-height: 1;
    opacity: .7;
}

#chest-queue-modal .cq-unlock-text{
    font-size: 12px;
    font-weight: 900;
}

#chest-queue-modal .cq-chest{
    gap: 8px;
    padding: 2px 0;
    min-height: 48px;
}

#chest-queue-modal .cq-chest-icon{
    width: 42px;
    height: 42px;
    font-size: 22px;
    border-radius: 12px;
}

#chest-queue-modal .cq-chest-title{
    font-size: 13px;
}

#chest-queue-modal .cq-chest-tag{
    display: inline-flex;
    margin-top: 3px;
    font-size: 9px;
}

#chest-queue-modal .cq-chest-progress-row{
    margin-top: 4px;
    justify-content: flex-end;
}

#chest-queue-modal .cq-chest-bar{
    margin-top: 3px;
    height: 5px;
}

#chest-queue-modal .cq-chest--queued .cq-chest-main{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#multiplier-picker-modal{
    --chest-header-offset: calc(88px + env(safe-area-inset-top, 0px));
}

#multiplier-picker-modal.modal.is-open{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding:
        var(--chest-header-offset)
        0
        env(safe-area-inset-bottom, 0px);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#multiplier-picker-modal .modal-backdrop{
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#multiplier-picker-modal .modal-backdrop::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--chest-header-offset);
    background: rgba(2,6,23,.28);
    pointer-events: auto;
}

#multiplier-picker-modal .modal-shell{
    overflow: hidden !important;
    max-height: 100%;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#multiplier-picker-modal .cs2-shell{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: min(72dvh, 560px);
    min-height: min(72dvh, 560px);
    max-height: min(72dvh, 560px);
    overflow: hidden;
    pointer-events: auto;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#multiplier-picker-modal .cs2-card{
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r20);
    border: 1px solid rgba(148,163,184,.22);
    background: linear-gradient(
        180deg,
        rgba(14, 8, 67, 0.72),
        rgba(10, 6, 40, 0.58)
    );
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    touch-action: manipulation;
}

#multiplier-picker-modal .chest-sym-head{
    flex-shrink: 0;
    display: block;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--stroke);
    background: rgba(255,255,255,.03);
    touch-action: manipulation;
}

#multiplier-picker-modal .chest-sym-head-row{
    display: flex;
    align-items: center;
    gap: 10px;
}

#multiplier-picker-modal .chest-sym-head .sym-shop-head-text{
    flex: 1;
    min-width: 0;
}

#multiplier-picker-modal .chest-sym-head .sym-shop-title{
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -.01em;
}

#multiplier-picker-modal .cs2-close{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
}

#multiplier-picker-modal .cs2-body.mx-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#multiplier-picker-modal .cs2-body.mx-body::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
}

body.modal-open #multiplier-picker-modal.modal.is-open .cs2-body{
    touch-action: pan-y !important;
    overscroll-behavior: contain;
}

#multiplier-picker-modal .mx-preview{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: var(--r20);
    border: 1px solid rgba(250,204,21,.22);
    background: linear-gradient(135deg, rgba(250,204,21,.08), rgba(99,102,241,.1));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#multiplier-picker-modal .mx-preview-value{
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: #fde68a;
}

#multiplier-picker-modal .mx-preview-cost{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 800;
    color: #e2e8f0;
}

#multiplier-picker-modal .mx-balance{
    margin: 0 0 10px;
    text-align: right;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
}

#multiplier-picker-modal .mx-grid{
    margin-bottom: 12px;
    gap: 8px;
}

#multiplier-picker-modal .mx-opt{
    min-height: 56px;
    padding: 8px 5px 6px;
    border-radius: var(--r20);
    gap: 2px;
}

#multiplier-picker-modal .mx-opt-value{
    font-size: 20px;
}

#multiplier-picker-modal .mx-opt[data-mult="100"] .mx-opt-value,
#multiplier-picker-modal .mx-opt[data-mult="250"] .mx-opt-value{
    font-size: 15px;
}

#multiplier-picker-modal .mx-btn-close{
    flex-shrink: 0;
    width: 100%;
    max-width: none;
    margin-top: auto;
    min-height: 44px;
    border-radius: var(--r999);
}

#daily-modal{
    --chest-header-offset: calc(88px + env(safe-area-inset-top, 0px));
}

#daily-modal.modal.is-open{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding:
        var(--chest-header-offset)
        0
        env(safe-area-inset-bottom, 0px);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#daily-modal .modal-backdrop{
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#daily-modal .modal-backdrop::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--chest-header-offset);
    background: rgba(2,6,23,.28);
    pointer-events: auto;
}

#daily-modal .modal-shell{
    overflow: hidden !important;
    max-height: 100%;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#daily-modal .cs2-shell{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: min(72dvh, 560px);
    min-height: min(72dvh, 560px);
    max-height: min(72dvh, 560px);
    overflow: hidden;
    pointer-events: auto;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#daily-modal .modal-card,
#daily-modal .modal-card.cs2-card,
#daily-modal .cs2-card.dr-modal-card{
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

#daily-modal .cs2-card.dr-modal-card{
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r20);
    border: 1px solid rgba(148,163,184,.22);
    background: linear-gradient(
        180deg,
        rgba(14, 8, 67, 0.72),
        rgba(10, 6, 40, 0.58)
    );
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 1;
    transform: none;
    animation: none;
}

#daily-modal .dr-top.chest-sym-head{
    flex-shrink: 0;
    display: block;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--stroke);
    background: rgba(255,255,255,.03);
}

#daily-modal .chest-sym-head-row{
    display: flex;
    align-items: center;
    gap: 10px;
}

#daily-modal .chest-sym-head .sym-shop-head-text{
    flex: 1;
    min-width: 0;
}

#daily-modal .chest-sym-head .sym-shop-title{
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -.01em;
}

#daily-modal .dr-streak-pill,
#inv-chest-modal .dr-streak-pill,
#inv-egg-bag-modal .dr-streak-pill{
    flex-shrink: 0;
    margin: 0;
    padding: 4px 9px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 1000;
    color: #fff7ed;
    background: linear-gradient(90deg, rgba(249,115,22,.5), rgba(250,204,21,.35));
    border: 1px solid rgba(251,191,36,.45);
    box-shadow: 0 0 10px rgba(249,115,22,.2);
}

#daily-modal .cs2-close{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
}

#daily-modal .cs2-body.dr-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 14px;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: manipulation;
    display: flex;
    flex-direction: column;
}

body.modal-open #daily-modal.modal.is-open .cs2-body.dr-body{
    touch-action: pan-y !important;
    overscroll-behavior: contain;
}

#daily-modal .cs2-body.dr-body::-webkit-scrollbar{
    display: none;
}

#daily-modal .dr-board{
    padding: 10px 10px 8px;
    border-radius: var(--r20);
}

#daily-modal .dr-board-glow{
    display: none;
}

#daily-modal .dr-stage{
    min-height: 88px;
    padding: 10px;
    border-radius: var(--r20);
}

#daily-modal .dr-stage-head{
    margin-bottom: 8px;
}

#daily-modal .dr-stage-day{
    font-size: 16px;
}

#daily-modal .dr-chest-zone{
    border-radius: var(--r20);
    padding: 8px 10px;
}

#daily-modal .dr-chest-progress{
    font-size: 14px;
}

#daily-modal .dr-claim{
    flex-shrink: 0;
    min-height: 44px;
    border-radius: var(--r999);
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
}

#inv-chest-modal,
#inv-chest-drop-modal,
#inv-filter-modal,
#inv-egg-bag-modal{
    --inv-chest-modal-max-w: 400px;
    --tab-a: #14b8a6;
    --tab-b: #6366f1;
    --tab-accent: #5eead4;
}

#inv-chest-modal.modal.is-open,
#inv-chest-drop-modal.modal.is-open,
#inv-filter-modal.modal.is-open,
#inv-egg-bag-modal.modal.is-open,
#chest-open-modal.modal.is-open{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        calc(12px + env(safe-area-inset-top))
        12px
        calc(12px + env(safe-area-inset-bottom));
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#inv-chest-modal .modal-backdrop,
#inv-chest-drop-modal .modal-backdrop,
#inv-filter-modal .modal-backdrop,
#inv-egg-bag-modal .modal-backdrop,
#chest-open-modal .modal-backdrop{
    background: rgba(2,6,23,0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    pointer-events: auto;
}

#inv-chest-modal .modal-backdrop::after,
#inv-chest-drop-modal .modal-backdrop::after,
#inv-filter-modal .modal-backdrop::after,
#inv-egg-bag-modal .modal-backdrop::after,
#chest-open-modal .modal-backdrop::after{
    content: none;
    display: none;
}

#inv-chest-modal .modal-shell,
#inv-chest-drop-modal .modal-shell,
#inv-filter-modal .modal-shell,
#inv-egg-bag-modal .modal-shell,
#chest-open-modal .modal-shell{
    width: min(var(--inv-chest-modal-max-w, 400px), 100%);
    max-width: min(var(--inv-chest-modal-max-w, 400px), 100%);
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    pointer-events: auto;
    overscroll-behavior: contain;
}

#inv-chest-modal .cs2-shell,
#inv-chest-drop-modal .cs2-shell,
#inv-filter-modal .cs2-shell,
#inv-egg-bag-modal .cs2-shell{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--inv-chest-modal-max-w);
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    pointer-events: auto;
}

#inv-chest-modal .cs2-card.dr-modal-card,
#inv-chest-drop-modal .cs2-card.dr-modal-card,
#inv-filter-modal .cs2-card.dr-modal-card,
#inv-egg-bag-modal .cs2-card.dr-modal-card{
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.16);
    background:
        radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,.26), rgba(0,0,0,0)),
        rgba(14,8,67,.92);
    box-shadow: 0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
    animation: modalPop .18s ease-out;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    transform: none;
}

#inv-chest-modal .dr-top.chest-sym-head,
#inv-chest-drop-modal .dr-top.chest-sym-head,
#inv-filter-modal .dr-top.chest-sym-head,
#inv-egg-bag-modal .dr-top.chest-sym-head{
    flex-shrink: 0;
    display: block;
    padding: 11px 12px 10px;
    border-bottom: 1px solid rgba(148,163,184,0.12);
    background: rgba(255,255,255,.03);
}

#inv-chest-modal .chest-sym-head-row,
#inv-chest-drop-modal .chest-sym-head-row,
#inv-filter-modal .chest-sym-head-row,
#inv-egg-bag-modal .chest-sym-head-row{
    display: flex;
    align-items: center;
    gap: 10px;
}

#inv-chest-modal .chest-sym-head .sym-shop-head-text,
#inv-chest-drop-modal .chest-sym-head .sym-shop-head-text,
#inv-filter-modal .chest-sym-head .sym-shop-head-text,
#inv-egg-bag-modal .chest-sym-head .sym-shop-head-text{
    flex: 1;
    min-width: 0;
}

#inv-chest-modal .chest-sym-head .sym-shop-title,
#inv-chest-drop-modal .chest-sym-head .sym-shop-title,
#inv-filter-modal .chest-sym-head .sym-shop-title,
#inv-egg-bag-modal .chest-sym-head .sym-shop-title{
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
}

#inv-chest-modal .cs2-close,
#inv-chest-drop-modal .cs2-close,
#inv-filter-modal .cs2-close,
#inv-egg-bag-modal .cs2-close{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
}

#inv-chest-modal .cs2-body.dr-body,
#inv-chest-drop-modal .cs2-body.dr-body,
#inv-filter-modal .cs2-body.dr-body,
#inv-egg-bag-modal .cs2-body.dr-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#inv-chest-modal .cs2-body.dr-body::-webkit-scrollbar,
#inv-chest-drop-modal .cs2-body.dr-body::-webkit-scrollbar,
#inv-filter-modal .cs2-body.dr-body::-webkit-scrollbar,
#inv-egg-bag-modal .cs2-body.dr-body::-webkit-scrollbar{
    display: none;
}

#inv-chest-drop-modal.modal,
#inv-filter-modal.modal,
#inv-egg-bag-modal.modal{
    z-index: 10055;
}

#privileges-modal{
    --chest-header-offset: calc(88px + env(safe-area-inset-top, 0px));
    --sheet-lg-height: min(80dvh, 640px);
    --sheet-lg-width: 100%;
}

#privileges-modal.modal.is-open{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding:
        var(--chest-header-offset)
        0
        env(safe-area-inset-bottom, 0px);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#privileges-modal .modal-backdrop{
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#privileges-modal .modal-backdrop::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--chest-header-offset);
    background: rgba(2,6,23,.28);
    pointer-events: auto;
}

#privileges-modal .modal-shell{
    overflow: hidden !important;
    max-height: 100%;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#privileges-modal .cs2-shell--lg{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--sheet-lg-width);
    height: var(--sheet-lg-height);
    min-height: var(--sheet-lg-height);
    max-height: var(--sheet-lg-height);
    overflow: hidden;
    pointer-events: auto;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#privileges-modal .modal-card,
#privileges-modal .cs2-card.pr-modal-card{
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r20);
    border: 1px solid rgba(148,163,184,.22);
    background: linear-gradient(
        180deg,
        rgba(14, 8, 67, 0.72),
        rgba(10, 6, 40, 0.58)
    );
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#privileges-modal .chest-sym-head,
#tab-tasks .tasks-boss-catalog .chest-sym-head{
    flex-shrink: 0;
    display: block;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--stroke);
    background: rgba(255,255,255,.03);
    touch-action: manipulation;
}

#privileges-modal .chest-sym-head-row,
#tab-tasks .tasks-boss-catalog .chest-sym-head-row{
    display: flex;
    align-items: center;
    gap: 8px;
}

#privileges-modal .chest-sym-head .sym-shop-head-text,
#tab-tasks .tasks-boss-catalog .chest-sym-head .sym-shop-head-text{
    flex: 1;
    min-width: 0;
}

#privileges-modal .pr-head-brand{
    display: flex;
    align-items: center;
    gap: 8px;
}

#privileges-modal .chest-sym-head .sym-shop-title,
#tab-tasks .tasks-boss-catalog .chest-sym-head .sym-shop-title{
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -.01em;
}

#tab-tasks .tasks-boss-catalog .bc-top-sub{
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

#privileges-modal .pr-active-pill{
    flex-shrink: 0;
    margin: 0;
    padding: 4px 9px;
    border-radius: 18px;
    font-size: 10px;
    font-weight: 900;
}

#privileges-modal .pr-active-pill-label{
    display: none;
}

#privileges-modal .cs2-close{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
}

#privileges-modal .cs2-body.pr-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.modal-open #privileges-modal.modal.is-open .cs2-body.pr-body{
    touch-action: pan-y !important;
    overscroll-behavior: contain;
}

#privileges-modal .cs2-body.pr-body::-webkit-scrollbar{
    display: none;
}

#tab-tasks .tasks-boss-catalog .bc-filters{
    flex-shrink: 0;
    margin: 0;
    padding: 8px 12px 10px;
    border-bottom: 1px solid rgba(148,163,184,.1);
}

#tab-tasks #tasks-panel-challenges.tasks-panel-active{
    flex: 1;
    min-height: 0;
}

#tab-tasks .tasks-boss-catalog{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
    border-radius: 16px;
    border: 1px solid rgba(249,115,22,.22);
    background:
            radial-gradient(120% 100% at 100% 0%, rgba(239,68,68,.1), transparent 55%),
            linear-gradient(165deg, rgba(15,23,42,.95), rgba(28,15,12,.82));
    overflow: hidden;
}

#tab-tasks .tasks-boss-catalog__head.chest-sym-head{
    margin: 0;
    border-bottom: 1px solid rgba(249,115,22,.18);
    background: rgba(255,255,255,.03);
}

#tab-tasks .tasks-boss-catalog .bc-body{
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#tab-tasks .tasks-boss-catalog .bc-map{
    max-height: none;
}

#chest-shop-modal .cs2-card,
#chest-queue-modal .cs2-card,
#multiplier-picker-modal .cs2-card,
#daily-modal .cs2-card,
#daily-modal .cs2-card.dr-modal-card,
#privileges-modal .cs2-card{
    border-radius: var(--r20) var(--r20) 0 0;
}

#tab-slot .quick-icons{
    padding: 4px 0;
    gap: 10px;
}

#tab-slot .quick-icons--left{
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: auto;
}

#tab-slot .quick-icons--right{
    right: calc(8px + env(safe-area-inset-right, 0px));
    left: auto;
}

#tab-slot .quick-group{
    gap: 5px;
}

#tab-slot .quick-item{
    padding: 2px 0 4px;
    gap: 5px;
}

#tab-slot .quick-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
}

#tab-slot .quick-box img{
    width: 38px;
    height: 38px;
}

#tab-slot .quick-label{
    font-size: 8px;
    letter-spacing: 0.2px;
}

#tab-slot .slot-daily-dot{
    top: 2px;
    right: 2px;
}

#tab-crash.screen-active{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.tab-page--crash{
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    padding: 10px 14px calc(24px + var(--nav-content-gap));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.cr-screen-head{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.45);
}

.cr-back-btn{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cr-back-btn:active{
    transform: scale(0.96);
}

.cr-screen-head__brand{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.cr-screen-head__title{
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.15;
}

.cr-screen-body{
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.cr-quick-ic{
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
}

.cr-head{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.45);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.35), transparent);
}

.cr-head__brand{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.cr-head__icon{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(34, 211, 238, 0.2), rgba(99, 102, 241, 0.15));
    border: 1px solid rgba(34, 211, 238, 0.35);
    color: #67e8f9;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.15);
}

.cr-head__icon svg{
    width: 22px;
    height: 22px;
}

.cr-head__title{
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #f8fafc;
    line-height: 1.15;
}

.cr-head__sub{
    margin: 3px 0 0;
    font-size: 11px;
    color: #64748b;
    line-height: 1.25;
}

.cr-head__live{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 5px 8px;
    border-radius: 18px;
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.cr-head__live-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: cr-live-pulse 1.4s ease-in-out infinite;
}

@keyframes cr-live-pulse{
    0%, 100%{ opacity: 1; transform: scale(1); }
    50%{ opacity: 0.5; transform: scale(0.85); }
}

.cr-head__close{
    flex-shrink: 0;
    margin-left: 2px;
}

.cr-history-block{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cr-history-label{
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
    padding-left: 2px;
}

.cr-history{
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    scrollbar-width: none;
    min-height: 28px;
    align-items: center;
}

.cr-history:empty::after{
    content: "???? ??? ???????";
    font-size: 11px;
    color: #475569;
    font-style: italic;
}

.cr-history::-webkit-scrollbar{
    display: none;
}

.cr-history-pill{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.9);
    color: #94a3b8;
    border: 1px solid rgba(71, 85, 105, 0.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cr-history-pill--low{
    color: #fca5a5;
    background: rgba(69, 10, 10, 0.45);
    border-color: rgba(248, 113, 113, 0.4);
}

.cr-history-pill--mid{
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.35);
}

.cr-history-pill--high{
    color: #86efac;
    background: rgba(6, 78, 59, 0.35);
    border-color: rgba(74, 222, 128, 0.45);
}

.cr-round-meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    padding: 0 2px;
}

.cr-shield-bar-wrap{
    margin: 0 2px;
}

.cr-shield-bar{
    width: 100%;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
    font: inherit;
}

.cr-shield-bar--off{
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px dashed rgba(34, 211, 238, 0.45);
    background: rgba(15, 23, 42, 0.55);
    color: #94a3b8;
    cursor: pointer;
}

.cr-shield-bar--off:active{
    transform: scale(0.99);
}

.cr-shield-bar--on{
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(6, 78, 99, 0.2);
}

.cr-shield-bar__head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.cr-shield-bar__title{
    font-size: 11px;
    font-weight: 800;
    color: #a5f3fc;
}

.cr-shield-bar__time{
    font-size: 9px;
    color: #64748b;
    white-space: nowrap;
}

.cr-shield-bar__track{
    height: 5px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.85);
    overflow: hidden;
}

.cr-shield-bar__fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #6366f1);
}

.cr-shield-bar__meta{
    display: block;
    margin-top: 5px;
    font-size: 10px;
    color: #94a3b8;
}

.cr-round-label{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #94a3b8;
}

.cr-round-label__ic{
    color: #22d3ee;
    font-size: 10px;
}

.cr-players-count{
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #cbd5e1;
    padding: 3px 8px;
    border-radius: 18px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.5);
}

.cr-stage{
    position: relative;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34, 211, 238, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(2, 6, 23, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.2);
    padding: 0 0 10px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.cr-stage__glow{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(circle at 50% 40%, rgba(34, 211, 238, 0.12), transparent 65%);
}

.cr-stage.cr-stage--betting{
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 32px rgba(251, 191, 36, 0.06);
}

.cr-stage.cr-stage--betting .cr-stage__glow{
    opacity: 0.5;
    background: radial-gradient(circle at 50% 30%, rgba(251, 191, 36, 0.1), transparent 60%);
}

.cr-stage.cr-stage--running{
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow:
        0 0 40px rgba(34, 211, 238, 0.12),
        inset 0 0 60px rgba(34, 211, 238, 0.04);
}

.cr-stage.cr-stage--running .cr-stage__glow{
    opacity: 1;
    animation: cr-glow-pulse 1.2s ease-in-out infinite;
}

@keyframes cr-glow-pulse{
    0%, 100%{ opacity: 0.7; }
    50%{ opacity: 1; }
}

.cr-stage.cr-stage--crashed{
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow: 0 0 36px rgba(248, 113, 113, 0.12);
    animation: cr-shake 0.45s ease-out;
}

.cr-stage.cr-stage--crashed .cr-stage__glow{
    opacity: 1;
    background: radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.15), transparent 70%);
}

@keyframes cr-shake{
    0%, 100%{ transform: translateX(0); }
    20%{ transform: translateX(-3px); }
    40%{ transform: translateX(3px); }
    60%{ transform: translateX(-2px); }
    80%{ transform: translateX(2px); }
}

#tab-crash[data-phase="running"] .cr-mult{
    animation: cr-mult-pulse 0.8s ease-in-out infinite;
}

@keyframes cr-mult-pulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.03); }
}

.cr-bet-timer{
    position: relative;
    height: 3px;
    background: rgba(15, 23, 42, 0.8);
    flex-shrink: 0;
    overflow: hidden;
}

.cr-bet-timer__fill{
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #fde047);
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform 0.35s linear;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.cr-graph-wrap{
    position: relative;
    flex: 0 0 168px;
    height: 168px;
    margin: 8px 10px 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(2, 6, 23, 0.75);
    border: 1px solid rgba(30, 41, 59, 0.8);
}

.cr-graph-grid{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(51, 65, 85, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 65, 85, 0.4) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, black 20%, transparent 100%);
}

.cr-graph-canvas{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cr-mult-wrap{
    text-align: center;
    position: relative;
    z-index: 3;
}

.cr-mult-wrap--overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-54%);
    pointer-events: none;
    padding: 0 12px;
}

.cr-mult-wrap--overlay .cr-mult{
    font-size: 40px;
    font-family: "Signika", "Open Sans", system-ui, sans-serif;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 4px 20px rgba(2, 6, 23, 0.9));
}

.cr-mult-wrap--overlay .cr-status{
    margin-top: 8px;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(51, 65, 85, 0.6);
    display: inline-block;
    padding: 4px 14px;
    border-radius: 18px;
    font-weight: 600;
}

.cr-mult{
    display: block;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: #7dd3fc;
    text-shadow: 0 0 32px rgba(56, 189, 248, 0.4);
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.cr-mult.cr-mult--hot{
    color: #fde047;
    text-shadow: 0 0 36px rgba(253, 224, 71, 0.55);
}

.cr-mult.cr-mult--crash{
    color: #f87171;
    text-shadow: 0 0 40px rgba(248, 113, 113, 0.6);
    animation: none;
}

.cr-status{
    display: block;
    font-size: 12px;
    color: #94a3b8;
}

#tab-crash[data-phase="running"] .cr-status{
    color: #67e8f9;
}

#tab-crash[data-phase="crashed"] .cr-status{
    color: #fca5a5;
}

.cr-potential{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(51, 65, 85, 0.55);
    font-size: 12px;
    color: #94a3b8;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.cr-potential-val-wrap{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cr-potential-coin{
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.cr-potential-val{
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fde047;
    text-shadow: 0 0 16px rgba(253, 224, 71, 0.25);
}

.cr-bet-panel{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(51, 65, 85, 0.5);
}

.cr-bet-label{
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.cr-bet-row{
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.cr-bet-input-wrap{
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.75);
    background: rgba(2, 6, 23, 0.65);
    padding: 0 10px 0 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cr-bet-input-wrap:focus-within{
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

.cr-bet-input-ic{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.9;
}

.cr-bet-input{
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #f8fafc;
    padding: 11px 0;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    outline: none;
}

.cr-bet-chip{
    flex: 0 0 auto;
    min-width: 42px;
    border-radius: 11px;
    border: 1px solid rgba(71, 85, 105, 0.75);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.5), rgba(30, 41, 59, 0.9));
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 800;
    padding: 0 11px;
    transition: transform 0.12s ease, border-color 0.15s ease;
}

.cr-bet-chip:active:not(:disabled){
    transform: scale(0.96);
}

.cr-bet-chip--max{
    color: #fde047;
    border-color: rgba(251, 191, 36, 0.4);
}

.cr-quick-bets{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cr-qbet{
    border-radius: 18px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    background: rgba(8, 47, 73, 0.45);
    color: #bae6fd;
    font-size: 11px;
    font-weight: 700;
    padding: 7px 14px;
    transition: background 0.15s ease, transform 0.12s ease;
}

.cr-qbet:active:not(:disabled){
    transform: scale(0.97);
    background: rgba(14, 116, 144, 0.55);
}

.cr-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cr-btn{
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 14px;
    padding: 15px 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.35px;
    transition: transform 0.12s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.cr-btn__text{
    position: relative;
    z-index: 1;
}

.cr-btn__shine{
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    pointer-events: none;
}

.cr-btn:not(:disabled):active .cr-btn__shine{
    animation: cr-btn-shine 0.5s ease;
}

@keyframes cr-btn-shine{
    to{ left: 150%; }
}

.cr-btn:not(:disabled):active{
    transform: scale(0.98);
}

.cr-btn:disabled{
    opacity: 0.4;
    filter: grayscale(0.35);
}

.cr-btn--bet{
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 48%, #0369a1 100%);
    color: #f0f9ff;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
    border: 1px solid rgba(125, 211, 252, 0.35);
}

.cr-btn--cashout{
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 45%, #15803d 100%);
    color: #f0fdf4;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(134, 239, 172, 0.35);
}

.cr-btn--cashout:not(:disabled){
    animation: cr-cashout-glow 1.5s ease-in-out infinite;
}

@keyframes cr-cashout-glow{
    0%, 100%{ box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3); }
    50%{ box-shadow: 0 6px 28px rgba(74, 222, 128, 0.55); }
}

.cr-btn--cashout:disabled{
    animation: none;
}

#tab-minigames.screen-active{
    min-height: 0;
}

.tab-page--minigames{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 14px calc(24px + var(--nav-content-gap));
}

.mg-head{
    text-align: center;
    padding: 8px 4px 4px;
}

.mg-head__title{
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #f8fafc;
}

.mg-head__sub{
    margin: 6px 0 0;
    font-size: 12px;
    color: #94a3b8;
}

#tab-minigames .mg-shield-bar{
    margin: 0;
}

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

.mg-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 148px;
    padding: 16px 12px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(8, 47, 73, 0.75), rgba(15, 23, 42, 0.95));
    color: #e2e8f0;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mg-card:active{
    transform: scale(0.98);
}

.mg-card__glow{
    position: absolute;
    inset: -30% -20%;
    background: radial-gradient(circle at 50% 20%, rgba(34, 211, 238, 0.22), transparent 55%);
    pointer-events: none;
}

.mg-card__badge{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 18px;
    background: rgba(34, 211, 238, 0.2);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.45);
}

.mg-card__icon{
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 900;
    color: #fbbf24;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(251, 191, 36, 0.35);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.mg-card__name{
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 800;
}

.mg-card__desc{
    position: relative;
    z-index: 1;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.3;
}

.mg-card__meta{
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 600;
    color: #67e8f9;
}

.mg-card--crash{
    border-color: rgba(251, 191, 36, 0.28);
    background: linear-gradient(165deg, rgba(12, 35, 64, 0.85), rgba(15, 23, 42, 0.98));
}

.mg-card--crash .mg-card__icon{
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.4);
    text-shadow: 0 0 14px rgba(34, 211, 238, 0.4);
}

.mg-card--crash .mg-card__badge{
    background: rgba(239, 68, 68, 0.25);
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.45);
}

.mg-card--crash:hover,
.mg-card--crash:focus-visible{
    border-color: rgba(34, 211, 238, 0.65);
    box-shadow: 0 0 28px rgba(34, 211, 238, 0.18);
}

.bottom-nav__panel .nav-item{
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.bottom-nav__panel .nav-label{
    font-size: 9px;
}

#header-open-profile{
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

#header-open-profile:active{
    opacity: 0.85;
}

#header-open-profile.is-profile-active .app-header-profile-avatar img{
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.85), 0 0 14px rgba(34, 211, 238, 0.35);
}

#header-open-profile.is-profile-active .user-name{
    color: #bae6fd;
}

html.tg-app .app-header-profile{
    padding: 10px 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

#tab-slot .quick-item--pets{
    padding: 2px 0 4px;
    gap: 3px;
}
#tab-slot .slot-pets-quick-box{
    position: relative;
    border: 1px solid rgba(45, 212, 191, 0.28);
    background: radial-gradient(circle at 40% 25%, rgba(20, 184, 166, 0.22), rgba(8, 47, 73, 0.55));
    border-radius: 12px;
}
#tab-slot .slot-pets-quick-emoji{
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
#tab-slot .slot-pets-quick-badge{
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #14b8a6;
    color: #042f2e;
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
#tab-slot .quick-item--pets.is-ready .slot-pets-quick-badge{
    background: #fbbf24;
    color: #422006;
}
#tab-slot .quick-item--pets.is-ready .slot-pets-quick-box{
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15);
}
#tab-slot .quick-label--egg{
    font-size: 7px;
    opacity: .72;
    margin-top: -2px;
}

.inv-segment-tabs{
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 2px;
}
.inv-segment-tab{
    flex: 1;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #cbd5e1;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.inv-segment-tab.is-active{
    color: #042f2e;
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    border-color: transparent;
}
.inv-segment-tab-badge{
    display: inline-flex;
    min-width: 16px;
    height: 16px;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    font-size: 10px;
    align-items: center;
    justify-content: center;
}
.inv-segment-tab.is-active .inv-segment-tab-badge{
    background: rgba(255,255,255,.28);
    color: #042f2e;
}

.inv-pets-panel,
.pets-modal-body{
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 16px;
    max-height: min(72vh, 640px);
    overflow-y: auto;
    scrollbar-width: none;
}
.inv-pets-panel::-webkit-scrollbar,
.pets-modal-body::-webkit-scrollbar{
    display: none;
}
.pets-modal-shell .pets-modal-card{ max-width: 420px; }
.pets-modal-body{ padding: 0 12px 14px; }

.pets-panel{ display: flex; flex-direction: column; gap: 12px; }
.pets-hero{
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(20,184,166,.16), rgba(15,23,42,.55));
    border: 1px solid rgba(45,212,191,.22);
}
.pets-hero__top{ display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pets-hero__label{ font-size: 10px; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
.pets-hero__value{ font-size: 28px; font-weight: 800; line-height: 1.1; color: #fff; }
.pets-hero__egg{ display: flex; gap: 8px; align-items: center; }
.pets-hero__egg-ico{ font-size: 24px; }
.pets-hero__chance{ font-size: 18px; font-weight: 800; color: #fde68a; }
.pets-hero__bar-wrap{
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.pets-hero__bar{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #2dd4bf);
}
.pets-hero__hint{ margin: 8px 0 0; font-size: 11px; opacity: .72; line-height: 1.35; }
.pets-sym-grid{
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 4px;
    margin-top: 10px;
}
.pets-sym-cell{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 8px;
    background: rgba(0,0,0,.18);
}
.pets-sym-cell.is-zero{ opacity: .35; }
.pets-sym-icon{ width: 18px; height: 18px; object-fit: contain; }
.pets-sym-lvl{ font-size: 9px; font-weight: 700; }
.pets-sym-pts{ font-size: 7px; opacity: .65; line-height: 1; }

.pets-bonus-row{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pets-bonus-row--empty{ font-size: 11px; opacity: .65; }
.pets-bonus-chip{
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.22);
    color: #fde68a;
    font-size: 10px;
    font-weight: 700;
}

.pets-block{
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}
.pets-block__head h4{
    margin: 0 0 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pets-block__count{
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(20,184,166,.18);
    color: #99f6e4;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pets-empty, .pets-empty-inline{ margin: 0; font-size: 12px; opacity: .7; line-height: 1.4; }

.pets-fruit-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.pets-fruit-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 12px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.05);
}
.pets-fruit-card--feed{
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    transition: border-color .2s, background .2s;
}
.pets-fruit-card--feed:active{
    background: rgba(168,85,247,.12);
    border-color: rgba(168,85,247,.35);
}
.pets-fruit-card__ico img{ width: 28px; height: 28px; object-fit: contain; }
.pets-fruit-card__name{ font-size: 9px; opacity: .75; text-transform: capitalize; }
.pets-fruit-card__qty{ font-size: 12px; font-weight: 800; }

.pets-egg-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.pets-egg-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.2);
    color: inherit;
    cursor: pointer;
    text-align: center;
}
.pets-egg-card__emoji{ font-size: 28px; }
.pets-egg-card__name{ font-size: 11px; font-weight: 700; }
.pets-egg-card__qty{ font-size: 12px; opacity: .85; }
.pets-egg-card__cta{
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #99f6e4;
}
.pets-egg-card.egg-ocean{ border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.08); }
.pets-egg-card.egg-coral{ border-color: rgba(244,114,182,.35); background: rgba(244,114,182,.08); }
.pets-egg-card.egg-deep{ border-color: rgba(99,102,241,.35); background: rgba(99,102,241,.08); }
.pets-egg-card.egg-abyss{ border-color: rgba(124,58,237,.35); background: rgba(124,58,237,.08); }
.pets-egg-card.egg-legendary{ border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.1); }

.pets-inc-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.pets-inc-slot{
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.18);
}
.pets-inc-slot--empty{
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: .45;
    border-style: dashed;
}
.pets-inc-slot__num{
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.pets-inc-slot.is-ready{
    border-color: rgba(251,191,36,.45);
    box-shadow: 0 0 0 1px rgba(251,191,36,.12);
}
.pets-inc-slot__head{ display: flex; align-items: center; gap: 8px; }
.pets-inc-slot__emoji{ font-size: 22px; }
.pets-inc-slot__name{ font-size: 12px; font-weight: 700; }
.pets-inc-slot__timer{ margin-top: 6px; font-size: 13px; font-weight: 800; color: #bae6fd; }
.pets-inc-slot.is-ready .pets-inc-slot__timer{ color: #fde68a; }
.pets-inc-progress{
    height: 5px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.pets-inc-progress__fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #2dd4bf);
    transition: width .9s linear;
}
.pets-inc-slot.is-ready .pets-inc-progress__fill{ background: linear-gradient(90deg, #f59e0b, #fde68a); }
.pets-inc-slot__actions{ margin-top: 8px; display: flex; gap: 8px; }

.pets-btn{
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.pets-btn--primary{
    flex: 1;
    color: #042f2e;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
}
.pets-btn--ghost{
    flex: 1;
    color: #e0f2fe;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
}

.pets-list{ display: flex; flex-direction: column; gap: 10px; }
.pets-card{
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.06);
}
.pets-card.r-rare{ border-color: rgba(96,165,250,.35); }
.pets-card.r-epic{ border-color: rgba(167,139,250,.35); }
.pets-card.r-legendary{ border-color: rgba(251,191,36,.4); }
.pets-card.r-mythic{ border-color: rgba(244,114,182,.35); }
.pets-card__avatar{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.pets-card__body{ flex: 1; min-width: 0; }
.pets-card__head{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 11px;
}
.pets-card__rarity{ font-weight: 800; }
.pets-card__variant{ opacity: .75; text-transform: capitalize; }
.pets-card__level{
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(20,184,166,.18);
    font-weight: 800;
}
.pets-card__xpbar{
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.pets-card__xpfill{
    height: 100%;
    background: linear-gradient(90deg, #14b8a6, #5eead4);
}
.pets-card__xp{ margin-top: 4px; font-size: 10px; opacity: .75; }
.pets-card__bonuses{ margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.pets-card__feed{ margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.pets-feed-btn{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: inherit;
    font-size: 10px;
    cursor: pointer;
}
.pets-feed-btn img{ width: 16px; height: 16px; object-fit: contain; }

#tab-slot{ position: relative; }
.egg-drop-fx{
    position: absolute;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s linear .3s;
}
.egg-drop-fx.is-active{
    opacity: 1;
    visibility: visible;
    transition: none;
}
.egg-drop-burst{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 22px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(8, 47, 73, .88);
    box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(45,212,191,.12);
    backdrop-filter: blur(8px);
}
.egg-drop-burst__glow{
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45,212,191,.35), transparent 70%);
    animation: egg-drop-glow 1.2s ease-in-out infinite alternate;
}
.egg-drop-burst__emoji{
    position: relative;
    font-size: 44px;
    line-height: 1;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.4));
}
.egg-drop-burst__label{
    position: relative;
    font-size: 15px;
    font-weight: 800;
    color: #fde68a;
}
.egg-drop-burst__sub{
    position: relative;
    font-size: 11px;
    opacity: .75;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.egg-drop-burst.egg-ocean{ border-color: rgba(56,189,248,.45); }
.egg-drop-burst.egg-coral{ border-color: rgba(244,114,182,.45); }
.egg-drop-burst.egg-deep{ border-color: rgba(99,102,241,.45); }
.egg-drop-burst.egg-abyss{ border-color: rgba(124,58,237,.5); }
.egg-drop-burst.egg-legendary{
    border-color: rgba(251,191,36,.55);
    background: rgba(66, 32, 6, .88);
}
@keyframes egg-drop-glow{
    from{ opacity: .5; transform: scale(.95); }
    to{ opacity: 1; transform: scale(1.05); }
}

.pet-hatch-shell{ max-width: 360px; }
.pet-hatch-stage{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 18px 18px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(15,23,42,.95), rgba(8,47,73,.92));
    border: 1px solid rgba(255,255,255,.1);
}
.pet-hatch-aura{
    position: absolute;
    inset: -30%;
    opacity: 0;
    background: radial-gradient(circle at 50% 40%, rgba(45,212,191,.28), transparent 65%);
    transition: opacity .4s ease;
    pointer-events: none;
}
.pet-hatch-aura.is-glow{ opacity: 1; }
.pet-hatch-sparks{
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.pet-hatch-spark{
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 2px;
}
.pet-hatch-egg-shell{
    position: relative;
    font-size: 72px;
    line-height: 1;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
    z-index: 2;
}
.pet-hatch-reveal{
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pet-hatch-avatar-ring{
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.15);
    animation: pet-hatch-ring 2s ease-in-out infinite;
}
.pet-hatch-avatar{
    width: 96px;
    height: 96px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.pet-hatch-info{
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
}
.pet-hatch-tag{
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20,184,166,.18);
    color: #99f6e4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.pet-hatch-rarity{
    margin: 8px 0 2px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}
.pet-hatch-variant{
    margin: 0 0 10px;
    font-size: 12px;
    opacity: .72;
    text-transform: capitalize;
}
.pet-hatch-bonuses{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.pet-hatch-btn{
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 4px;
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 800;
    color: #042f2e;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(251,191,36,.25);
}
.pet-hatch-btn:disabled{ opacity: .45; cursor: default; }
@keyframes pet-hatch-ring{
    0%, 100%{ transform: scale(1); opacity: .7; }
    50%{ transform: scale(1.06); opacity: 1; }
}

.pet-hatch-stage.pr-common,
.pets-card.pr-common,
.pets-showcase.pr-common,
.pets-collection-card.pr-common,
.pets-detail-card.pr-common,
.pets-carousel-card.pr-common,
.pets-grid-card.pr-common{
    --pr-color: #94a3b8;
    --pr-glow: rgba(148,163,184,.35);
    --pr-border: rgba(148,163,184,.34);
    --pr-bg-a: rgba(20,24,34,.94);
    --pr-bg-b: rgba(8,10,18,.97);
    --pr-shadow: 0 4px 12px rgba(0,0,0,.24);
}
.pet-hatch-stage.pr-uncommon,
.pets-card.pr-uncommon,
.pets-showcase.pr-uncommon,
.pets-collection-card.pr-uncommon,
.pets-detail-card.pr-uncommon,
.pets-carousel-card.pr-uncommon,
.pets-grid-card.pr-uncommon{
    --pr-color: #34d399;
    --pr-glow: rgba(52,211,153,.35);
    --pr-border: rgba(52,211,153,.38);
    --pr-bg-a: rgba(12,28,24,.94);
    --pr-bg-b: rgba(6,14,12,.97);
    --pr-shadow: 0 4px 12px rgba(0,0,0,.24), 0 0 10px rgba(52,211,153,.12);
}
.pet-hatch-stage.pr-rare,
.pets-card.pr-rare,
.pets-showcase.pr-rare,
.pets-collection-card.pr-rare,
.pets-detail-card.pr-rare,
.pets-carousel-card.pr-rare,
.pets-grid-card.pr-rare{
    --pr-color: #60a5fa;
    --pr-glow: rgba(96,165,250,.4);
    --pr-border: rgba(96,165,250,.44);
    --pr-bg-a: rgba(14,22,40,.94);
    --pr-bg-b: rgba(6,10,22,.97);
    --pr-shadow: 0 4px 14px rgba(0,0,0,.26), 0 0 12px rgba(59,130,246,.16);
}
.pet-hatch-stage.pr-epic,
.pets-card.pr-epic,
.pets-showcase.pr-epic,
.pets-collection-card.pr-epic,
.pets-detail-card.pr-epic,
.pets-carousel-card.pr-epic,
.pets-grid-card.pr-epic{
    --pr-color: #c084fc;
    --pr-glow: rgba(192,132,252,.4);
    --pr-border: rgba(192,132,252,.48);
    --pr-bg-a: rgba(24,14,40,.94);
    --pr-bg-b: rgba(10,6,20,.97);
    --pr-shadow: 0 4px 14px rgba(0,0,0,.26), 0 0 14px rgba(168,85,247,.18);
}
.pet-hatch-stage.pr-legendary,
.pets-card.pr-legendary,
.pets-showcase.pr-legendary,
.pets-collection-card.pr-legendary,
.pets-detail-card.pr-legendary,
.pets-carousel-card.pr-legendary,
.pets-grid-card.pr-legendary{
    --pr-color: #fbbf24;
    --pr-glow: rgba(251,191,36,.45);
    --pr-border: rgba(251,191,36,.58);
    --pr-bg-a: rgba(34,24,8,.94);
    --pr-bg-b: rgba(14,8,4,.97);
    --pr-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 18px rgba(251,191,36,.24);
}
.pet-hatch-stage.pr-mythic,
.pets-card.pr-mythic,
.pets-showcase.pr-mythic,
.pets-collection-card.pr-mythic,
.pets-detail-card.pr-mythic,
.pets-carousel-card.pr-mythic,
.pets-grid-card.pr-mythic{
    --pr-color: #f472b6;
    --pr-glow: rgba(244,114,182,.4);
    --pr-border: rgba(244,114,182,.52);
    --pr-bg-a: rgba(36,12,28,.94);
    --pr-bg-b: rgba(16,6,12,.97);
    --pr-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 18px rgba(244,114,182,.22);
}
.pet-hatch-stage.pr-ancient,
.pets-card.pr-ancient,
.pets-showcase.pr-ancient,
.pets-collection-card.pr-ancient,
.pets-detail-card.pr-ancient,
.pets-carousel-card.pr-ancient,
.pets-grid-card.pr-ancient{
    --pr-color: #fb923c;
    --pr-glow: rgba(251,146,60,.42);
    --pr-border: rgba(251,146,60,.56);
    --pr-bg-a: rgba(36,18,8,.94);
    --pr-bg-b: rgba(16,8,4,.97);
    --pr-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 18px rgba(251,146,60,.22);
}
.pet-hatch-stage.pr-divine,
.pets-card.pr-divine,
.pets-showcase.pr-divine,
.pets-collection-card.pr-divine,
.pets-detail-card.pr-divine,
.pets-carousel-card.pr-divine,
.pets-grid-card.pr-divine{
    --pr-color: #fef08a;
    --pr-glow: rgba(254,240,138,.5);
    --pr-border: rgba(254,240,138,.68);
    --pr-bg-a: rgba(40,34,8,.94);
    --pr-bg-b: rgba(18,14,4,.97);
    --pr-shadow: 0 4px 18px rgba(0,0,0,.3), 0 0 22px rgba(254,240,138,.28);
}

.pet-hatch-stage.pr-common .pet-hatch-rarity{ color: #cbd5e1; }
.pet-hatch-stage.pr-uncommon .pet-hatch-rarity{ color: #6ee7b7; }
.pet-hatch-stage.pr-rare .pet-hatch-rarity{ color: #93c5fd; }
.pet-hatch-stage.pr-epic .pet-hatch-rarity{ color: #d8b4fe; }
.pet-hatch-stage.pr-legendary .pet-hatch-rarity{ color: #fde68a; }
.pet-hatch-stage.pr-mythic .pet-hatch-rarity{ color: #f9a8d4; }
.pet-hatch-stage.pr-ancient .pet-hatch-rarity{ color: #fdba74; }
.pet-hatch-stage.pr-divine .pet-hatch-rarity{ color: #fef08a; text-shadow: 0 0 12px rgba(254,240,138,.6); }

.pet-rarity-badge{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}
.pet-rarity-badge__img{
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 4px var(--pr-glow, rgba(0,0,0,.25)));
}
.pet-rarity-badge__label{
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--pr-color, #e2e8f0);
    line-height: 1;
}
.pet-rarity-badge--xs .pet-rarity-badge__img{ width: 14px; height: 14px; }
.pet-rarity-badge--xs .pet-rarity-badge__label{ font-size: 8px; }
.pet-rarity-badge--sm .pet-rarity-badge__img{ width: 16px; height: 16px; }
.pet-rarity-badge--sm .pet-rarity-badge__label{ font-size: 9px; }

.pets-carousel-card__rarity.pet-rarity-badge{
    gap: 4px;
    padding: 3px 8px 3px 4px;
    border-radius: 999px;
    background: rgba(0,0,0,.25);
    border: 1px solid color-mix(in srgb, var(--pr-color, #a855f7) 35%, transparent);
}
.pets-carousel-card__rarity .pet-rarity-badge__img{
    width: 20px;
    height: 20px;
}
.pets-carousel-card__rarity .pet-rarity-badge__label{
    font-size: 9px;
}

.pet-hatch-rarity-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.pet-hatch-rarity-badge .pet-rarity-badge__img{
    width: 28px;
    height: 28px;
}
.pet-hatch-rarity-badge .pet-rarity-badge__label{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .08em;
}

.pets-breed-outcome .pet-rarity-badge{
    flex: 1;
    min-width: 0;
}
.pets-egg-card__preview{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.pets-inc-slot__preview{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.pets-inc-slot__preview-variant{
    font-size: 9px;
    opacity: .75;
}
.pets-breed-active__result{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pet-portrait{
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.pet-portrait__emoji,
.pet-portrait__img{
    grid-area: 1 / 1;
}
.pet-portrait__emoji{
    font-size: 1em;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
.pet-portrait__img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .2s ease;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.4));
    z-index: 1;
}
.pet-portrait__img.is-loaded,
.pet-portrait.is-loaded .pet-portrait__img{
    opacity: 1;
}
.pet-portrait.is-loaded .pet-portrait__emoji{
    display: none;
}
.pet-portrait--hero{
    width: 140px;
    height: 140px;
    font-size: 88px;
}
.pet-portrait--hatch{
    width: 96px;
    height: 96px;
    font-size: 64px;
}
.pet-portrait--md{
    width: 64px;
    height: 64px;
    font-size: 36px;
}
.pet-portrait--sm{
    width: 48px;
    height: 48px;
    font-size: 28px;
}
.pet-portrait--xs{
    width: 36px;
    height: 36px;
    font-size: 22px;
}
.pets-carousel-card__pet .pet-portrait{
    margin-bottom: 16px;
}
.pet-hatch-avatar .pet-portrait{
    margin: 0 auto;
}
.pets-detail-card__avatar .pet-portrait{
    width: 64px;
    height: 64px;
}
.pets-egg-card__emoji .pet-portrait,
.pets-inc-slot__emoji .pet-portrait,
.pets-breed-slot__emoji .pet-portrait,
.pets-breed-pick-card__emoji .pet-portrait{
    margin: 0 auto;
}

.pet-hatch-stage[class*="pr-"] .pet-hatch-avatar{
    border: 2px solid var(--pr-color);
    box-shadow: 0 0 24px var(--pr-glow);
}
.pet-hatch-stage[class*="pr-"] .pet-hatch-avatar-ring{
    border-color: var(--pr-color);
    box-shadow: 0 0 20px var(--pr-glow);
}

.pets-egg-card{
    position: relative;
    overflow: hidden;
}
.pets-egg-card__glow{
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 65%);
    opacity: .6;
    pointer-events: none;
}
.pets-egg-card__shimmer{
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
    transform: rotate(18deg);
    animation: pets-egg-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
.pets-egg-card__emoji{
    position: relative;
    font-size: 32px;
    animation: pets-egg-float 2.8s ease-in-out infinite;
}
@keyframes pets-egg-shimmer{
    0%, 100%{ left: -60%; }
    50%{ left: 120%; }
}
@keyframes pets-egg-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-3px); }
}

.pets-inc-slot{
    position: relative;
    overflow: hidden;
}
.pets-inc-slot--empty{
    position: relative;
}
.pets-inc-slot__ghost{
    position: absolute;
    right: 12px;
    font-size: 28px;
    opacity: .12;
}
.pets-inc-slot__ring{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: conic-gradient(#2dd4bf calc(var(--inc-pct, 0) * 1%), rgba(255,255,255,.08) 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    opacity: .85;
}
.pets-inc-slot.is-incubating .pets-inc-slot__emoji{
    animation: pets-inc-wobble 2.4s ease-in-out infinite;
}
.pets-inc-slot.is-ready{
    animation: pets-inc-ready-pulse 1.6s ease-in-out infinite;
}
@keyframes pets-inc-wobble{
    0%, 100%{ transform: rotate(0deg); }
    25%{ transform: rotate(-6deg); }
    75%{ transform: rotate(6deg); }
}
@keyframes pets-inc-ready-pulse{
    0%, 100%{ box-shadow: 0 0 0 1px rgba(251,191,36,.12); }
    50%{ box-shadow: 0 0 16px rgba(251,191,36,.28), 0 0 0 1px rgba(251,191,36,.25); }
}

.pets-card{
    border-color: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.pets-card[class*="pr-"]{
    border-color: color-mix(in srgb, var(--pr-color) 40%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pr-color) 15%, transparent), 0 4px 16px var(--pr-glow);
}
.pets-card__avatar-wrap{
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}
.pets-card__avatar-ring{
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    border: 2px solid var(--pr-color, rgba(255,255,255,.12));
    box-shadow: 0 0 12px var(--pr-glow, transparent);
}
.pets-card__avatar{
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.pets-card__rarity{ color: var(--pr-color, #e2e8f0); }

#tab-slot .quick-item--pets.is-ready .slot-pets-quick-box{
    animation: slot-pets-ready 1.8s ease-in-out infinite;
}
@keyframes slot-pets-ready{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.04); }
}

.pet-levelup-toast{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}
.pet-levelup-toast__emoji{ font-size: 20px; }

.tab-page--pets-hub.is-pets-mode .inv-segment-tabs--pets-hub{
    margin-bottom: 10px;
}
.tab-page--pets-hub:not(.is-pets-mode) .inv-segment-tabs--pets-hub{
    margin-bottom: 6px;
}
.tab-page--pets-hub:not(.is-pets-mode){
    background: transparent;
}
.inv-segment-tabs--pets-hub .inv-segment-tab.is-active{
    color: #fff;
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(142,45,226,.35);
}
.inv-segment-tabs--pets-hub .inv-segment-tab.is-active .inv-segment-tab-badge{
    background: rgba(255,255,255,.22);
    color: #fff;
}

.inv-pets-panel,
.pets-modal-body{
    max-height: none;
    overflow-y: visible;
    padding-bottom: 24px;
}
.pets-screen{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pets-showcase{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 4px 2px 16px;
    overflow: hidden;
}
.pets-showcase__bg{
    position: absolute;
    inset: -20% -10% auto;
    height: 280px;
    background: radial-gradient(circle at 50% 60%, var(--pr-glow, rgba(142,45,226,.25)), transparent 70%);
    pointer-events: none;
    opacity: .85;
}
.pets-showcase__header{
    position: relative;
    text-align: center;
    z-index: 1;
}
.pets-showcase__title-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pets-showcase__name{
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .06em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.pets-showcase__counter{
    font-size: 11px;
    opacity: .6;
    font-weight: 700;
}
.pets-showcase__rarity{
    display: inline-block;
    margin-top: 6px;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    border: 1px solid var(--pr-color, #a855f7);
    color: var(--pr-color, #c084fc);
    background: color-mix(in srgb, var(--pr-color, #a855f7) 12%, transparent);
    box-shadow: 0 0 16px var(--pr-glow, rgba(168,85,247,.25));
}

.pets-showcase__level-block{
    position: relative;
    z-index: 1;
    padding: 0 4px;
}
.pets-showcase__level-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.pets-showcase__level-label{
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    opacity: .85;
}
.pets-showcase__xp{
    font-size: 10px;
    font-weight: 700;
    color: #c4b5fd;
}
.pets-showcase__level-bar{
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}
.pets-showcase__level-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8e2de2, #c084fc, #e879f9);
    box-shadow: 0 0 12px rgba(192,132,252,.5);
    transition: width .4s ease;
}

.pets-showcase__stars{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 16px;
    line-height: 1;
}
.pets-star{
    color: rgba(255,255,255,.15);
    text-shadow: none;
}
.pets-star.is-filled{
    color: #a855f7;
    text-shadow: 0 0 8px rgba(168,85,247,.6);
}

.pets-showcase__stage{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    margin: 4px 0;
}
.pets-showcase__nav{
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.pets-showcase__nav:disabled{
    opacity: .25;
    cursor: default;
}
.pets-showcase__pedestal{
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pets-showcase__glow{
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--pr-glow, rgba(168,85,247,.5)), transparent 70%);
    filter: blur(8px);
    animation: pets-pedestal-glow 2.5s ease-in-out infinite alternate;
}
.pets-showcase__ring{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--pr-color, #a855f7);
    box-shadow: 0 0 20px var(--pr-glow, rgba(168,85,247,.4)), inset 0 0 12px var(--pr-glow, rgba(168,85,247,.2));
    opacity: .85;
}
.pets-showcase__pet-emoji{
    position: relative;
    font-size: 72px;
    line-height: 1;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.45));
    animation: pets-pet-float 3s ease-in-out infinite;
    z-index: 2;
    margin-bottom: 20px;
}
@keyframes pets-pedestal-glow{
    from{ opacity: .6; transform: translateX(-50%) scale(.95); }
    to{ opacity: 1; transform: translateX(-50%) scale(1.05); }
}
@keyframes pets-pet-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
}

.pets-showcase__actions{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.pets-action-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}
.pets-action-card__ico{ font-size: 18px; }
.pets-action-card__label{
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    opacity: .75;
}
.pets-action-card__value{
    font-size: 14px;
    font-weight: 900;
    color: #f9a8d4;
}
.pets-action-card__bar{
    width: 100%;
    height: 4px;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.pets-action-card__fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ec4899, #f9a8d4);
}

.pets-action-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 6px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
}
.pets-action-btn:disabled{
    opacity: .45;
    cursor: default;
}
.pets-action-btn__ico{ font-size: 20px; }
.pets-action-btn__title{
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .03em;
}
.pets-action-btn__sub{
    font-size: 8px;
    opacity: .8;
    font-weight: 700;
}
.pets-action-btn--feed{
    background: linear-gradient(160deg, #00d2ff, #3a7bd5);
    box-shadow: 0 4px 14px rgba(58,123,213,.35);
}
.pets-action-btn--level{
    background: linear-gradient(160deg, #11998e, #38ef7d);
    box-shadow: 0 4px 14px rgba(56,239,125,.25);
}

.pets-evolution-btn{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(142,45,226,.35), rgba(74,0,224,.45));
    border: 1px solid rgba(168,85,247,.35);
    color: #fff;
    cursor: default;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 4px 20px rgba(142,45,226,.2);
}
.pets-evolution-btn:not(:disabled){
    cursor: pointer;
}
.pets-evolution-btn__ico{
    font-size: 28px;
    opacity: .7;
}
.pets-evolution-btn__body{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pets-evolution-btn__title{
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
}
.pets-evolution-btn__sub{
    font-size: 10px;
    opacity: .65;
}

.pets-showcase__bonuses{
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.pets-showcase--empty .pets-showcase__empty-hero{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
}
.pets-showcase__pedestal--empty{
    margin-bottom: 12px;
}
.pets-showcase__empty-title{
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 900;
}
.pets-showcase__empty-text{
    margin: 0;
    font-size: 12px;
    opacity: .72;
    line-height: 1.45;
    max-width: 280px;
}

.pets-screen__manage{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pets-screen__manage .pets-hero{
    background: linear-gradient(160deg, rgba(142,45,226,.12), rgba(15,23,42,.55));
    border-color: rgba(168,85,247,.22);
}
.pets-screen__manage .pets-hero__bar{
    background: linear-gradient(90deg, #8e2de2, #c084fc);
}
.pets-screen__manage .pets-block__count{
    background: rgba(168,85,247,.2);
    color: #e9d5ff;
}

.pets-list--compact{ gap: 8px; }
.pets-card--pick{
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.pets-card--pick.is-active{
    border-color: var(--pr-color, #a855f7) !important;
    box-shadow: 0 0 0 1px var(--pr-color, #a855f7), 0 0 16px var(--pr-glow, rgba(168,85,247,.3)) !important;
}
.pets-card--pick .pets-card__variant{
    font-size: 11px;
    opacity: .8;
    margin-top: 2px;
}

.pets-screen{
    gap: 0;
    padding-bottom: 8px;
}
.pets-screen__hero{
    padding: 0 4px 12px;
    border-bottom: 1px solid rgba(168,85,247,.12);
    margin-bottom: 12px;
}
.pets-screen__content{
    padding: 0 4px;
}

.pets-showcase{
    padding: 8px 8px 4px;
    border-radius: 20px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(168,85,247,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pets-showcase__stage{
    min-height: 150px;
}

.pets-roster{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 4px 4px;
    margin-top: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pets-roster::-webkit-scrollbar{ display: none; }
.pets-roster__item{
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(0,0,0,.25);
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: border-color .2s, transform .15s, box-shadow .2s;
}
.pets-roster__item.is-active{
    border-color: var(--pr-color, #a855f7);
    box-shadow: 0 0 14px var(--pr-glow, rgba(168,85,247,.35));
    transform: translateY(-2px);
}
.pets-roster__avatar{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 26px;
    line-height: 1;
}
.pets-roster__lvl{
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.pets-sub-tabs{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 0 2px 10px;
}
.pets-sub-tab{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 2px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.72);
    cursor: pointer;
    font-family: inherit;
    transition: background .2s, border-color .2s, color .2s;
}
.pets-sub-tab.is-active{
    color: #fff;
    background: linear-gradient(160deg, rgba(142,45,226,.28), rgba(74,0,224,.18));
    border-color: rgba(168,85,247,.35);
    box-shadow: 0 4px 14px rgba(142,45,226,.2);
}
.pets-sub-tab__ico{ font-size: 16px; line-height: 1; flex-shrink: 0; }
.pets-sub-tab__label{
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    padding: 0 1px;
}
.pets-sub-tab__badge{
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #fbbf24;
    color: #422006;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pets-sub-panel{
    min-height: 120px;
}
.pets-sub-panel__hint{
    margin: 0 0 12px;
    font-size: 11px;
    opacity: .68;
    line-height: 1.4;
}

.pets-sub-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    gap: 6px;
}
.pets-sub-empty--inline{ padding: 16px 8px; }
.pets-sub-empty__ico{ font-size: 32px; opacity: .85; }
.pets-sub-empty__title{
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}
.pets-sub-empty__text{
    margin: 0;
    font-size: 12px;
    opacity: .68;
    line-height: 1.4;
    max-width: 260px;
}
.pets-sub-empty__btn{
    margin-top: 8px;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}

.pets-feed-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.05);
}
.pets-feed-head__pet{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
.pets-feed-head__name{
    font-size: 14px;
    font-weight: 800;
}
.pets-feed-head__meta{
    font-size: 11px;
    opacity: .7;
    margin-top: 2px;
}
.pets-fruit-grid--feed{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pets-fruit-card__feed-cta{
    margin-top: 4px;
    font-size: 9px;
    font-weight: 800;
    color: #c4b5fd;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pets-hatchery-section + .pets-hatchery-section{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.pets-hatchery-section__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.pets-hatchery-section__head h4{
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}
.pets-inc-grid--compact{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.pets-inc-slot--compact{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 10px 6px;
    min-height: 140px;
}
.pets-inc-slot--compact .pets-inc-slot__ring{
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
}
.pets-inc-slot--compact .pets-inc-slot__emoji{ font-size: 28px; }
.pets-inc-slot--compact .pets-inc-slot__name{
    font-size: 9px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pets-inc-slot--compact .pets-inc-slot__timer{
    margin: 0;
    font-size: 10px;
}
.pets-inc-slot--compact .pets-inc-progress{
    width: 100%;
    margin-top: 2px;
}
.pets-inc-slot--compact.pets-inc-slot--empty{
    justify-content: center;
    opacity: .4;
}
.pets-btn--sm{
    width: 100%;
    padding: 6px 4px;
    font-size: 9px;
    margin-top: auto;
}
.pets-egg-grid--compact{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pets-progress-card{
    padding: 14px;
    border-radius: 14px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(168,85,247,.15);
}
.pets-progress-card__row{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.pets-progress-card__stat{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pets-progress-card__label{
    font-size: 9px;
    opacity: .68;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pets-progress-card__value{
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}
.pets-progress-card__value--gold{ color: #fde68a; }
.pets-progress-card__bar{
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.pets-progress-card__fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8e2de2, #c084fc);
}
.pets-progress-card__hint{
    margin: 8px 0 0;
    font-size: 10px;
    opacity: .65;
}
.pets-progress-details{
    margin-top: 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.15);
    border: 1px solid rgba(255,255,255,.05);
    overflow: hidden;
}
.pets-progress-details__summary{
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.pets-progress-details__summary::-webkit-details-marker{ display: none; }
.pets-progress-details__body{
    padding: 0 12px 12px;
}
.pets-progress-bonuses{
    margin-top: 12px;
}
.pets-progress-bonuses__title{
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    opacity: .85;
}

.tab-page--pets-hub.is-pets-mode .inv-pets-panel{
    margin: 0;
    width: 100%;
    padding: 0 0 24px;
    overflow-y: auto;
    max-height: calc(100vh - 168px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tab-page--pets-hub.is-pets-mode .inv-pets-panel::-webkit-scrollbar{
    display: none;
}

.tab-page--pets-hub.is-pets-mode{
    --tab-a: #a855f7;
    --tab-b: #6366f1;
    --tab-glow: rgba(168,85,247,.22);
    --tab-border: rgba(168,85,247,.24);
    --tab-surface: rgba(168,85,247,.07);
    --tab-accent: #c084fc;
    background: transparent;
    min-height: calc(100vh - 120px);
}

.tab-hero--pets{
    margin-bottom: 10px;
}

.pets-hero-alert{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(251,191,36,.35);
    background: rgba(251,191,36,.12);
    color: #fde68a;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
}
.pets-hero-alert__num{
    font-size: 11px;
    font-weight: 800;
}

.pets-hero-bonuses{
    position: relative;
    padding: 0 14px 12px;
}
.pets-hero-bonuses__label{
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .55;
    margin-bottom: 6px;
}
.pets-hero-bonuses .pets-bonus-row{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pets-screen{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pets-sub-tabs--premium{
    padding: 3px;
    border-radius: 14px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pets-sub-tabs--premium .pets-sub-tab{
    border: none;
    background: transparent;
    border-radius: 10px;
    padding: 7px 1px;
}
.pets-sub-tabs--premium .pets-sub-tab.is-active{
    background: linear-gradient(135deg, rgba(168,85,247,.92), rgba(99,102,241,.85));
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(168,85,247,.32), inset 0 1px 0 rgba(255,255,255,.1);
}

.pets-sub-panel{
    padding: 0;
    border: none;
    background: transparent;
    min-height: 0;
}
.pets-sub-panel--pets{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pets-sub-panel--pets .pets-showcase{
    padding: 0 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.pets-sub-panel--hatchery,
.pets-sub-panel--breeding{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pets-section-card{
    position: relative;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--tab-border, rgba(148,163,184,.14));
    background:
        radial-gradient(110% 80% at 0% 0%, var(--tab-glow, rgba(168,85,247,.12)), transparent 55%),
        linear-gradient(165deg, rgba(14,18,42,.92), rgba(6,8,22,.96));
    box-shadow: 0 10px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.pets-section-card__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.pets-section-card__head h4{
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}

.pets-section-card--flat{
    padding: 12px 14px 14px;
}
.pets-section-card--flat .pets-section-card__head{
    margin-bottom: 10px;
}

.pets-collection-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 360px){
    .pets-collection-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pets-collection-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 8px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.22);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.pets-collection-card:active{ transform: scale(.97); }
.pets-collection-card.is-active{
    border-color: var(--pr-color, #a855f7);
    background: linear-gradient(165deg, rgba(168,85,247,.18), rgba(0,0,0,.28));
    box-shadow: 0 0 0 1px var(--pr-glow, rgba(168,85,247,.25)), 0 6px 18px rgba(0,0,0,.28);
}
.pets-collection-card__emoji{
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.pets-collection-card__name{
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pets-collection-card__meta{
    font-size: 9px;
    opacity: .55;
    text-align: center;
    line-height: 1.2;
}
.pets-collection-card__tag{
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
    line-height: 1;
}
.pets-collection-card__tag--warn{ opacity: .9; }

.pets-detail-card{
    border-color: color-mix(in srgb, var(--pr-color, #a855f7) 35%, transparent);
}
.pets-detail-card__main{
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pets-detail-card__avatar{
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    font-size: 36px;
    border-radius: 18px;
    border: 2px solid var(--pr-color, #a855f7);
    background: radial-gradient(circle at 30% 20%, var(--pr-glow, rgba(168,85,247,.2)), rgba(0,0,0,.35));
    box-shadow: 0 0 20px var(--pr-glow, rgba(168,85,247,.2));
}
.pets-detail-card__body{
    flex: 1;
    min-width: 0;
}
.pets-detail-card__rarity.pet-rarity-badge{
    margin-bottom: 2px;
}
.pets-detail-card__rarity .pet-rarity-badge__img{
    width: 22px;
    height: 22px;
}
.pets-detail-card__rarity .pet-rarity-badge__label{
    font-size: 11px;
}
.pets-detail-card__name{
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}
.pets-detail-card__bonuses{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.pets-detail-card__xp-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px;
}
.pets-detail-card__max{ opacity: .45; font-weight: 600; }
.pets-detail-card__xp-val{
    font-size: 10px;
    font-weight: 700;
    opacity: .6;
}
.pets-detail-card__bar{
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin-bottom: 12px;
}
.pets-detail-card__bar-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pr-color, #a855f7), #6366f1);
    transition: width .35s ease;
}
.pets-detail-card__actions{
    margin-bottom: 8px;
}
.pets-detail-card__fruits{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.pets-fruit-chip{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.25);
    color: inherit;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.pets-fruit-chip:active{ transform: scale(.96); background: rgba(168,85,247,.2); }
.pets-fruit-chip__ico{
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
}
.pets-fruit-chip__ico img{
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.pets-fruit-chip__qty{ opacity: .75; }

.pets-detail-card__breed-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 11px;
    opacity: .7;
}

.pets-sub-empty-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 28px 16px;
}
.pets-sub-empty-card .pets-sub-empty__ico{ font-size: 36px; }
.pets-sub-empty-card .pets-sub-empty__title{
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}
.pets-sub-empty-card .pets-sub-empty__text{
    margin: 0 0 8px;
    font-size: 12px;
    opacity: .65;
    line-height: 1.45;
    max-width: 260px;
}

.pets-carousel{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 2px 8px;
}
.pets-carousel__stage{
    display: flex;
    align-items: center;
    gap: 4px;
}
.pets-carousel__nav{
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
}
.pets-carousel__nav:disabled{
    opacity: .2;
    cursor: default;
}
.pets-carousel__nav:not(:disabled):active{ transform: scale(.94); }

.pets-carousel-card{
    flex: 1;
    min-width: 0;
}
.pets-carousel-card__frame{
    position: relative;
    padding: 12px 14px 14px;
    border-radius: 20px;
    border: 2px solid color-mix(in srgb, var(--pr-color, #a855f7) 45%, rgba(255,255,255,.12));
    background:
        radial-gradient(120% 90% at 50% 0%, var(--pr-glow, rgba(168,85,247,.15)), transparent 55%),
        linear-gradient(180deg, rgba(18,22,48,.95), rgba(8,10,24,.98));
    box-shadow: 0 12px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
}
.pets-carousel-card__tags{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pets-carousel-card__lvl{
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    color: rgba(255,255,255,.9);
}
.pets-carousel-card__stage{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin: 4px 0 8px;
}
.pets-carousel-card__glow{
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--pr-glow, rgba(168,85,247,.5)), transparent 70%);
    filter: blur(10px);
    animation: pets-pedestal-glow 2.5s ease-in-out infinite alternate;
}
.pets-carousel-card__ring{
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--pr-color, #a855f7);
    box-shadow: 0 0 20px var(--pr-glow, rgba(168,85,247,.35));
    opacity: .85;
}
.pets-carousel-card__pet{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pets-pet-float 3s ease-in-out infinite;
}
.pets-carousel-card__pet .pet-portrait{
    margin-bottom: 16px;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.pets-carousel-card__name{
    margin: 0 0 6px;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
}
.pets-carousel-card .pets-showcase__stars{
    margin-bottom: 12px;
}

.pets-carousel-feed{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc, #e2e8f0);
    color: #0f172a;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    -webkit-tap-highlight-color: transparent;
}
.pets-carousel-feed:disabled{
    opacity: .5;
    cursor: default;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.65);
}
.pets-carousel-feed:not(:disabled):active{ transform: scale(.98); }
.pets-carousel-feed__title{
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
}
.pets-carousel-feed__fruit{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
}
.pets-carousel-feed__ico{
    width: 18px;
    height: 18px;
    object-fit: contain;
    font-size: 16px;
    line-height: 1;
}
.pets-carousel-feed__hint{
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    opacity: .55;
    letter-spacing: .02em;
}

.pets-carousel-dots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
}
.pets-carousel-dots__brand{
    font-size: 18px;
    line-height: 1;
    opacity: .85;
}
.pets-carousel-dots__sep{
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.15);
}
.pets-carousel-dot{
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.28);
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s, background .15s, width .15s, height .15s;
}
.pets-carousel-dot.is-active{
    width: 14px;
    height: 14px;
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,.45);
}
.pets-carousel-dots__add{
    width: 28px;
    height: 28px;
    border: 1px dashed rgba(255,255,255,.25);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.7);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.pets-carousel-dots__add:active{ transform: scale(.95); }

.pets-carousel-panel{
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.28);
}
.pets-carousel-panel__xp{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pets-carousel-panel__lvl-badge{
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid rgba(168,85,247,.5);
    background: rgba(168,85,247,.15);
    font-size: 13px;
    font-weight: 900;
}
.pets-carousel-panel__bar-wrap{
    flex: 1;
    min-width: 0;
}
.pets-carousel-panel__bar{
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin-bottom: 4px;
}
.pets-carousel-panel__bar-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pr-color, #a855f7), #6366f1);
    transition: width .35s ease;
}
.pets-carousel-panel__xp-text{
    font-size: 9px;
    font-weight: 700;
    opacity: .6;
}
.pets-carousel-panel__breed{
    flex-shrink: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .03em;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.pets-carousel-panel__breed:active{ transform: scale(.97); }
.pets-carousel-panel__bonuses{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.pets-carousel-panel__fruits{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.pets-carousel-panel__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    opacity: .7;
}

.pets-feed-section{
    padding-top: 4px;
}
.pets-feed-section .pets-section-card__head{
    margin-bottom: 10px;
}

.pets-showcase__actions{
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.pets-action-btn--primary-wide{
    flex: 1;
}

.pets-breed-active,
.pets-breed-setup{
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--tab-border, rgba(168,85,247,.2));
    background: linear-gradient(165deg, rgba(14,18,42,.92), rgba(6,8,22,.96));
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.pets-empty--inline{
    font-size: 12px;
    opacity: .65;
    text-align: center;
    margin: 8px 0;
}

.pets-hub-header{ display: none; }

.inv-segment-tabs--premium{
    position: relative;
    padding: 4px;
    border-radius: 16px;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.inv-segment-tabs--premium .inv-segment-tab{
    border: none;
    background: transparent;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: 12px;
    padding: 11px 10px;
    transition: color .2s, background .2s, box-shadow .2s;
}
.inv-segment-tabs--premium .inv-segment-tab.is-active{
    color: #fff;
    background: linear-gradient(135deg, rgba(142,45,226,.95), rgba(74,0,224,.88));
    box-shadow: 0 4px 18px rgba(142,45,226,.38), inset 0 1px 0 rgba(255,255,255,.12);
}

.pets-hub-header{
    position: relative;
    padding: 4px 6px 14px;
    overflow: hidden;
}
.pets-hub-header__orbs{
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.pets-hub-header__orb{
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    opacity: .55;
    animation: pets-orb-float 8s ease-in-out infinite;
}
.pets-hub-header__orb--1{
    width: 90px; height: 90px;
    top: -20px; left: -10px;
    background: rgba(168,85,247,.35);
}
.pets-hub-header__orb--2{
    width: 70px; height: 70px;
    top: 10px; right: 0;
    background: rgba(56,189,248,.22);
    animation-delay: -3s;
}
.pets-hub-header__orb--3{
    width: 50px; height: 50px;
    bottom: 0; left: 42%;
    background: rgba(244,114,182,.18);
    animation-delay: -5s;
}
@keyframes pets-orb-float{
    0%, 100%{ transform: translateY(0) scale(1); }
    50%{ transform: translateY(-8px) scale(1.05); }
}
.pets-hub-header__top{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.pets-hub-header__title{
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .02em;
    color: #fff;
}
.pets-hub-header__sub{
    margin: 4px 0 0;
    font-size: 11px;
    opacity: .62;
}
.pets-hub-header__alert{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(251,191,36,.35);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(251,191,36,.18), rgba(245,158,11,.08));
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(251,191,36,.15);
    animation: pets-alert-pulse 2s ease-in-out infinite;
}
.pets-hub-header__alert-ico{ font-size: 20px; }
.pets-hub-header__alert-num{
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #fbbf24;
    color: #422006;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes pets-alert-pulse{
    0%, 100%{ box-shadow: 0 4px 14px rgba(251,191,36,.15); }
    50%{ box-shadow: 0 4px 22px rgba(251,191,36,.32); }
}

.pets-hub-header__stats{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.pets-stat-pill{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    text-align: left;
    transition: border-color .2s, background .2s, transform .15s;
}
.pets-stat-pill:active{ transform: scale(.98); }
.pets-stat-pill__ico{ font-size: 16px; line-height: 1; opacity: .9; }
.pets-stat-pill__body{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pets-stat-pill__val{
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
}
.pets-stat-pill__val--gold{ color: #fde68a; }
.pets-stat-pill__lbl{
    font-size: 9px;
    opacity: .58;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pets-showcase{
    padding: 14px 12px 12px;
    border-radius: 22px;
    background:
        linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.12) 100%);
    border: 1px solid rgba(168,85,247,.18);
    box-shadow:
        0 8px 32px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}
.pets-showcase__particles{
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1px),
        radial-gradient(circle, rgba(168,85,247,.12) 1px, transparent 1px);
    background-size: 48px 48px, 72px 72px;
    background-position: 0 0, 24px 24px;
    opacity: .35;
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.pets-showcase__header{
    margin-bottom: 2px;
}
.pets-showcase__rarity{
    margin-top: 0;
    margin-bottom: 6px;
}
.pets-showcase__name{
    font-size: 20px;
    letter-spacing: .08em;
}
.pets-showcase__stage{
    min-height: 168px;
    margin: 0;
}
.pets-showcase__nav{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: rgba(255,255,255,.14);
    background: rgba(0,0,0,.22);
    transition: background .2s, border-color .2s, transform .15s;
}
.pets-showcase__nav:not(:disabled):active{ transform: scale(.94); }
.pets-showcase__pet-emoji{
    font-size: 80px;
}
.pets-showcase__meta{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.06);
}
.pets-showcase__level-max{
    opacity: .55;
    font-weight: 700;
}
.pets-showcase__actions{
    grid-template-columns: minmax(72px, 0.85fr) minmax(0, 2fr) 52px;
    gap: 8px;
    margin-top: 4px;
}
.pets-action-btn--primary-wide{
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
    text-align: left;
    min-height: 56px;
}
.pets-action-btn__body{
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}
.pets-action-btn--primary-wide .pets-action-btn__title{
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.pets-action-btn--primary-wide .pets-action-btn__sub{
    font-size: 10px;
    opacity: .88;
}
.pets-action-btn--hatchery,
.pets-action-btn--ghost-mini{
    position: relative;
    padding: 0;
    min-height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
}
.pets-action-btn--hatchery{
    background: linear-gradient(160deg, rgba(251,191,36,.2), rgba(245,158,11,.1));
    border-color: rgba(251,191,36,.28);
}
.pets-action-btn__badge{
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #fbbf24;
    color: #422006;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pets-screen__hero{
    padding: 0 2px 14px;
    border-bottom: none;
    margin-bottom: 0;
}
.pets-screen__dock{
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0 2px 10px;
    background: linear-gradient(180deg, rgba(8,13,24,.92) 70%, rgba(8,13,24,0) 100%);
    backdrop-filter: blur(10px);
}
.pets-sub-tabs{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 0;
}
.pets-sub-tab{
    padding: 8px 2px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    transition: transform .15s, box-shadow .2s, background .2s;
}
.pets-sub-tab:active{ transform: scale(.97); }
.pets-sub-tab.is-active{
    background: linear-gradient(160deg, rgba(142,45,226,.32), rgba(74,0,224,.22));
    box-shadow: 0 4px 16px rgba(142,45,226,.22);
}

.pets-sub-panel{
    padding: 16px;
    border-radius: 20px;
    background:
        linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.pets-quick-feed{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(56,239,125,.28);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(17,153,142,.22), rgba(56,239,125,.12));
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 4px 16px rgba(56,239,125,.12);
    transition: transform .15s, box-shadow .2s;
}
.pets-quick-feed:active{
    transform: scale(.985);
    box-shadow: 0 2px 10px rgba(56,239,125,.18);
}
.pets-quick-feed__ico img{
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.pets-quick-feed__body{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pets-quick-feed__title{
    font-size: 13px;
    font-weight: 900;
}
.pets-quick-feed__sub{
    font-size: 10px;
    opacity: .78;
    text-transform: capitalize;
}
.pets-quick-feed__arrow{
    font-size: 18px;
    opacity: .65;
    font-weight: 700;
}
.pets-feed-head__bonuses{
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pets-bonus-chip--muted{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.55) !important;
}

.pets-fruit-grid--feed .pets-fruit-card--feed{
    padding: 12px 8px 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.07);
    transition: border-color .2s, transform .15s, box-shadow .2s;
}
.pets-fruit-grid--feed .pets-fruit-card--feed:active{
    transform: scale(.97);
    border-color: rgba(168,85,247,.4);
    box-shadow: 0 0 16px rgba(168,85,247,.15);
}

.pets-inc-slot--compact{
    min-height: 148px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
}
.pets-inc-slot--compact.is-ready{
    background: linear-gradient(165deg, rgba(251,191,36,.12), rgba(0,0,0,.22));
}
.pets-egg-grid--compact .pets-egg-card{
    border-radius: 16px;
    transition: transform .15s;
}
.pets-egg-grid--compact .pets-egg-card:active{ transform: scale(.98); }

.pets-evolution-teaser{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(142,45,226,.14), rgba(74,0,224,.1));
    border: 1px dashed rgba(168,85,247,.28);
    opacity: .85;
}
.pets-evolution-teaser__ico{ font-size: 24px; opacity: .7; }
.pets-evolution-teaser__body{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pets-evolution-teaser__title{
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
}
.pets-evolution-teaser__sub{
    font-size: 10px;
    opacity: .65;
}
.pets-evolution-teaser__tag{
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: .7;
}

.pets-roster{
    padding: 8px 2px 2px;
    margin-top: 2px;
}
.pets-roster__item{
    width: 56px;
    height: 56px;
    border-radius: 18px;
}

.pets-sub-panel--breeding{ padding: 0 0 8px; }
.pets-breed-slots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}
.pets-breed-slots__heart{ font-size: 22px; flex-shrink: 0; }
.pets-breed-slot{
    flex: 1;
    min-width: 0;
    max-width: 150px;
    min-height: 120px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    position: relative;
    text-align: center;
}
.pets-breed-slot--empty{
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pets-breed-slot--empty:hover{
    border-color: rgba(236,72,153,.45);
    background: rgba(236,72,153,.08);
}
.pets-breed-slot--filled{ border-style: solid; }
.pets-breed-slot__label{ font-size: 10px; font-weight: 800; opacity: .55; text-transform: uppercase; letter-spacing: .06em; }
.pets-breed-slot__plus{ font-size: 28px; line-height: 1; opacity: .45; }
.pets-breed-slot__hint{ font-size: 10px; opacity: .5; }
.pets-breed-slot__emoji{ font-size: 32px; line-height: 1; }
.pets-breed-slot__name{ font-size: 11px; font-weight: 800; }
.pets-breed-slot__meta{ font-size: 10px; opacity: .65; }
.pets-breed-slot__count{ font-size: 9px; opacity: .5; }
.pets-breed-slot__cd{ font-size: 9px; color: #fbbf24; }
.pets-breed-slot__warn{ font-size: 9px; color: #f87171; }
.pets-breed-slot__clear{
    position: absolute;
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    border: none; border-radius: 999px;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.pets-breed-picker{ margin-bottom: 12px; }
.pets-breed-picker__title{ font-size: 11px; font-weight: 700; margin-bottom: 8px; opacity: .75; }
.pets-breed-picker__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.pets-breed-pick-card{
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}
.pets-breed-pick-card.is-disabled{ opacity: .4; pointer-events: none; }
.pets-breed-pick-card__emoji{ font-size: 22px; }
.pets-breed-pick-card__name{ font-size: 9px; font-weight: 700; text-align: center; }
.pets-breed-pick-card__meta{ font-size: 9px; opacity: .6; }
.pets-breed-pick-card__warn{ font-size: 8px; color: #f87171; text-align: center; }
.pets-breed-preview{ margin-bottom: 12px; }
.pets-breed-preview__title{ font-size: 11px; font-weight: 800; margin-bottom: 8px; opacity: .8; }
.pets-breed-outcomes{ display: flex; flex-direction: column; gap: 6px; }
.pets-breed-outcome{
    display: grid;
    grid-template-columns: 72px 42px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}
.pets-breed-outcome__rarity{ font-weight: 700; }
.pets-breed-outcome__pct{ font-weight: 900; text-align: right; }
.pets-breed-outcome__bar{
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.pets-breed-outcome__fill{
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ec4899, #a855f7);
}
.pets-breed-cost{
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pets-breed-cost__row{
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}
.pets-breed-booster{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 10px;
    margin-bottom: 12px;
    opacity: .85;
    cursor: pointer;
}
.pets-breed-hint{ font-size: 10px; color: #f87171; text-align: center; margin-top: 6px; }
.pets-btn--wide{ width: 100%; }
.pets-breed-active{
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(236,72,153,.12), rgba(168,85,247,.08));
    border: 1px solid rgba(236,72,153,.2);
    padding: 16px;
    text-align: center;
}
.pets-breed-active__title{ font-size: 14px; font-weight: 900; margin-bottom: 10px; }
.pets-breed-active__parents{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 8px;
}
.pets-breed-active__heart{ font-size: 18px; }
.pets-breed-active__timer{ font-size: 20px; font-weight: 900; margin-bottom: 8px; }
.pets-breed-active__progress{
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    overflow: hidden;
    margin-bottom: 10px;
}
.pets-breed-active__fill{
    height: 100%;
    background: linear-gradient(90deg, #ec4899, #f472b6);
    border-radius: 999px;
    transition: width .3s;
}
.pets-breed-active__result{ font-size: 11px; opacity: .8; margin-bottom: 10px; }
.pets-breed-active__actions{ display: flex; justify-content: center; gap: 8px; }
.egg-breeding .pets-egg-card__emoji{ filter: drop-shadow(0 0 6px rgba(236,72,153,.5)); }
.pets-breed-slot.pr-common{ border-color: rgba(148,163,184,.35); }
.pets-breed-slot.pr-rare{ border-color: rgba(59,130,246,.35); }
.pets-breed-slot.pr-epic{ border-color: rgba(168,85,247,.35); }
.pets-breed-slot.pr-legendary{ border-color: rgba(251,191,36,.35); }
.pets-egg-card--breeding .pets-egg-card__preview{
    font-size: 10px;
    font-weight: 700;
    opacity: .85;
    margin-top: 2px;
}
.pets-egg-card--breeding .pets-egg-card__qty{ display: none; }
.pets-inc-slot__preview{
    font-size: 9px;
    font-weight: 700;
    opacity: .75;
    display: block;
    margin-top: 2px;
}
.pets-inc-slot.is-breeding .pets-inc-slot__emoji{ font-size: 22px; }

.pets-sub-panel--grid{
    padding: 12px;
    gap: 12px;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(124,58,237,.14), transparent 55%),
        linear-gradient(180deg, rgba(12,16,36,.96), rgba(6,8,20,.98));
    border: 1px solid rgba(168,85,247,.14);
}

.pets-grid-toolbar{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pets-grid-toolbar__row{
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.pets-grid-search{
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.28);
}
.pets-grid-search__ico{
    font-size: 13px;
    opacity: .55;
    flex-shrink: 0;
}
.pets-grid-search__input{
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    outline: none;
}
.pets-grid-search__input::placeholder{ color: rgba(255,255,255,.38); }

.pets-grid-tool{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.82);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pets-grid-tool.is-active{
    border-color: rgba(168,85,247,.35);
    background: rgba(168,85,247,.14);
    color: #fff;
}
.pets-grid-sort{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-width: 0;
}
.pets-grid-sort__select{
    width: auto;
    max-width: 108px;
    min-width: 88px;
    height: 38px;
    padding: 0 24px 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background-color: rgba(0,0,0,.28);
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
@media (max-width: 380px){
    .pets-grid-tool__label{ display: none; }
    .pets-grid-tool{ padding: 0; width: 38px; }
    .pets-grid-sort__select{
        min-width: 78px;
        max-width: 92px;
        font-size: 10px;
        padding-left: 8px;
    }
}

.pets-grid-filters{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pets-grid-filter-chip{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.78);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pets-grid-filter-chip.is-active{
    border-color: rgba(168,85,247,.45);
    background: rgba(168,85,247,.2);
    color: #fff;
}

.pets-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pets-grid-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    width: 100%;
    aspect-ratio: 0.92 / 1;
    min-height: 0;
    padding: 10px 8px 10px;
    border-radius: 22px;
    border: 1px solid rgba(141,116,219,.18);
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(124,58,237,.16), transparent 62%),
        linear-gradient(180deg, rgba(19,18,54,.98), rgba(8,11,31,.99));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 10px 22px rgba(0,0,0,.22);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, transform .12s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.pets-grid-card::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 26%),
        radial-gradient(120% 90% at 50% 100%, transparent 60%, rgba(255,255,255,.018) 100%);
    opacity: .85;
}
.pets-grid-card::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.025);
    box-shadow: inset 0 -20px 30px rgba(0,0,0,.12);
    opacity: 1;
    pointer-events: none;
}
.pets-grid-card:active{ transform: scale(.97); }
.pets-grid-card.is-selected{
    border-color: rgba(167,139,250,.46);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(167,139,250,.18),
        0 0 20px rgba(124,58,237,.18),
        0 12px 26px rgba(0,0,0,.24);
}
.pets-grid-card.pr-legendary::after,
.pets-grid-card.pr-mythic::after,
.pets-grid-card.pr-ancient::after,
.pets-grid-card.pr-divine::after{
    box-shadow:
        inset 0 -20px 30px rgba(0,0,0,.12),
        0 0 0 1px color-mix(in srgb, var(--pr-color) 20%, transparent),
        0 0 12px color-mix(in srgb, var(--pr-color) 14%, transparent);
}
.pets-grid-card.pr-divine::before{
    opacity: .75;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(254,240,138,.18), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%);
}

.pets-grid-card__lvl{
    position: absolute;
    top: 13px;
    left: 14px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
    z-index: 2;
}
.pets-grid-card__rarity{
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    filter: drop-shadow(0 4px 10px rgba(124,58,237,.24));
}
.pet-rarity-badge--grid{
    width: 28px;
    height: 28px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--pr-color) 48%, rgba(255,255,255,.12));
    background:
        radial-gradient(80% 80% at 50% 30%, rgba(255,255,255,.12), transparent 70%),
        color-mix(in srgb, var(--pr-color) 18%, rgba(19,18,54,.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 0 12px color-mix(in srgb, var(--pr-color) 22%, transparent);
}
.pet-rarity-badge--grid .pet-rarity-badge__img{
    width: 14px;
    height: 14px;
}

.pets-grid-card__portrait{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    margin-top: 18px;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}
.pet-portrait--grid{
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    font-size: clamp(34px, 12vw, 52px);
}
.pets-grid-card__portrait .pet-portrait--grid{
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.34));
}

.pets-grid-card__name{
    flex-shrink: 0;
    width: 100%;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    line-height: 1.15;
    color: #fff;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 6px rgba(0,0,0,.28);
}
.pets-grid-card .pets-showcase__stars{
    flex-shrink: 0;
    margin: 2px 0 0;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.pets-grid-card .pets-star{
    font-size: 12px;
}
.pets-grid-card .pets-star.is-filled{
    color: #a855f7;
    text-shadow: 0 0 10px rgba(168,85,247,.42);
}

.pets-grid-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 12px;
    text-align: center;
}
.pets-grid-empty__ico{ font-size: 28px; opacity: .7; }
.pets-grid-empty__title{
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}
.pets-grid-empty__text{
    margin: 0;
    font-size: 11px;
    opacity: .6;
}

.pets-grid-detail{
    position: relative;
}
.pets-grid-detail__close{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pets-grid-stats{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.24);
}
.pets-grid-stats__total{
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.75);
}
.pets-grid-stats__total strong{
    color: #fff;
    font-weight: 900;
}
.pets-grid-stats__rarities{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pets-grid-stats__chip{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
}
.pets-grid-stats__chip-img{
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
.pets-grid-stats__chip-count{
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.tab-page--pets-hub.is-pets-mode .pets-screen__content{
    padding: 0;
}
.tab-page--pets-hub.is-pets-mode .pets-sub-panel--pets,
.tab-page--pets-hub.is-pets-mode .pets-sub-panel--hatchery,
.tab-page--pets-hub.is-pets-mode .pets-sub-panel--breeding,
.tab-page--pets-hub.is-pets-mode .pets-sub-panel--grid{
    padding-left: 0;
    padding-right: 0;
}
.tab-page--pets-hub.is-pets-mode .pets-sub-panel--hatchery,
.tab-page--pets-hub.is-pets-mode .pets-sub-panel--breeding{
    padding-top: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.tab-page--pets-hub.is-pets-mode .pets-sub-panel--grid{
    padding: 10px 0 8px;
    border: none;
    background: transparent;
    box-shadow: none;
}
.tab-page--pets-hub.is-pets-mode .pets-screen{
    gap: 10px;
}
.tab-page--pets-hub.is-pets-mode .pets-sub-tabs--premium{
    margin: 0 0 2px;
    border-radius: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tab-page--pets-hub.is-pets-mode .pets-sub-tab.is-active{
    background: linear-gradient(160deg, #7c3aed, #6d28d9);
    border-color: rgba(167,139,250,.45);
    box-shadow: 0 4px 18px rgba(124,58,237,.35);
}

.pets-sub-panel--fusion{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 8px;
}
.pets-fusion-machine{
    position: relative;
    padding: 18px 12px 12px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(30,27,75,.95), rgba(15,15,35,.98));
    border: 1px solid rgba(139,92,246,.35);
    overflow: hidden;
}
.pets-fusion-machine__glow{
    position: absolute;
    inset: 20% 10% auto;
    height: 120px;
    background: radial-gradient(circle, rgba(167,139,250,.35), transparent 70%);
    pointer-events: none;
}
.pets-fusion-machine__core{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}
.pets-fusion-machine__icon{
    font-size: 42px;
    filter: drop-shadow(0 0 12px rgba(167,139,250,.6));
}
.pets-fusion-machine__title{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #c4b5fd;
}
.pets-fusion-slots{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.pets-fusion-slot{
    position: relative;
    min-height: 78px;
    border-radius: 14px;
    border: 1px dashed rgba(167,139,250,.35);
    background: rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
}
.pets-fusion-slot--empty{
    cursor: pointer;
    border-style: dashed;
}
.pets-fusion-slot__idx{
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 10px;
    color: rgba(255,255,255,.35);
}
.pets-fusion-slot__plus{
    font-size: 22px;
    color: rgba(196,181,253,.7);
}
.pets-fusion-slot__remove{
    position: absolute;
    top: 2px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.pets-fusion-slot__lvl{
    font-size: 10px;
    color: rgba(255,255,255,.65);
}
.pets-fusion-warning{
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: #fca5a5;
}
.pets-fusion-preview{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
}
.pets-fusion-preview__row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.pets-fusion-preview__rarities{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}
.pets-fusion-preview__bonus{
    margin: 0;
    color: #c4b5fd;
    font-size: 11px;
}
.pets-fusion-hint,
.pets-fusion-actions{
    text-align: center;
}
.pets-fusion-actions{
    display: flex;
    gap: 10px;
    align-items: center;
}
.pets-fusion-picker{
    margin-top: 4px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.08);
}
.pets-fusion-picker__title{
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
}
.pets-fusion-picker__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.pets-fusion-pick-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    font-size: 11px;
}
.pets-fusion-pick-card.is-disabled{
    opacity: .45;
    pointer-events: none;
}
.pets-fusion-pick-card__warn{
    color: #fca5a5;
    font-size: 10px;
    text-align: center;
}
.pets-origin-meta{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}
.pets-origin-meta__label{
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px;
}
.pet-fusion-stage{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 20px;
    min-height: 420px;
}
.pet-fusion-aura{
    position: absolute;
    inset: 10% 15%;
    background: radial-gradient(circle, rgba(167,139,250,.25), transparent 70%);
    opacity: .6;
}
.pet-fusion-chamber{
    position: relative;
    width: 140px;
    height: 140px;
    margin: 20px 0;
    border-radius: 50%;
    border: 2px solid rgba(167,139,250,.5);
    background: radial-gradient(circle at 50% 35%, rgba(124,58,237,.35), rgba(15,15,35,.9));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(124,58,237,.35);
}
.pet-fusion-orbit span{
    position: absolute;
    font-size: 24px;
    animation: petFusionOrbit 1.2s linear infinite;
}
.pet-fusion-orbit span:nth-child(1){ animation-delay: 0s; }
.pet-fusion-orbit span:nth-child(2){ animation-delay: -.4s; }
.pet-fusion-orbit span:nth-child(3){ animation-delay: -.8s; }
@keyframes petFusionOrbit{
    0%{ transform: rotate(0deg) translateX(42px) rotate(0deg); opacity: 1; }
    100%{ transform: rotate(360deg) translateX(42px) rotate(-360deg); opacity: .5; }
}
.pet-fusion-stage.is-flash .pet-fusion-chamber{
    box-shadow: 0 0 60px rgba(255,255,255,.8), 0 0 100px rgba(167,139,250,.8);
    background: #fff;
    transition: all .2s ease;
}
.pet-fusion-stage.is-revealed .pet-fusion-chamber{
    opacity: 0;
    transform: scale(.6);
    transition: all .35s ease;
}
.pet-fusion-reveal{
    position: absolute;
    top: 72px;
}

.pets-sub-panel--pets.pets-sub-panel--profile-open{
    padding: 0;
}
.pets-profile-view{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px 16px;
}
.pets-profile-view__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pets-profile-view__back{
    border: none;
    background: rgba(255,255,255,.06);
    color: #c4b5fd;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
}
.pets-profile-view__id{
    font-size: 11px;
    opacity: .45;
    font-weight: 600;
}
.pets-profile-view__hero{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0 8px;
}
.pets-profile-view__glow{
    position: absolute;
    inset: 0 10% 20%;
    background: radial-gradient(circle, var(--tab-glow, rgba(168,85,247,.2)), transparent 70%);
    pointer-events: none;
}
.pets-profile-view__portrait .pet-portrait{
    width: 120px;
    height: 120px;
}
.pets-profile-view__title{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.pets-profile-view__name{
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}
.pets-profile-view__variant{
    margin: 0;
    font-size: 12px;
    opacity: .65;
}
.pets-profile-section{
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.22);
}
.pets-profile-section__title{
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.pets-profile-stats,
.pets-profile-bonuses{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}
.pets-profile-stat{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pets-profile-stat--wide{
    grid-column: 1 / -1;
}
.pets-profile-stat__label{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.45);
}
.pets-profile-stat__value{
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.pets-profile-stat__value--bonus{
    color: #86efac;
}
.pets-profile-stat__value.is-ok{ color: #86efac; }
.pets-profile-stat__value.is-warn{ color: #fca5a5; font-size: 11px; font-weight: 600; }
.pets-profile-stat__muted{
    opacity: .45;
    font-weight: 600;
    font-size: 11px;
}
.pets-profile-stat__bar{
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.pets-profile-stat__bar-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.pets-profile-origin{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pets-profile-origin__burned-title{
    font-size: 11px;
    color: rgba(255,255,255,.55);
}
.pets-profile-origin__burned-list{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pets-profile-origin__burned-chip{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 4px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    font-size: 10px;
    font-weight: 700;
}
.pets-profile-empty{
    margin: 0;
    font-size: 12px;
    opacity: .55;
}
.pets-profile-view__actions{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pets-profile-view__actions-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pets-profile-fruits{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.pets-profile-cooldown-btn{
    align-self: center;
}
.pet-portrait--profile .pet-portrait__img,
.pet-portrait--profile .pet-portrait__emoji{
    width: 120px;
    height: 120px;
    font-size: 72px;
}

.pets-uid-chip{
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(167,139,250,.45);
    background: rgba(124,58,237,.18);
    color: #ddd6fe;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
}
.pets-uid-chip--fused{
    border-color: rgba(248,113,113,.45);
    background: rgba(127,29,29,.25);
    color: #fecaca;
}
.pets-uid-legacy{
    font-size: 11px;
    opacity: .55;
}
.pets-profile-stat__value--uids{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.pets-profile-uid-plus{
    opacity: .45;
    font-weight: 700;
}
.pets-profile-origin__burned-chip--link{
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.pet-registry-shell{
    max-width: 420px;
}
.pet-registry-modal-card{
    background: linear-gradient(165deg, rgba(14,18,42,.98), rgba(6,8,22,.99));
    border-radius: 18px;
    border: 1px solid rgba(167,139,250,.25);
    overflow: hidden;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.pet-registry-modal-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.pet-registry-modal-title{
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}
.pet-registry-modal-body{
    padding: 12px 14px 16px;
    overflow-y: auto;
}
.pets-registry-profile.is-readonly .pets-registry-profile__hero{
    opacity: .92;
}
.pets-registry-status{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 12px;
}
.pets-registry-status--fused{
    background: rgba(127,29,29,.28);
    border: 1px solid rgba(248,113,113,.35);
    color: #fecaca;
}
.pets-registry-status__icon{
    font-size: 20px;
    line-height: 1;
}
.pets-registry-status__body{
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.pets-registry-status__body strong{
    font-size: 13px;
}
.pets-registry-status__body span{
    opacity: .8;
    font-size: 11px;
}
.pets-registry-status__result{
    width: 100%;
    margin-top: 6px;
    font-size: 11px;
}
.pets-registry-profile__hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pets-registry-profile__title{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.pets-registry-profile__name{
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}
.pets-registry-profile__meta{
    margin: 0;
    font-size: 12px;
    opacity: .65;
}
.pets-registry-profile__uid{
    margin-top: 4px;
}

.inv-egg-bag-card{
    --inv-rarity-glow: rgba(167,139,250,.32);
    border-color: rgba(167,139,250,.32);
}
.inv-egg-bag-badge{
    background: rgba(167,139,250,.16);
    border-color: rgba(167,139,250,.38);
    color: #c4b5fd;
}
.inv-egg-bag-card .inv-chest-foot{
    flex-direction: column;
    gap: 2px;
    min-height: 30px;
}
.inv-egg-bag-emoji{
    font-size: 34px;
    line-height: 1;
}
.inv-egg-bag-body-wrap #inv-egg-bag-body{
    margin-bottom: 8px;
}
#inv-egg-bag-modal .inv-egg-bag-modal-art{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 120px;
    min-height: 120px;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.12);
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(167,139,250,.22), transparent),
        radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.12), transparent),
        rgba(2,6,23,0.65);
    overflow: hidden;
    --inv-rarity-glow: rgba(167,139,250,.45);
}
#inv-egg-bag-modal .inv-egg-bag-modal-art::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    pointer-events: none;
    background: radial-gradient(80% 60% at 50% 0%, var(--inv-rarity-glow), transparent);
}
#inv-egg-bag-modal .inv-egg-bag-modal-art .inv-chest-modal-emoji{
    position: relative;
    z-index: 1;
    font-size: 64px;
    line-height: 1;
}
#inv-egg-bag-modal .inv-chest-modal-actions{
    display: block;
    margin-top: 4px;
    padding-top: 2px;
}
#inv-egg-bag-modal .dr-claim{
    width: 100%;
    min-height: 44px;
}
.inv-egg-bag-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}
.inv-egg-bag-empty{
    margin: 0 0 8px;
    font-size: 11px;
    opacity: .72;
    line-height: 1.35;
    text-align: center;
}
.inv-eggs-hint{
    margin: 10px 0 0;
    font-size: 10px;
    opacity: .62;
    line-height: 1.35;
}
.pets-egg-card--bag{
    cursor: default;
    pointer-events: none;
}
.pets-egg-card--bag:active{
    transform: none;
}
.pets-inc-hint{
    margin: 0 0 10px;
    font-size: 10px;
    opacity: .68;
    line-height: 1.35;
}
.pets-inc-slot--pickable{
    cursor: pointer;
    border: 1px dashed rgba(125,211,252,.45);
    background: rgba(56,189,248,.06);
    opacity: 1 !important;
    transition: border-color .15s, background .15s, transform .12s;
}
.pets-inc-slot--pickable:hover,
.pets-inc-slot--pickable:focus-visible{
    border-color: rgba(125,211,252,.75);
    background: rgba(56,189,248,.12);
    outline: none;
}
.pets-inc-slot--pickable:active{
    transform: scale(.97);
}
.pets-inc-slot__plus{
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: #7dd3fc;
    margin: 4px 0;
}
.pets-inc-slot__label{
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(186,230,253,.85);
}
.inc-egg-picker-shell{
    max-width: 400px;
}
.inc-egg-picker-card{
    background: linear-gradient(165deg, rgba(14,18,42,.98), rgba(6,8,22,.99));
    border-radius: 18px;
    border: 1px solid rgba(56,189,248,.28);
    overflow: hidden;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}
.inc-egg-picker-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.inc-egg-picker-title{
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}
.inc-egg-picker-body{
    padding: 12px 14px 16px;
    overflow-y: auto;
    scrollbar-width: none;
}
.inc-egg-picker-body::-webkit-scrollbar{
    display: none;
}
.inc-egg-picker-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.inc-egg-picker-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 20px 12px;
}
.inc-egg-picker-empty__ico{
    font-size: 36px;
}
.inc-egg-picker-empty__title{
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}
.inc-egg-picker-empty__text{
    margin: 0;
    font-size: 11px;
    opacity: .68;
    line-height: 1.35;
}