/* =========================================================
   SlotClicker — SINGLE CLEAN CSS (no duplicates)
   ========================================================= */

/* =========================
   DESIGN TOKENS - Unified Design System
   ========================= */
:root{
    /* Base Colors */
    --bg-main: #020617;
    --bg-surface: rgba(15, 23, 42, 0.6);
    --bg-elevated: rgba(30, 41, 59, 0.7);

    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-disabled: #64748b;

    /* Legacy text variables for compatibility */
    --text: var(--text-primary);
    --muted: var(--text-muted);

    /* Border Colors */
    --border-subtle: rgba(148, 163, 184, 0.12);
    --border-default: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.28);
    --border-accent: rgba(99, 102, 241, 0.35);

    /* Legacy border variables */
    --b1: var(--border-default);
    --b2: rgba(30, 64, 175, 0.75);

    /* Accent Colors */
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-success: #22c55e;
    --accent-warning: #facc15;
    --accent-error: #ef4444;
    --accent-info: #3b82f6;

    /* Legacy accent variables */
    --accent: var(--accent-primary);
    --green: var(--accent-success);
    --gold: var(--accent-warning);

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --nav-height: 64px;
    --header-height: 80px;

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #22c55e 100%);
    --grad-soft: radial-gradient(circle at top, rgba(2, 6, 23, 0.75), rgba(15, 23, 42, 0.95));
    --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    --grad-surface-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));

    /* Legacy gradient variables */
    --grad-a: var(--grad-primary);

    /* Progress Bars */
    --progress-primary: linear-gradient(90deg, #4f46e5, #22c55e);
    --progress-secondary: linear-gradient(90deg, #22c55e, #2dd4bf);
    --progress: var(--progress-primary);
    --progress2: var(--progress-secondary);
}

/* =========================
   GLOBAL / RESET
   ========================= */
*{ box-sizing:border-box; }

html,body{
    height:100%;
    margin:0;
    padding:0;
    color:var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    overflow-x:hidden;
}

body{
    overflow:hidden;
    overscroll-behavior: none;

    display:flex;
    justify-content:center;

    /* background */
    background:
            radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1.6px) 0 0 / 90px 90px,
            radial-gradient(circle, rgba(96,165,250,0.06) 1px, transparent 1.6px) 30px 40px / 140px 140px,
            radial-gradient(circle at 50% -10%, rgba(96,165,250,0.22) 0%, rgba(96,165,250,0) 42%),
            radial-gradient(circle at 15% 10%, rgba(99,102,241,0.18) 0%, rgba(99,102,241,0) 45%),
            radial-gradient(circle at top, #0E0B4E 0%, #060425 55%, #050420 100%),
            linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
    background-attachment: fixed;

    /* anti text-selection / magnifier globally */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* allow selection where needed */
input, textarea, select{
    -webkit-user-select: text;
    user-select: text;
}

/* =========================
   APP LAYOUT
   ========================= */
#app{
    width:100%;
    max-width:520px;
    height:100dvh;
    display:flex;
    flex-direction:column;
    padding:8px 10px 8px;
    overflow:hidden;
}

@supports(padding: max(0px)){
    #app{ padding-bottom:max(env(safe-area-inset-bottom), 8px); }
}

.app-main{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;

    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;

    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0) + 16px);

    scrollbar-width:none;
    -ms-overflow-style:none;
}
.app-main::-webkit-scrollbar{ width:0; height:0; }

.screen{ display:none; flex-direction:column; gap:8px; }
.screen-active{ display:flex; }

/* =========================
   PARTICLES
   ========================= */
#particles-container{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9000;
}
.coin,.bonus{
    position:absolute;
    width:20px;height:20px;
    font-size:18px;
    user-select:none;
    pointer-events:none;
}

/* =========================
   PANELS - Unified Design
   ========================= */
.panel{
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Hover effects removed for mobile app */

.panel-soft{
    background: var(--grad-soft);
    box-shadow: var(--shadow-sm);
}

.panel-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    letter-spacing: 0.01em;
}

.panel-title-main{
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-primary);
}

.panel-title-main span.icon{
    font-size: 18px;
}

.panel-sub{
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* =========================
   HEADER (premium v2)
   ========================= */
.app-header{
    width:100%;
    display:flex;
    justify-content:center;
    padding: 0 0 8px;
    background: transparent;
}

.profile-header{
    width:100%;
    max-width:520px;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow:visible;
}

.profile-main{
    position:relative;
    height:56px;
    border-radius:999px;

    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 14px 32px rgba(0,0,0,0.35),
            inset 0 1px 0 rgba(255,255,255,0.06);

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

    display:flex;
    align-items:center;
    padding-left:60px;
    padding-right:12px;
}

.profile-avatar{
    position:absolute;
    left:-4px;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border-radius:999px;
    overflow:hidden;
    z-index:5;

    background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.22), rgba(13,10,58,1));
    border:1px solid rgba(99,102,241,0.25);
    box-shadow:
            0 14px 28px rgba(0,0,0,0.45),
            0 0 0 6px rgba(99,102,241,0.06);
}
.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.profile-resources{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-left:6px;
    flex-wrap: nowrap; /* Запрещаем перенос на новую строку */
    min-width: 0; /* Позволяет элементам уменьшаться */
}

.res-pill{
    --badge: 26px;

    flex:1 1 0;
    min-width:0;
    max-width:100%; /* Ограничиваем максимальную ширину */
    height:30px;
    border-radius:999px;
    position:relative;

    background: rgba(17,20,89,0.72);
    border:1px solid rgba(96,165,250,0.14);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.05),
            0 10px 16px rgba(0,0,0,0.18);

    display:flex;
    align-items:center;

    padding-left: calc(var(--badge) + 8px);
    padding-right: 10px;
    overflow:hidden;
}

.res-badge{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width: var(--badge);
    height: var(--badge);
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    background: radial-gradient(circle at 35% 25%,
    rgba(99,102,241,0.30),
    rgba(14, 8, 67, 0.65)
    );
    border:1px solid rgba(99,102,241,0.22);
    border-left:0; border-top:0; border-bottom:0;
    box-shadow: 0 10px 18px rgba(0,0,0,0.22);
}
.res-icon{
    width:16px;
    height:16px;
    object-fit:contain;
    display:block;
}

.res-value{
    width:100%;
    text-align:center;
    font-variant-numeric: tabular-nums;
    font-weight:900;
    font-size: clamp(10px, 2.5vw, 14px); /* Адаптивный размер шрифта */
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 10px rgba(0,0,0,0.35);
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Скрываем переполнение */
    text-overflow: ellipsis; /* Добавляем многоточие при переполнении */
}

.profile-xp{
    position:relative;
    height:10px;
}

.profile-xp .level-badge{
    position:absolute;
    left:7px;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:22px;
    border-radius:999px;

    background: rgba(17,20,89,0.78);
    border:1px solid rgba(96,165,250,0.18);
    box-shadow:
            0 10px 18px rgba(0,0,0,0.22),
            inset 0 1px 0 rgba(255,255,255,0.06);

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:900;
    font-size:13px;
    color: rgba(255,255,255,0.92);
    z-index:2;
}

.profile-xp .xp-line{
    position:absolute;
    left:52px;
    right:60px;
    top:50%;
    transform:translateY(-50%);
    height:14px;
    border-radius:999px;
    overflow:hidden;

    background: rgba(26,38,97,0.72);
    border:1px solid rgba(96,165,250,0.14);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.05),
            0 10px 16px rgba(0,0,0,0.16);
}
.profile-xp .xp-fill{
    height:100%;
    width: var(--p, 0%);
    border-radius:999px;
    background: linear-gradient(90deg, #2dd4bf, #60a5fa, #6366f1);
    box-shadow: 0 10px 22px rgba(99,102,241,0.22);
}
.profile-xp .xp-text{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:11px;
    font-weight:900;
    letter-spacing:.2px;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 10px rgba(0,0,0,0.55);
    pointer-events:none;
    z-index:2;
}

@media (max-width: 380px){
    .profile-main{ height:54px; padding-left:58px; }
    .profile-avatar{ width:56px; height:56px; }
    .res-pill{
        height:28px;
        --badge: 22px;
        padding-left: calc(var(--badge) + 6px);
        padding-right: 8px;
    }
    .res-value{
        font-size: clamp(10px, 2.5vw, 13px); /* Адаптивный размер шрифта */
    }
    .res-icon{
        width: 14px;
        height: 14px;
    }
    .profile-xp .xp-line{ left:56px; }
}

/* =========================
   QUICK ICONS PANEL
   ========================= */
.quick-icons{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;

    padding:6px 8px;
    border-radius:14px;


}

.quick-group{
    display:flex;
    gap:14px;
    align-items:center;
}

.quick-group + .quick-group{
    padding-left:10px;
    position:relative;
}
.quick-group + .quick-group::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    bottom:6px;
    width:1px;
    background: rgba(148,163,184,0.10);
}

.quick-item{
    width:auto;
    padding:4px 4px 6px;
    border-radius:14px;
    background:transparent;
    border:0;
    cursor:pointer;
    color: rgba(226,232,240,.92);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;

    -webkit-tap-highlight-color: transparent;
    user-select:none;

    transition: transform .12s ease, filter .15s ease;
}
.quick-item:active{ transform: translateY(1px) scale(0.985); }

.quick-box{
    width:38px;
    height:38px;
    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    background: rgba(17,20,89,0.55);
    border:1px solid rgba(96,165,250,0.14);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.05),
            0 8px 14px rgba(0,0,0,0.16);
}
.quick-box img{
    width:24px;
    height:24px;
    object-fit:contain;
    display:block;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}

.quick-item.is-active .quick-box{
    border-color: rgba(99,102,241,0.28);
    box-shadow:
            0 0 0 2px rgba(99,102,241,0.26),
            0 16px 24px rgba(0,0,0,0.22),
            inset 0 1px 0 rgba(255,255,255,0.06);
    background: radial-gradient(circle at 40% 25%,
    rgba(99,102,241,0.26),
    rgba(17,20,89,0.55)
    );
}

.quick-label{
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.2px;
    opacity:.88;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
    white-space:nowrap;
}

/* =========================
   COINS BADGE (slot)
   ========================= */
.resource-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.coins-badge{
    position: relative;
    height: 46px;
    min-width: 120px; /* Минимальная ширина для отображения */
    max-width: 100%; /* Максимальная ширина не больше родителя */
    border-radius: 999px;

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

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

.coins-badge::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:3px;
    height:2px;
    border-radius:999px;
    background: linear-gradient(90deg,
    rgba(250,204,21,0),
    rgba(250,204,21,.55),
    rgba(45,212,191,.35),
    rgba(250,204,21,0)
    );
    opacity:.9;
    pointer-events:none;
}

.coins-badge .coins-value{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    white-space:nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
    font-size: clamp(16px, 4.5vw, 22px); /* Адаптивный размер шрифта */
    line-height: 1;
    color: rgba(255,255,255,.95);
    text-shadow:
            0 2px 10px rgba(0,0,0,.55),
            0 0 14px rgba(250,204,21,.10);
    max-width: calc(100% - 60px); /* Ограничиваем ширину, оставляя место для иконки */
    overflow: hidden;
    text-overflow: ellipsis;
}

.coins-badge .coins-icon{
    position:absolute;
    top:50%;
    transform: translate(-50%,-50%);
    width: 38px;
    height: 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}
.coins-badge .coins-icon img{
    width: 30px;
    height: 30px;
    object-fit: contain;
    display:block;
    filter:
            drop-shadow(0 10px 14px rgba(0,0,0,.40))
            drop-shadow(0 0 18px rgba(250,204,21,.18));
}

@media (max-width:380px){
    .coins-badge{
        height:44px;
        min-width: 100px; /* Уменьшаем минимальную ширину на маленьких экранах */
    }
    .coins-badge .coins-value{
        font-size: clamp(14px, 4vw, 20px); /* Адаптивный размер на маленьких экранах */
    }
    .coins-badge .coins-icon{ width:34px; height:34px; }
    .coins-badge .coins-icon img{ width:26px; height:26px; }

    /* Дополнительно уменьшаем размеры ресурсов на очень маленьких экранах */
    .res-pill{
        --badge: 22px;
        height: 28px;
        padding-left: calc(var(--badge) + 6px);
        padding-right: 8px;
    }
    .res-value{
        font-size: clamp(9px, 2.2vw, 12px);
    }
    .res-icon{
        width: 14px;
        height: 14px;
    }
}

/* =========================
   SLOT
   ========================= */
.win-amount-section{
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.12) 0%, rgba(250, 204, 21, 0.06) 100%);
    border: 1.5px solid rgba(250, 204, 21, 0.4);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-md);
    box-shadow:
            0 0 20px rgba(250, 204, 21, 0.15),
            inset 0 0 20px rgba(250, 204, 21, 0.05);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.win-amount-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
    transparent 0%,
    rgba(250, 204, 21, 0.6) 50%,
    transparent 100%);
    animation: win-shimmer 2s ease-in-out infinite;
}

@keyframes win-shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

#win-amount,
#boss-battle-win-amount{
    font-size: 20px;
    font-weight: 800;
    color: var(--text-muted);
    text-shadow: none;
    min-height: 28px;
    text-align: center;
    line-height: 1.2;
    transition: all var(--transition-base);
}

#win-amount.has-win,
#boss-battle-win-amount.has-win {
    animation: win-pulse 0.6s ease-out;
    color: var(--gold);
    text-shadow:
            0 0 10px rgba(250, 204, 21, 0.8),
            0 0 20px rgba(250, 204, 21, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.5);
}

#win-amount:empty,
#boss-battle-win-amount:empty,
#win-amount:not(.has-win),
#boss-battle-win-amount:not(.has-win) {
    color: var(--text-muted);
}

@keyframes win-pulse {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}


.slots-wrapper{
    position:relative;
    margin-top:6px;
}

/* IMPORTANT: clip area only for reels+canvas, not for chest */
.slots-clip{
    position:relative;
    height:210px;
    overflow:hidden;
}

.slots{
    position:relative;
    display:flex;
    gap:6px;
    justify-content:center;
    z-index:2;
}

.reel{
    width:64px;
    height:210px;
    background: radial-gradient(circle at top, #020617, #020617);
    border-radius:14px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(30,64,175,0.85);
    box-shadow: inset 0 0 18px rgba(15,23,42,0.95), 0 8px 18px rgba(15,23,42,0.9);
}

.reel-inner{
    position:absolute;
    top:0; left:0;
    width:100%;
    will-change: transform;
    transform: translateZ(0);
}

.cell{
    width:64px;
    height:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:0;
    position:relative;
    overflow:hidden;
}

.cell-icon{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
}

/* modifier badges on cells */
.cell-mod-badges,
.cell-mod-badges-win{
    position:absolute;
    right:2px;
    bottom:2px;
    display:flex;
    gap:2px;
    pointer-events:none;
}
.cell-mod-badges{ z-index:3; }
.cell-mod-badges-win{ z-index:4; }

.mod-badge{
    font-size:10px;
    padding:0 4px;
    border-radius:999px;
    background:rgba(15,23,42,0.95);
    color:#e5e7eb;
    border:1px solid rgba(248,250,252,0.35);
    box-shadow:0 0 6px rgba(0,0,0,0.6);
    white-space:nowrap;
}
.mod-badge--coin{ color:#facc15; border-color:rgba(250,204,21,0.7); }
.mod-badge--ticket{ color:#22c55e; border-color:rgba(34,197,94,0.7); }
.mod-badge--gem{ color:#38bdf8; border-color:rgba(56,189,248,0.7); }

/* canvas lines */
#linesCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

/* responsive reels */
@media (max-width:400px){
    .slots-clip{ height:192px; }
    .reel{ width:58px; height:192px; }
    .cell{ width:58px; height:64px; }
    .cell-icon{ width:36px; height:36px; }

    .win-amount-section {
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-sm);
        min-height: 40px;
    }

    #win-amount,
    #boss-battle-win-amount {
        font-size: 18px;
    }
}

/* =========================
   CHEST PANEL (below slot) + GAP
   ========================= */
.chest-panel{
    margin-top: 12px; /* ✅ пространство между слотами и сундуком */
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(14, 8, 67, 0.28);
    border: 1px solid rgba(148,163,184,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.chest-grid{
    display:grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto 10px;
    column-gap: 10px;
    row-gap: 6px;
    align-items:center;
}

.chest-pick-mini{
    grid-column: 1;
    grid-row: 1 / span 2;

    width:38px;
    height:38px;
    border-radius:999px;
    display:grid;
    place-items:center;

    background: rgba(14, 8, 67, 0.50);
    border:1px solid rgba(148,163,184,0.16);
    box-shadow: 0 14px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,0.06);
    cursor:pointer;
    padding:0;
    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    touch-action: manipulation;
}
.chest-pick-mini:active{ transform: translateY(1px); }

.chest-pick-mini .pick-plus{
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
    color: rgba(255,255,255,.92);
}
.chest-pick-mini .pick-emoji{
    display:none;
    font-size:20px;
    line-height:1;
}
.chest-pick-mini.is-selected .pick-plus{ display:none; }
.chest-pick-mini.is-selected .pick-emoji{ display:block; }
.chest-pick-mini.is-empty .pick-plus{ display:block; }
.chest-pick-mini.is-empty .pick-emoji{ display:none; }

.chest-head{
    grid-column: 2;
    grid-row: 1;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
}

.chest-status{
    font-size:10px;
    font-weight:800;
    letter-spacing:.15px;
    color: rgba(226,232,240,.82);
    text-shadow: 0 2px 10px rgba(0,0,0,.45);

    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chest-progress-top-text{
    font-size:10px;
    font-weight:900;
    letter-spacing:.2px;
    color: rgba(255,255,255,.92);
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
    flex:0 0 auto;
}

.chest-progress-bar{
    grid-column: 2;
    grid-row: 2;

    height:10px;
    border-radius:999px;
    overflow:hidden;
    background: rgba(26,38,97,1);
    border: 1px solid rgba(26,38,97,1);
    position:relative;
}

#chest-progress-fill{
    height:100%;
    width:0%;
    border-radius:999px;
    background: linear-gradient(90deg, #facc15, #22c55e);
}

.chest-panel.is-missing .chest-status{
    color: rgba(250,204,21,.95);
    animation: chestBlink 1.1s ease-in-out infinite;
}
.chest-panel.is-missing .chest-pick-mini{
    box-shadow:
            0 14px 24px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,0.06),
            0 0 0 2px rgba(250,204,21,.25);
}
@keyframes chestBlink{
    0%,100%{ opacity:.45; }
    50%{ opacity:1; }
}

/* =========================
   BUTTONS
   ========================= */
button{ font-family:inherit; border:none; }

.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;
}

/* Hover effects removed for mobile app */

.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;
}

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

/* Multiplier selector (iOS-style wheel picker) - Unified Design */
.multiplier-selector{
    flex: 0 0 auto;
    width: 60px;
    height: 52px; /* Высота как у кнопки спин */
    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;

    /* Градиентная маска сверху и снизу для эффекта затухания (как в iOS) */
    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 */
    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;

    /* Эффект барабана iOS - элементы вне центра уменьшены и затемнены */
    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);
}

/* SPIN premium animated (no text selection / no magnifier) */
#spinBtn.btn-full{
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(420px, calc(100% - 84px)); /* Учитываем ширину множителя (60px) + gap (12px) + padding */
    height: 52px;
    border-radius: 999px;

    border: 1px solid rgba(148,163,184,0.20);
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(255,70,70,.42), rgba(0,0,0,0) 60%),
            linear-gradient(90deg, rgba(80,12,12,.88), rgba(120,22,22,.88));


    box-shadow:
            0 10px 24px rgba(0,0,0,.45),
            0 0 0 1px rgba(255,90,90,.22) inset,
            0 0 22px rgba(255,70,70,.22);

    border: 1px solid rgba(255,90,90,.18);


    color: rgba(255,255,255,.95);
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;

    position: relative;
    overflow: hidden;

    animation: spinBreath 1.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(120deg,
            rgba(34,197,94,0) 0%,
            rgba(34,197,94,0) 35%,
            rgba(255,255,255,.22) 50%,
            rgba(99,102,241,.20) 55%,
            rgba(34,197,94,0) 70%,
            rgba(34,197,94,0) 100%
            );
    transform: translateX(-120%);
    animation: spinShine 2.2s ease-in-out infinite;
    opacity:.9;
    pointer-events:none;
}

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

@keyframes spinShine{
    0%   { transform: translateX(-120%); opacity:0; }
    15%  { opacity:.85; }
    55%  { opacity:.95; }
    100% { transform: translateX(120%); opacity:0; }
}
@keyframes spinBreath{
    0%,100%{
        transform: translateY(0) scale(1);
        box-shadow:
                0 14px 30px rgba(0,0,0,.45),
                inset 0 1px 0 rgba(255,255,255,.10),
                0 0 0 3px rgba(34,197,94,.10);
        filter: saturate(1);
    }
    50%{
        transform: translateY(-1px) scale(1.01);
        box-shadow:
                0 18px 38px rgba(0,0,0,.50),
                inset 0 1px 0 rgba(255,255,255,.12),
                0 0 0 3px rgba(34,197,94,.16),
                0 0 22px rgba(34,197,94,.18);
        filter: saturate(1.05);
    }
}
#spinBtn.btn-full:active{
    transform: translateY(1px) scale(.995);
}
#spinBtn.btn-full:disabled{
    animation:none;
    opacity:.55;
    cursor:not-allowed;
}
#spinBtn.btn-full:disabled::before{
    animation:none;
    opacity:.12;
}

/* =========================
   BOTTOM NAV
   ========================= */
.bottom-nav{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    width:100%;
    max-width:520px;
    z-index:40;
    padding:10px 12px calc(env(safe-area-inset-bottom, 0) + 10px);
}

.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);
}

/* Lock icon overlay for disabled nav items */
.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;
}

/* Hide lock and level when item is not disabled */
.nav-item:not(.nav-item-disabled) .nav-lock-icon,
.nav-item:not(.nav-item-disabled) .nav-level-required{
    display:none;
}

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

/* =========================
   PROGRESS BARS (generic)
   ========================= */
.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;
}

/* =========================
   MODALS (FIXED — ALWAYS CENTER)
   ========================= */
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;
}

/* card base */
.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 modal layout (minimal) */
.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;
}

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

/* =========================
   HELPERS
   ========================= */
.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 CENTER (base)
   ========================= */
.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: 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;
}
.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: 999px;
    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; }

/* =========================

/* =========================
   DAILY MODAL BASE
========================= */
#daily-modal.modal.is-open {
    display:flex;
}
#daily-modal .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
    z-index: 90;
}
#daily-modal .modal-shell {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.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;
}

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

.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;
}

/* =========================
   BODY
========================= */

.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);
}

/* =========================
   CAROUSEL
========================= */

.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
========================= */

.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;
}

/* states */

.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;
}

/* =========================
   CARD TOP
========================= */

.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: 999px;
    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;
}

/* =========================
   REWARDS
========================= */

.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;
}

/* =========================
   ACTIONS
========================= */

.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;
}

/* =========================
   DOTS
========================= */

.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;
}

/* =========================
   FOOTER
========================= */

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

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

    overflow: hidden;          /* ❗ выключаем scroll */
    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%;
}



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

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

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

/* dots */
.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;
}

/* =========================
   DAILY MODAL + CAROUSEL CSS
   ========================= */

/* modal base (если уже есть — оставь, но эти классы должны совпадать) */
.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;
}
#daily-modal.modal.is-open{ display:flex; }
#daily-modal .modal-card{
    width:min(520px, 100%);
    max-height: calc(100dvh - 24px);
    overflow:hidden;
    border-radius:18px;
    border:1px solid rgba(148,163,184,.22);
    background: linear-gradient(180deg, rgba(11,17,32,.92), rgba(2,6,23,.92));
    box-shadow: 0 20px 70px rgba(0,0,0,.55);
}

.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); }

/* subtitle + msg */
.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;
}

/* =========================
   Carousel
   ========================= */
.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;
}

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

/* =========================
   Day cards
   ========================= */
.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;
}

/* rewards */
.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;
}

/* actions */
.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);
}

/* =========================
   States (classList from JS)
   ========================= */
.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 MODAL
   ========================= */
.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 DEFEAT MODAL
   ========================= */
.boss-defeat-message{
    text-align:center;
    padding:20px;
    color:rgba(229,231,235,0.88);
    font-size:14px;
    line-height:1.5;
    margin-bottom:16px;
}

.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);
}

/* =========================
   Dots
   ========================= */
.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);
}

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

/* === DAILY cards: less stretched === */
/* === DAILY cards: even smaller (compact) === */
.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; }

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

/* === DAILY carousel: smooth + snap === */
.daily-carousel{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

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

    /* важно: отключаем нативный горизонтальный пан, т.к. у нас свой drag */
    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;
}

/* общий glow-слой */
.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;
}

/* Today (не обязательно) */
.day-card.is-today{
    border-color: rgba(99,102,241,0.55);
}

/* Locked (не обязательно) */
.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: 999px;
    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 (Coins per hour)
   ========================= */
.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%; }


/* =========================
   TICKET MODAL (Portal)
   ========================= */

/* =========================
   TICKET MODAL (Portal) — SCOPED ONLY
   ========================= */

/* открытие (работает с твоим .is-open) */
#ticket-modal.modal.is-open{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* backdrop */
#ticket-modal .modal-backdrop{
    background: rgba(2,6,23,0.70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* контейнер */
#ticket-modal .modal-shell{
    width: min(520px, 100%);
    max-height: calc(100dvh - 24px);
    overflow: auto;
}

/* карточка */
#ticket-modal .modal-card{
    width:100%;
    border-radius:18px;
    border:1px solid rgba(148,163,184,0.16);
    overflow:hidden;

    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,.70);
}

/* header (не трогаем глобальные .modal-header!) */
#ticket-modal .modal-header{
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(148,163,184,0.12);
}

#ticket-modal .modal-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

#ticket-modal .modal-title-col{ min-width:0; }
#ticket-modal .modal-title{
    font-size:16px;
    font-weight:900;
    letter-spacing:.2px;
    color: rgba(229,231,235,.95);
}

#ticket-modal .modal-header-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

#ticket-modal .level-pill{
    height:30px;
    padding:0 10px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:4px;

    font-size:12px;
    font-weight:900;
    color: rgba(229,231,235,.92);

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

/* крестик */
#ticket-modal .modal-x{
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.16);
    background: rgba(2,6,23,.40);
    color: rgba(229,231,235,.92);
}
#ticket-modal .modal-x:active{ transform: translateY(1px); }

/* body */
#ticket-modal .modal-body{ padding:14px; }

/* layout */
#ticket-modal .portal-layout{
    display:grid;
    grid-template-columns: 210px 1fr;
    gap:14px;
    align-items:start;
}

@media (max-width: 440px){
    #ticket-modal .portal-layout{
        grid-template-columns: 1fr;
    }
}

/* ring */
#ticket-modal .portal-ring{
    border-radius:18px;
    padding:12px;
    background: rgba(2,6,23,.42);
    border:1px solid rgba(148,163,184,.14);
}

#ticket-modal .portal-ring-inner{
    height: 168px;
    border-radius: 18px;
    display:grid;
    place-items:center;

    background:
            radial-gradient(circle at 50% 45%, rgba(99,102,241,0.25), transparent 60%),
            radial-gradient(circle at 60% 70%, rgba(34,197,94,0.18), transparent 60%),
            rgba(7,11,24,0.55);

    border:1px solid rgba(148,163,184,0.12);
    box-shadow:
            inset 0 0 0 6px rgba(99,102,241,0.08),
            inset 0 0 26px rgba(99,102,241,0.10);
}

#ticket-modal .portal-percent{
    text-align:center;
}

#ticket-modal .portal-percent-top{
    font-size:12px;
    color: rgba(156,163,175,.95);
    margin-bottom:6px;
}

#ticket-modal .portal-percent-sub{
    font-size:12px;
    color: rgba(229,231,235,.75);
}

/* bar below ring */
#ticket-modal .portal-ring-bar{
    margin-top:10px;
}

/* progress inside portal */
#ticket-modal .portal-bar{
    height: 12px;
    background:
            radial-gradient(80px 18px at 20% 50%, rgba(250,204,21,0.12), transparent 60%),
            rgba(148,163,184,0.10);
    border:1px solid rgba(148,163,184,0.10);
}

#ticket-modal #ticket-bank-fill{
    height:100%;
    width:0%;
    border-radius:999px;
    background: linear-gradient(90deg, rgba(250,204,21,0.95), rgba(34,197,94,0.85));
    box-shadow: 0 0 18px rgba(250,204,21,0.22);
    transition: width .25s ease;
}

/* info side */
#ticket-modal .portal-info{
    border-radius:18px;
    padding:12px;
    background: rgba(2,6,23,.42);
    border:1px solid rgba(148,163,184,.14);
}

#ticket-modal .info-row{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:10px;
}

#ticket-modal .info-pill{
    flex:1 1 auto;
    min-width:180px;
    padding:10px 12px;
    border-radius:999px;
    font-size:12px;
    color: rgba(229,231,235,.90);

    background: rgba(7,11,24,0.60);
    border:1px solid rgba(148,163,184,0.12);
}

#ticket-modal .portal-actions{
    display:grid;
    gap:10px;
    margin-top:6px;
}

/* твои .btn и .btn-secondary уже есть — просто делаем ширину 100% */
#ticket-modal .btn-full{
    width:100%;
}

/* center stack inside portal */
#ticket-modal .portal-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
}

#ticket-modal .portal-count{
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .3px;
    color: rgba(229,231,235,0.96);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(2,6,23,0.35);
    border: 1px solid rgba(148,163,184,0.14);
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.08);
}

#ticket-modal .portal-collect{
    margin-top: 10px;
}

/* levels block */
#ticket-modal .portal-levels{
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(148,163,184,0.10);
}

#ticket-modal .portal-levels-title{
    font-size: 12px;
    font-weight: 800;
    color: rgba(229,231,235,0.9);
    margin-bottom: 8px;
}

#ticket-modal .portal-levels-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

#ticket-modal .level-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    padding:10px 12px;
    border-radius: 14px;
    background: rgba(7,11,24,0.55);
    border: 1px solid rgba(148,163,184,0.12);
}

#ticket-modal .level-row strong{
    font-size: 12px;
    color: rgba(229,231,235,0.95);
}

#ticket-modal .level-row span{
    display:block;
    font-size: 11px;
    color: rgba(156,163,175,0.95);
    margin-top: 2px;
}

#ticket-modal .level-row .level-cost{
    font-size: 12px;
    font-weight: 900;
    color: rgba(250,204,21,0.95);
    white-space: nowrap;
}

/* =========================
   Ticket Portal — PREMIUM FX
   ========================= */

/* "внешнее" свечение портала */
#ticket-modal .portal-ring{
    position: relative;
    overflow: hidden;
}
#ticket-modal .portal-ring::before{
    content:"";
    position:absolute;
    inset:-40px;
    background:
            radial-gradient(circle at 30% 20%, rgba(99,102,241,0.22), transparent 55%),
            radial-gradient(circle at 70% 70%, rgba(34,197,94,0.18), transparent 58%),
            radial-gradient(circle at 50% 55%, rgba(250,204,21,0.12), transparent 55%);
    filter: blur(10px);
    opacity: .9;
    pointer-events:none;
    animation: tpFloat 6s ease-in-out infinite;
}
@keyframes tpFloat{
    0%,100%{ transform: translate3d(0,0,0) scale(1); }
    50%{ transform: translate3d(6px,-6px,0) scale(1.02); }
}

/* вращающаяся "энергия" внутри */
#ticket-modal .portal-ring-inner{
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}
#ticket-modal .portal-ring-inner::before{
    content:"";
    position:absolute;
    inset:-60px;
    background: conic-gradient(
            from 180deg,
            rgba(99,102,241,0.00),
            rgba(99,102,241,0.35),
            rgba(34,197,94,0.30),
            rgba(250,204,21,0.22),
            rgba(99,102,241,0.00)
    );
    opacity: .45;
    filter: blur(14px);
    animation: tpSpin 3.8s linear infinite;
    pointer-events:none;
}
@keyframes tpSpin{
    to{ transform: rotate(360deg); }
}

/* "линза" поверх энергии */
#ticket-modal .portal-ring-inner::after{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at 50% 45%, rgba(255,255,255,0.10), rgba(255,255,255,0.0) 55%),
            radial-gradient(circle at 50% 80%, rgba(99,102,241,0.10), transparent 60%);
    opacity: .8;
    pointer-events:none;
}

/* центрированный текст чуть более премиум */
#ticket-modal .portal-count{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
            0 10px 22px rgba(0,0,0,0.28),
            inset 0 0 0 1px rgba(99,102,241,0.14);
    position: relative;
}
#ticket-modal .portal-count::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius: inherit;
    background:
            linear-gradient(120deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.16) 45%,
            rgba(99,102,241,0.10) 55%,
            rgba(255,255,255,0.00) 100%);
    transform: translateX(-120%);
    animation: tpShine 2.2s ease-in-out infinite;
    pointer-events:none;
    opacity:.9;
}
@keyframes tpShine{
    0%{ transform: translateX(-120%); }
    60%{ transform: translateX(120%); }
    100%{ transform: translateX(120%); }
}

/* прогресс-бар: "больше энергии" + легкий шиммер */
#ticket-modal #ticket-bank-fill{
    position: relative;
    overflow: hidden;
}
#ticket-modal #ticket-bank-fill::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.22) 45%,
    rgba(255,255,255,0.0) 70%);
    transform: translateX(-140%);
    animation: tpBarShine 1.8s ease-in-out infinite;
    opacity: .75;
}
@keyframes tpBarShine{
    0%{ transform: translateX(-140%); }
    70%{ transform: translateX(140%); }
    100%{ transform: translateX(140%); }
}

/* кнопка Collect: "ready" пульсирует */
#ticket-modal .portal-collect{
    position: relative;
    overflow:hidden;
}
#ticket-modal .portal-collect.is-ready{
    animation: tpPulse 1.35s ease-in-out infinite;
    box-shadow: 0 14px 28px rgba(0,0,0,0.35), 0 0 18px rgba(34,197,94,0.22);
}
@keyframes tpPulse{
    0%,100%{ transform: translateY(0) scale(1); filter: brightness(1); }
    50%{ transform: translateY(-1px) scale(1.01); filter: brightness(1.06); }
}

/* состояния портала */
#ticket-modal .portal-ring.is-full .portal-ring-inner{
    box-shadow:
            inset 0 0 0 6px rgba(34,197,94,0.14),
            inset 0 0 30px rgba(34,197,94,0.14);
}
#ticket-modal .portal-ring.is-full .portal-percent-top{
    color: rgba(34,197,94,0.95);
    font-weight: 900;
}

/* subtle "farming" breathing when not ready */
#ticket-modal .portal-ring.is-farming .portal-ring-inner{
    animation: tpBreath 2.4s ease-in-out infinite;
}
@keyframes tpBreath{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(1.01); }
}

/* =========================
   Ticket Portal — Upgrade Sheet
   ========================= */
#ticket-modal .tp-sheet{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 10050; /* выше модалки */
}

#ticket-modal .tp-sheet.is-open{ display:block; }

#ticket-modal .tp-sheet-backdrop{
    position:absolute;
    inset:0;
    background: rgba(2,6,23,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#ticket-modal .tp-sheet-card{
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%) scale(.98);
    width: min(520px, 100%);
    max-height: calc(100dvh - 24px);
    overflow:auto;

    border-radius: 18px;
    border:1px solid rgba(148,163,184,0.16);
    background:
            radial-gradient(120% 140% at 18% 0%, rgba(99,102,241,0.18), rgba(0,0,0,0)),
            radial-gradient(110% 120% at 90% 10%, rgba(34,197,94,0.10), rgba(0,0,0,0)),
            rgba(2,6,23,0.92);

    box-shadow: 0 26px 70px rgba(0,0,0,0.70);
    opacity: 0;
    animation: tpSheetPop 170ms ease-out forwards;
}

@keyframes tpSheetPop{
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

#ticket-modal .tp-sheet-head{
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(148,163,184,0.12);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
#ticket-modal .tp-sheet-title{
    font-weight: 900;
    font-size: 14px;
    color: rgba(229,231,235,0.95);
}
#ticket-modal .tp-sheet-x{
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,0.16);
    background: rgba(2,6,23,0.40);
    color: rgba(229,231,235,0.92);
}
#ticket-modal .tp-sheet-x:active{ transform: translateY(1px); }

#ticket-modal .tp-sheet-body{ padding: 14px; }

#ticket-modal .tp-compare{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}
@media (max-width: 420px){
    #ticket-modal .tp-compare{ grid-template-columns: 1fr; }
}

#ticket-modal .tp-card{
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,0.12);
    background: rgba(7,11,24,0.55);
    padding: 12px;
}
#ticket-modal .tp-card-title{
    font-weight: 900;
    font-size: 12px;
    color: rgba(229,231,235,0.95);
    margin-bottom: 8px;
}
#ticket-modal .tp-stat{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size: 12px;
    color: rgba(229,231,235,0.85);
    padding: 6px 0;
    border-bottom: 1px dashed rgba(148,163,184,0.12);
}
#ticket-modal .tp-stat:last-child{ border-bottom: none; }

#ticket-modal .tp-delta{
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(34,197,94,0.22);
    background: rgba(34,197,94,0.08);
    color: rgba(229,231,235,0.92);
    font-size: 12px;
}

#ticket-modal .tp-sheet-actions{
    margin-top: 12px;
    display:grid;
    gap:10px;
}

#ticket-modal .tp-hint{
    margin-top: 10px;
    font-size: 11px;
    color: rgba(156,163,175,0.95);
}

/* УБРАТЬ бегущую полоску на счётчике */
#ticket-modal .portal-count::before{
    content:none !important;
    animation:none !important;
}

/* УБРАТЬ шиммер на прогресс-баре */
#ticket-modal #ticket-bank-fill::after{
    content:none !important;
    animation:none !important;
}

/* мягче внешнее свечение */
#ticket-modal .portal-ring::before{
    animation: tpFloatSoft 10s ease-in-out infinite;
    opacity: .65;
    filter: blur(14px);
}

@keyframes tpFloatSoft{
    0%,100%{ transform: translate3d(0,0,0) scale(1); }
    50%{ transform: translate3d(2px,-2px,0) scale(1.01); }
}

/* вместо жесткого вращения — мягкий "swirl" */
#ticket-modal .portal-ring-inner::before{
    opacity: .28;
    filter: blur(18px);
    animation: tpSwirl 6.5s ease-in-out infinite;
    transform-origin: 50% 50%;
}

@keyframes tpSwirl{
    0%,100%{ transform: rotate(0deg) scale(1); }
    50%{ transform: rotate(18deg) scale(1.03); }
}

/* breathing только когда farming (у тебя уже есть) — сделаем чуть мягче */
#ticket-modal .portal-ring.is-farming .portal-ring-inner{
    animation: tpBreathSoft 3.2s ease-in-out infinite;
}
@keyframes tpBreathSoft{
    0%,100%{ transform: scale(1); filter: brightness(1); }
    50%{ transform: scale(1.015); filter: brightness(1.05); }
}














/*
======================================================================================
======================================================================================
======================================================================================
======================================================================================
======================================================================================
 */

/* =========================
   SHOP TABS + SECTIONS (FIX)
   ========================= */

/* табы сверху */
#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: 999px;
    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-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);
}

/* =========================
   Daily Special Offers (Shop)
   ========================= */

#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: 999px;
    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: 999px;
    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: 999px;
    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 specials — horizontal row + filters
   ========================= */

.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: 999px;
    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 — swipe tabs scaffold
   ========================= */
.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 90px; /* снизу место под bottom-nav */
}

.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;
}


/* =========================
   Special offers — Daily / Weekly
   ========================= */
.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;
}

/* =========================
   Special offers — Daily / Weekly
   ========================= */
.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;
}


/* =========================
   SHOP — unified CSS (mobile-first)
   ========================= */

: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;
}

/* Screen container */
#tab-shop{
    padding: 10px 12px 18px;
    color: var(--shop-text);
}

/* =========================
   TOP TABS (Special/Slot/Cards/Gems)
   swipe-ready: horizontal scroll + snap
   ========================= */
.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: 999px;
    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);
}

/* =========================
   Sections switching
   ========================= */
.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 offers: Daily/Weekly pills
   ========================= */
.special-switch{
    display:flex;
    gap:10px;
    background: rgba(0,0,0,.12);
    border: 1px solid var(--shop-border);
    border-radius: 999px;
    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: 999px;
    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));
}

/* Meta row */
.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;
}

/* filters */
.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: 999px;
    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 sub-tabs (Items/Symbols)
   ========================= */
.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: 999px;
    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; }

/* =========================
   Common cards (used by Daily offers, items, cards, stars)
   You already use .item-card / .item-main / .item-actions
   ========================= */
.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);
}

/* Hover effects removed for mobile app */

.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);
}

/* =========================
   Buttons
   ========================= */
.btn-primary,
.btn-secondary{
    border-radius: 999px;
    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);
}

/* Hover effects removed for mobile app */

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

/* Hover effects removed for mobile app */

.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;
}

/* placeholders */
.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 block
   ========================= */
.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; }

/* =========================
   Optional: tighten spacing for very small screens
   ========================= */
@media (max-width: 360px){
    .shop-tab{ padding: 9px 12px; font-size: 12px; }
    .item-card{ padding: 11px; }
    .btn-primary,.btn-secondary{ padding: 9px 11px; }
}


/* =========================
   STEP 1 — Special offers cleanup
   ========================= */

#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: 999px;
    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;
}

/* сетка офферов: убираем вертикальные margin у .item-card */
#tab-shop #daily-symbol-shop.daily-offers-grid .item-card{
    margin: 0;
}

/* ===== Special offers header: less clutter ===== */

#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;
}

/* делаем pills легче и ниже, чтобы не “кричали” */
#tab-shop .meta-pill.meta-pill--flat{
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    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);
}

/* =========================
   SHOP CARDS — SAFE BASE
   ========================= */

/* базовая карточка магазина */
.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 — ONLY
   ========================= */

.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;
}

/* ===================================================
   SHOP — CARDS FIX (scoped)  ✅ не трогает слот/спины
   =================================================== */

#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-shop #stars-shop,
#tab-shop #daily-symbol-shop,
#tab-shop #symbols-shop{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* daily offers — сетка */
#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;
    }
}

/* ============ item-card (items / gems / offers / bosses) ============ */
#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;
}

/* ============ Cards tab (твой .card-row) ============ */
#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{
    padding: 10px 12px 18px;
}

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

#tab-tasks .item-card{
    background: #0e1640;
    border: 1px solid rgba(255,255,255,10);
}


/* =========================
   APP LOADER (Telegram WebApp)
   ========================= */
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;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.22), rgba(0,0,0,0) 60%),
            radial-gradient(120% 140% at 90% 100%, rgba(34,197,94,0.12), rgba(0,0,0,0) 55%),
            linear-gradient(180deg, rgba(2,6,23,0.96), rgba(2,6,23,0.98));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity .28s ease, transform .28s ease;
}

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

.app-loader-card{
    width: min(420px, 100%);
    border-radius: 22px;
    padding: 18px 16px 16px;
    text-align:center;
    color: rgba(229,231,235,0.95);

    background:
            radial-gradient(120% 140% at 10% 0%,
            rgba(99,102,241,0.18),
            rgba(34,197,94,0.10) 42%,
            rgba(2,6,23,0.82) 100%);
    border: 1px solid rgba(148,163,184,0.16);
    box-shadow:
            0 22px 70px rgba(0,0,0,0.55),
            inset 0 1px 0 rgba(255,255,255,0.06);
}

.app-loader-mark{
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    border-radius: 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 26px;
    background:
            radial-gradient(circle at 35% 25%, rgba(99,102,241,0.75), rgba(34,197,94,0.35) 60%, rgba(2,6,23,0.0) 70%),
            rgba(15,23,42,0.55);
    border: 1px solid rgba(99,102,241,0.25);
    box-shadow: 0 12px 26px rgba(0,0,0,0.45), 0 0 16px rgba(99,102,241,0.22);
    animation: appLoaderFloat 2.4s ease-in-out infinite;
}
@keyframes appLoaderFloat{
    0%,100%{ transform: translateY(0) scale(1); filter: brightness(1); }
    50%{ transform: translateY(-2px) scale(1.01); filter: brightness(1.05); }
}

.app-loader-title{
    font-weight: 900;
    letter-spacing: .2px;
    font-size: 18px;
}

.app-loader-sub{
    margin-top: 6px;
    font-size: 12px;
    color: rgba(156,163,175,0.95);
}

.app-loader-bar{
    margin-top: 14px;
    height: 10px;
    border-radius: 999px;
    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: 999px;
    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: 999px;
    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;
}



/* friends-hero: пусть контент занимает всю ширину карточки */
#tab-friends .friends-hero{
    display: flex;
    justify-content: center;  /* центр по горизонтали */
}

/* контейнер внутри hero — на всю ширину */
#tab-friends .friends-hero .friends-link{
    width: 100%;
}

/* лейбл по центру */
#tab-friends .friends-link-label{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

/* строка input + кнопки — на всю ширину */
#tab-friends .friends-link-row{
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* input занимает всё доступное место */
#tab-friends .friends-link-input{
    flex: 1;
    min-width: 0;
}

/* кнопки справа в линию */
#tab-friends .friends-link-actions{
    display: flex;
    gap: 10px;
}

/* на всякий — чтобы padding не ломал ширину */
#tab-friends .friends-link,
#tab-friends .friends-link-row,
#tab-friends .friends-link-input{
    box-sizing: border-box;
}


/* =========================
   FRIENDS — list + stats fix
   ========================= */

/* item-card у тебя flex-row. Для списка друзей это НЕ надо */
#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);
}

/* если head пока не используешь — убери, чтобы не мешал */
#tab-friends .friends-list-head{
    display: none;
}

/* список и плейсхолдер — на всю ширину */
#tab-friends .friends-list,
#tab-friends .friends-list .shop-placeholder{
    width: 100%;
}


/* =========================
   FRIENDS — invited player card (friend-row)
   ========================= */

#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;              /* важно для ellipsis */
    padding-left: 46px;         /* место под "аватар" */
}

/* фейк-аватар (без изменения HTML/JS) */
#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;
}

/* дата справа как pill */
#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: 999px;

    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;
}


/* =========================
   FRIENDS — stats (stable, no jumping)
   ========================= */

#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; /* ✅ цифры ровные */
}

/* ===== Icons: сюда ты подставляешь СВОИ картинки ===== */
#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; /* размер твоей иконки внутри */
}

/* ✅ Укажи свои пути к PNG/SVG */
#tab-friends .friends-stat-ic.ic-users{
    background-image: url("images/ui/friends.png");
}
#tab-friends .friends-stat-ic.ic-tickets{
    background-image: url("images/ui/ticket.png");
}
#tab-friends .friends-stat-ic.ic-gems{
    background-image: url("images/ui/gem.png");
}


/* =========================
   FRIENDS — PRO UI PACK
   ========================= */

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

/* ===== invite hero (верхняя карточка) ===== */
#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: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    font-weight: 800;
}

/* ===== friends-hero (ссылка) ===== */
#tab-friends .friends-hero{
    /* item-card у тебя часто flex-row, поэтому заставляем тут нормальную колонку */
    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);
}

/* input + actions на всю ширину */
#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);
}

/* ===== friends list card (stats + list) ===== */
#tab-friends .friends-list-card.item-card{
    display:flex;            /* ✅ фиксируем item-card → column */
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    width: 100%;
    gap: 12px;
}

/* скрываем пустой head, чтобы не ломал ширину (ты можешь потом включить) */
#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;
}

/* =========================
   FRIENDS — STATS (stable)
   ========================= */
#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;
}


/* =========================
   FRIENDS — PLAYER CARD (friend-row)
   ========================= */
#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;
}

/* =========================
      FRIENDS STATS — stable layout + custom icons
      ========================= */

#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: 999px;
    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; /* чтобы +10 / +999 меньше прыгало */
    text-align: right;
}

/* === FRIENDS STATS ICONS: hard size control === */
: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;

    /* если PNG с пустыми полями — чуть лучше визуально */
    transform: translateY(0.5px);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.30));
}

/* на очень маленьких экранах можно чуть ужать */
@media (max-width: 380px){
    :root{
        --friendsStatIcon: 13px;
        --friendsStatPillH: 26px;
    }
}


/* === Friends stats polish (final micro-tweaks) === */

#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{
    /* число приглашённых (1) — сделаем чуть жирнее и ровнее */
    font-weight: 1000;
    font-size: 14px;
}

:root{
    --friendsStatIcon: 14px;  /* можно 13–15 */
    --friendsStatPillH: 26px; /* чуть компактнее */
}

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

#tab-friends .friends-stats-num{
    min-width: 30px;          /* чтобы +10 и +999 не “прыгали” */
    text-align: right;
}




/* =========================
   Chest Boutique (Ocean-first)
   ========================= */
.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: 999px;
    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;
}


/* =========================
   CHEST SHOP — boutique UI
   ========================= */

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

.chestshop-active{
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(148,163,184,0.14);
}

.chestshop-active .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.chestshop-active .title{
    font-weight: 900;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
}

.chestshop-active .sub{
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255,255,255,0.62);
}

.chestshop-active .pill{
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(2,6,23,0.35);
    border: 1px solid rgba(148,163,184,0.14);
    color: rgba(255,255,255,0.86);
    white-space: nowrap;
}

.chestshop-filters{
    padding: 10px 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(148,163,184,0.10);
    margin-bottom: 12px;
}

.chestshop-filter-title{
    font-size: 11px;
    font-weight: 900;
    color: rgba(255,255,255,0.70);
    letter-spacing: .2px;
    margin: 2px 2px 8px;
}

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

.chestshop-chip{
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.16);
    background: rgba(2,6,23,0.35);
    color: rgba(255,255,255,0.80);
    font-size: 12px;
    font-weight: 900;
    display:inline-flex;
    align-items:center;
    gap:8px;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
}
.chestshop-chip:active{ transform: scale(.99); }
.chestshop-chip.is-active{
    border-color: rgba(99,102,241,0.55);
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.30), rgba(0,0,0,0)),
            rgba(2,6,23,0.55);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30);
}

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

.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{
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.14);
    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);
    overflow:hidden;
}

.chestcard-content{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 12px;
}

.chestcard-ico{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    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: 24px;
    flex-shrink: 0;
}

.chestcard-info{
    flex: 1;
    min-width: 0;
}

.chestcard-title{
    font-weight: 1000;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    line-height: 1.2;
}

.chestcard-drop-btn{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.14);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.80);
    font-size: 16px;
    display:grid;
    place-items:center;
    cursor:pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.chestcard-drop-btn:hover{
    background: rgba(255,255,255,0.08);
    border-color: rgba(148,163,184,0.20);
}
.chestcard-drop-btn:active{
    transform: scale(0.95);
}

.chestcard-tags{
    display:flex;
    gap:6px;
    flex-wrap: wrap;
}
.chesttag{
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.14);
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.76);
}

.chestcard-actions{
    display:flex;
    gap: 8px;
    padding: 0 12px 12px;
}
.chestbuy{
    flex:1;
    height: 38px;
    border-radius: 12px;
    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: 1000;
    font-size: 13px;
    transition: all 0.2s;
}
.chestbuy:hover:not(:disabled){
    background: rgba(255,255,255,0.10);
}
.chestbuy:active:not(:disabled){
    transform: scale(0.98);
}
.chestbuy:disabled{ opacity:.45; }

.chestshop-hint{
    margin-top: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    text-align: center;
}

/* =========================
   CHEST DETAILS MODAL
   ========================= */
.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;
}

/* =========================
   CHEST QUEUE
   ========================= */
.chest-queue-slots{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.chest-queue-slot{
    border-radius:16px;
    border:1px solid rgba(148,163,184,0.14);
    background:rgba(2,6,23,0.72);
    overflow:hidden;
}

.chest-queue-slot-locked{
    opacity:0.6;
    background:rgba(2,6,23,0.45);
}

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

.chest-queue-slot-number{
    font-weight:900;
    font-size:13px;
    color:rgba(255,255,255,0.92);
}

.chest-queue-slot-status{
    font-size:11px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(99,102,241,0.20);
    color:rgba(255,255,255,0.85);
    font-weight:700;
}

.chest-queue-unlock-btn{
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(99,102,241,0.40);
    background:rgba(99,102,241,0.15);
    color:#fff;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.chest-queue-unlock-btn:active{
    transform:scale(0.98);
}

.chest-queue-slot-content{
    padding:12px;
}

.chest-queue-slot-locked-content{
    text-align:center;
    font-size:32px;
    opacity:0.4;
}

.chest-queue-add-btn{
    width:100%;
    padding:10px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,0.20);
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.92);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

.chest-queue-add-btn:active{
    transform:scale(0.99);
}

.chest-queue-chest-info{
    display:flex;
    align-items:center;
    gap:12px;
}

.chest-queue-chest-emoji{
    font-size:32px;
    line-height:1;
}

.chest-queue-chest-details{
    flex:1;
    min-width:0;
}

.chest-queue-chest-title{
    font-weight:900;
    font-size:13px;
    color:rgba(255,255,255,0.92);
    margin-bottom:4px;
}

.chest-queue-chest-progress{
    font-size:11px;
    color:rgba(255,255,255,0.65);
    margin-bottom:6px;
}

.chest-queue-progress-bar{
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,0.10);
    overflow:hidden;
}

.chest-queue-progress-fill{
    height:100%;
    background:linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius:999px;
    transition:width 0.3s ease;
}


/* =========================
   Chest Open — animation modal
   ========================= */

.chest-open-card{
    overflow:hidden;
}

.chest-open-body{ padding: 12px; }

.chest-open-stage{
    position: relative;
    height: 320px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.12);
    background:
            radial-gradient(120% 140% at 20% 0%, rgba(99,102,241,0.16), rgba(0,0,0,0)),
            rgba(2,6,23,0.55);
    overflow:hidden;
    display:grid;
    place-items:center;
    margin-bottom: 12px;
}

.chest-open-aura{
    position:absolute;
    inset:-60px;
    opacity:.0;
    filter: blur(18px);
    transform: scale(.98);
    transition: opacity .2s ease;
    pointer-events:none;
}

/* сундук */
.chest-open-chest{
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 28px;
    display:grid;
    place-items:center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148,163,184,0.14);
    box-shadow: 0 20px 55px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

.chest-open-chest-ico{
    font-size: 56px;
    line-height: 1;
    transform: translateZ(0);
}

.chest-open-sparks{
    position:absolute;
    inset:-20px;
    opacity:0;
    pointer-events:none;
    background:
            radial-gradient(circle at 30% 30%, rgba(255,255,255,0.20), transparent 35%),
            radial-gradient(circle at 70% 45%, rgba(99,102,241,0.22), transparent 42%),
            radial-gradient(circle at 50% 75%, rgba(34,197,94,0.16), transparent 45%);
    filter: blur(10px);
}

/* burst */
.chest-open-burst{
    position:absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    opacity:0;
    pointer-events:none;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(99,102,241,0.55), rgba(0,0,0,0) 70%);
    transform: scale(.2);
    filter: blur(0px);
}

/* rewards */
.chest-open-rewards{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.reward-fly{
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.9);
    opacity:0;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.14);
    background: rgba(2,6,23,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 1000;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
    box-shadow: 0 18px 45px rgba(0,0,0,0.55);
    white-space: nowrap;
}

/* ===== rarity palettes (aura) ===== */
.chest-open-stage.r-common #chest-open-aura{
    background:
            radial-gradient(circle at 30% 20%, rgba(148,163,184,0.20), transparent 55%),
            radial-gradient(circle at 70% 70%, rgba(148,163,184,0.10), transparent 60%);
}
.chest-open-stage.r-rare #chest-open-aura{
    background:
            radial-gradient(circle at 30% 20%, rgba(59,130,246,0.26), transparent 55%),
            radial-gradient(circle at 70% 70%, rgba(99,102,241,0.16), transparent 60%);
}
.chest-open-stage.r-epic #chest-open-aura{
    background:
            radial-gradient(circle at 30% 20%, rgba(168,85,247,0.28), transparent 55%),
            radial-gradient(circle at 70% 70%, rgba(236,72,153,0.16), transparent 60%);
}
.chest-open-stage.r-legendary #chest-open-aura{
    background:
            radial-gradient(circle at 30% 20%, rgba(250,204,21,0.30), transparent 55%),
            radial-gradient(circle at 70% 70%, rgba(245,158,11,0.18), transparent 60%);
}

/* ===== animations ===== */

@keyframes chestPopIn{
    from{ transform: scale(.90) translateY(6px); opacity:.0; }
    to  { transform: scale(1) translateY(0); opacity:1; }
}
@keyframes chestCharge{
    0%,100%{ transform: scale(1); filter: brightness(1); }
    50%{ transform: scale(1.03); filter: brightness(1.08); }
}
@keyframes chestShake{
    0%{ transform: translateX(0); }
    20%{ transform: translateX(-2px) rotate(-1deg); }
    40%{ transform: translateX(2px) rotate(1deg); }
    60%{ transform: translateX(-2px) rotate(-1deg); }
    80%{ transform: translateX(2px) rotate(1deg); }
    100%{ transform: translateX(0); }
}
@keyframes burstBoom{
    0%{ opacity:0; transform: scale(.2); filter: blur(0px); }
    30%{ opacity:1; transform: scale(18); filter: blur(0px); }
    100%{ opacity:0; transform: scale(26); filter: blur(2px); }
}
@keyframes rewardUp{
    0%{ opacity:0; transform: translate(-50%, -50%) translateY(8px) scale(.92); }
    20%{ opacity:1; }
    100%{ opacity:1; transform: translate(-50%, -50%) translateY(-36px) scale(1); }
}
@keyframes rewardFade{
    to{ opacity:0; transform: translate(-50%, -50%) translateY(-54px) scale(.98); }
}

/* state classes */
.chest-open-chest.is-in{
    animation: chestPopIn 220ms ease-out both;
}
.chest-open-chest.is-charging{
    animation: chestCharge 900ms ease-in-out infinite;
}
.chest-open-chest.is-shaking{
    animation: chestShake 260ms ease-in-out infinite;
}
.chest-open-sparks.is-on{ opacity:.9; transition: opacity .15s ease; }

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

.reward-fly.is-show{ animation: rewardUp 420ms ease-out both; }
.reward-fly.is-hide{ animation: rewardFade 280ms ease-in both; }

/* =========================
   TOP LEADERBOARD
   ========================= */
.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-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);
}