* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* =========================
   Premium theme (override)
   Goal: keep layout/logic, replace visuals to match premium dark + purple glow
   ========================= */

:root {
    --bg0: #07070b;
    --bg1: #0b0b12;
    --panel: rgba(22, 18, 34, 0.52);
    --panel-strong: rgba(22, 18, 34, 0.72);
    --stroke: rgba(255, 255, 255, 0.08);
    --stroke-strong: rgba(255, 255, 255, 0.12);
    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.62);
    --muted2: rgba(255, 255, 255, 0.45);

    --accent: #a855f7;      /* purple */
    --accent2: #7c3aed;     /* deep purple */
    --accent3: #c084fc;     /* lavender */

    /* Glass system (unify all UI surfaces) */
    /* Dark glass like bottom dock (no "grey milk") */
    --glass-bg: linear-gradient(180deg, rgba(12,10,18,0.62), rgba(12,10,18,0.42));
    --glass-bg-strong: linear-gradient(180deg, rgba(12,10,18,0.72), rgba(12,10,18,0.52));
    --glass-border: rgba(255,255,255,0.08);
    --glass-border-strong: rgba(255,255,255,0.12);
    --glass-highlight: linear-gradient(120deg, rgba(255,255,255,0.16), transparent 35%, rgba(168,85,247,0.12));
    --glass-sheen: radial-gradient(760px 280px at 18% 10%, rgba(255,255,255,0.12), transparent 62%);
    --blur-md: blur(16px);
    --blur-lg: blur(22px);

    --shadow: 0 18px 60px rgba(0,0,0,0.55);
    --shadow-soft: 0 12px 40px rgba(0,0,0,0.38);
    --shadow-glass: 0 18px 55px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.05) inset;
    --shadow-glass-soft: 0 14px 44px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.04) inset;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
}

/* === Icon system (replace emoji with consistent premium glyphs) === */
.icon {
    font-size: 0 !important; /* hide emoji/text fallback */
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
}
.icon::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    filter: drop-shadow(0 0 12px rgba(168,85,247,0.35));
}

.i-home { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5z'/%3E%3C/svg%3E"); }
.i-shop { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h3v2H2V8h3V6zm2 2h6V6H9v2zm-4 4h14l-1.2 8.4A2 2 0 0 1 15.8 22H8.2a2 2 0 0 1-1.98-1.6L5 12z'/%3E%3C/svg%3E"); }
.i-rank { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4h10v3a5 5 0 0 1-10 0V4zm12 2h2v1a4 4 0 0 1-4 4v-2a2 2 0 0 0 2-2V6zM3 6h2v1a2 2 0 0 0 2 2v2a4 4 0 0 1-4-4V6zm6 11h6v2H9v-2zm-1 3h8v2H8v-2z'/%3E%3C/svg%3E"); }
.i-quests { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v2H7V3zm-2 4h14v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7zm4 3v2h2v-2H9zm0 4v2h2v-2H9zm4-4v2h6v-2h-6zm0 4v2h6v-2h-6z'/%3E%3C/svg%3E"); }
.i-gift { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 7h-2.2a3 3 0 0 0 .2-1 3 3 0 0 0-5-2.2A3 3 0 0 0 8 6c0 .35.07.68.2 1H4v4h16V7zm-9-1a1 1 0 1 1-2 0c0-.55.45-1 1-1s1 .45 1 1zm4 0a1 1 0 0 1-2 0c0-.55.45-1 1-1s1 .45 1 1zm5 7v8a1 1 0 0 1-1 1h-7v-10h8zm-10 10H5a1 1 0 0 1-1-1v-8h8v10z'/%3E%3C/svg%3E"); }
.i-energy { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h8l-1 8 10-12h-8l1-8z'/%3E%3C/svg%3E"); }
.i-rocket { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3c4 1 7 4 7 8-3 1-6 4-8 8-4 0-7-3-8-7 4-2 7-5 9-9zM5 17l-2 4 4-2 2-2-2-2-2 2zm10-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E"); }
.i-coin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c5.5 0 10 2.24 10 5s-4.5 5-10 5S2 9.76 2 7s4.5-5 10-5zm0 12c5.5 0 10-2.24 10-5v8c0 2.76-4.5 5-10 5S2 19.76 2 17V9c0 2.76 4.5 5 10 5z'/%3E%3C/svg%3E"); }
.i-crystal { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 9l8 13 8-13-8-7zm0 3.2L17.2 9H6.8L12 5.2z'/%3E%3C/svg%3E"); }
.i-xp { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h3l2 3 2-3h3l-3.5 5L14 17h-3l-2-3-2 3H4l3.5-5L4 7zm12 0h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v4h-2V7zm2 2v2h2V9h-2z'/%3E%3C/svg%3E"); }
.i-tap { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a4 4 0 0 1 4 4v4h-2V6a2 2 0 1 0-4 0v6.5l-1.2-1.2a2 2 0 0 0-2.8 2.8l4.6 4.6A6 6 0 0 0 14.2 21H16a6 6 0 0 0 6-6v-1h-2v1a4 4 0 0 1-4 4h-1.8a4 4 0 0 1-2.83-1.17L7.1 13.54a.5.5 0 0 1 .7-.7L12 17V6a4 4 0 0 1 4-4z'/%3E%3C/svg%3E"); }
.i-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 4 11h5v10h6V11h5L12 3z'/%3E%3C/svg%3E"); }
.i-hour { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h12v2h-1v3.5a6 6 0 0 1-2.4 4.8L13 13l1.6.7A6 6 0 0 1 17 18.5V22h1v2H6v-2h1v-3.5a6 6 0 0 1 2.4-4.8L11 13l-1.6-.7A6 6 0 0 1 7 7.5V4H6V2zm3 2v3.5c0 1.3.6 2.5 1.6 3.3L12 12l1.4-1.2c1-.8 1.6-2 1.6-3.3V4H9z'/%3E%3C/svg%3E"); }

.nav-icon.icon::before { width: 20px; height: 20px; }
.stat-icon.icon::before { width: 18px; height: 18px; }
.energy-icon.icon::before { width: 18px; height: 18px; }
.boost-icon.icon::before { width: 18px; height: 18px; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background:
        radial-gradient(900px 900px at 18% 12%, rgba(168, 85, 247, 0.22), transparent 55%),
        radial-gradient(700px 700px at 80% 18%, rgba(124, 58, 237, 0.16), transparent 58%),
        radial-gradient(900px 900px at 50% 86%, rgba(192, 132, 252, 0.10), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    /* Keep content clear of floating bottom dock */
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* subtle dynamic states */
body.state-boost {
    background:
        radial-gradient(900px 900px at 18% 12%, rgba(168, 85, 247, 0.30), transparent 55%),
        radial-gradient(700px 700px at 80% 18%, rgba(124, 58, 237, 0.22), transparent 58%),
        radial-gradient(900px 900px at 50% 86%, rgba(192, 132, 252, 0.14), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(168, 85, 247, 0.10), transparent 45%),
                radial-gradient(circle at 75% 25%, rgba(124, 58, 237, 0.08), transparent 55%),
                radial-gradient(circle at 55% 80%, rgba(192, 132, 252, 0.06), transparent 55%);
    filter: blur(38px);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

body::after {
    /* subtle grain */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.03) 1px, transparent 1px, transparent 4px);
    mix-blend-mode: overlay;
}

/* performance mode: reduce blur/glow on low-end phones */
body.perf-low::after { opacity: 0; }
body.perf-low .stat-card,
body.perf-low .currency-chip,
body.perf-low .energy-bar,
body.perf-low .modal-content,
body.perf-low .tap-circle,
body.perf-low .hub-btn,
body.perf-low .list-item {
    backdrop-filter: none !important;
}
body.perf-low .tap-circle::after { box-shadow: 0 0 0 10px rgba(168,85,247,0.08); }
body.perf-low .icon::before { filter: none; }

/* Mobile-first: one-hand reach */
@media (max-width: 480px) {
    body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

    /* keep top clean: hide home stats cards, they are in Stats modal */
    #homeStatsCards { display: none; }

    .tap-section {
        min-height: 340px;
        padding: 12px 16px 8px;
    }

    /* bigger hit area without changing visuals */
    .tap-circle::marker { content: ""; }

    .energy-section { padding-bottom: 18px; }

    .bottom-nav {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

/* Screens (native-like tabs) */
.screens {
    min-height: 100vh;
}
.screen {
    display: none;
    min-height: 100vh;
}
.screen.active {
    display: block;
}
.screen-top {
    padding: 14px 16px 10px;
    position: sticky;
    top: 0;
    z-index: 90;
    background: linear-gradient(180deg, rgba(12, 10, 18, 0.62), rgba(12, 10, 18, 0.30));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: var(--blur-lg);
}
.screen-title {
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.92);
}
.screen-body {
    padding: 10px 16px 28px;
}

/* Desktop/tablet: center content and keep perfect spacing */
@media (min-width: 540px) {
    .top-bar,
    .profile-section,
    .stats-cards,
    .score-section,
    .tap-section,
    .energy-section,
    .screen-top,
    .screen-body {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    .bottom-nav {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* no-energy feedback */
.energy-bar.no-energy {
    animation: noEnergyPulse 420ms ease;
    box-shadow: 0 0 0 1px rgba(255,80,200,0.22) inset, 0 10px 24px rgba(255,80,200,0.10);
}
@keyframes noEnergyPulse {
    0% { transform: translateY(0); }
    35% { transform: translateY(-1px); }
    70% { transform: translateY(0); }
}

/* Crit ring */
.crit-ring {
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    border: 2px solid rgba(192,132,252,0.0);
    box-shadow: 0 0 0 rgba(192,132,252,0.0);
    pointer-events: none;
    animation: critRing 420ms cubic-bezier(.2,.9,.2,1);
    z-index: 4;
}
@keyframes critRing {
    0% { transform: scale(0.96); opacity: 0; border-color: rgba(192,132,252,0.0); }
    20% { opacity: 1; border-color: rgba(192,132,252,0.78); box-shadow: 0 0 30px rgba(168,85,247,0.30); }
    100% { transform: scale(1.06); opacity: 0; border-color: rgba(192,132,252,0.0); box-shadow: 0 0 0 rgba(168,85,247,0.0); }
}

/* Tabs (Rewards modal) */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.tab-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: var(--glass-bg);
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
    color: rgba(255,255,255,0.80);
    font-weight: 800;
    cursor: pointer;
}
.tab-btn::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.55;
    pointer-events: none;
}
.tab-btn > * { position: relative; z-index: 1; }
.tab-btn.active {
    background: rgba(168,85,247,0.18);
    border-color: rgba(168,85,247,0.35);
    color: rgba(255,255,255,0.92);
    box-shadow: 0 14px 36px rgba(168,85,247,0.18);
}
.tab-pane { display: none; }
.tab-pane.show { display: block; }

/* Pass rewards readability */
#passTiers .list-item .muted strong {
    color: rgba(255,255,255,0.88);
}
#passTiers .list-item .muted div {
    margin-top: 4px;
}

/* Bottom sheet on mobile */
@media (max-width: 480px) {
    .modal { align-items: flex-end; }
    .modal-content {
        width: 100%;
        max-width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: calc(92vh - env(safe-area-inset-top));
    }
    .modal-header::before {
        content: "";
        display: block;
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255,255,255,0.12);
        position: absolute;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
    }
    .modal-header { position: relative; padding-top: 22px; }
}

/* Верхняя панель */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(12, 10, 18, 0.62), rgba(12, 10, 18, 0.38));
    border-bottom: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: var(--blur-lg);
    position: sticky;
    top: 0;
    z-index: 100;
}

.icon-btn {
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.90);
    font-size: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 999px;
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.icon-btn::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-highlight);
    opacity: 0.32;
    pointer-events: none;
}

.app-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.90);
    flex: 1;
    text-align: center;
    letter-spacing: 0.2px;
}

/* Профиль секция */
.profile-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

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

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 40%),
                linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(124, 58, 237, 0.85));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 40px rgba(124,58,237,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.profile-text {
    display: flex;
    flex-direction: column;
}

.profile-name {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.profile-role {
    font-size: 12px;
    color: var(--muted2);
}

.partnership {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--glass-bg);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* Карточки статистики */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
}

.stat-card {
    background: var(--glass-bg-strong);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--shadow-glass-soft);
    backdrop-filter: var(--blur-lg);
    min-height: 86px;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.85;
    pointer-events: none;
}
.stat-card > * { position: relative; z-index: 1; }

.stat-icon {
    font-size: 20px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.stat-icon::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-highlight);
    opacity: 0.45;
    pointer-events: none;
}
.stat-icon > * { position: relative; z-index: 1; }

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-label {
    font-size: 10px;
    color: var(--muted2);
    text-align: center;
}

.stat-value {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}

/* Счет и прогресс */
.score-section {
    padding: 18px 16px 14px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.main-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.coin-icon {
    font-size: 0;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.26), transparent 45%),
                linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 40px rgba(168, 85, 247, 0.22);
}

.coin-icon::before {
    content: "◈"; /* simple crystal glyph */
    font-size: 18px;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 0 18px rgba(168,85,247,0.55);
}

.score-value {
    font-size: 40px;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.4px;
}

.currency-bar {
    margin: 8px auto 10px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.currency-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.currency-chip::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    pointer-events: none;
    opacity: 0.9;
}
.currency-chip > * { position: relative; z-index: 1; }

.currency-chip .icon::before {
    width: 16px;
    height: 16px;
}

.currency-value {
    font-weight: 800;
    font-size: 12px;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
}

.level-progress {
    margin-top: 12px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
}

.progress-label {
    color: var(--muted2);
    font-weight: 500;
}

.progress-label-right {
    color: #ffffff;
    font-weight: 600;
}

.progress-bar {
    height: 10px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(168,85,247,0.90) 0%, rgba(124,58,237,0.92) 55%, rgba(192,132,252,0.92) 100%);
    border-radius: 4px;
    transition: width 260ms ease;
    width: 10%;
    position: relative;
}
.progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-40%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    opacity: 0.65;
    animation: shimmer 2.2s ease-in-out infinite;
    pointer-events: none;
}

/* Центральная тапалка */
.tap-section {
    padding: 18px 16px 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    min-height: 300px;
}

.tap-circle {
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    border: none;
    box-shadow: none;
    backdrop-filter: blur(18px);
    transition: transform 170ms cubic-bezier(.2,.9,.2,1), filter 170ms ease;
    user-select: none;
    will-change: transform;
}

/* Mascot photo frame (clips even when image has background) */
.mascot-wrap {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 84%;
    height: 84%;
    border-radius: 999px;
    overflow: hidden;
    z-index: 3;
    /* Single, clean medallion (no extra rings) */
    background:
        radial-gradient(65% 65% at 50% 38%, rgba(255,255,255,0.10), transparent 62%),
        radial-gradient(80% 80% at 50% 78%, rgba(168,85,247,0.14), transparent 62%),
        linear-gradient(180deg, rgba(10,10,18,0.92), rgba(8,8,14,0.84));
    /* ring is drawn via ::after to match reference */
    box-shadow: 0 30px 90px rgba(0,0,0,0.70);
    opacity: 0;
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 160ms ease;
    pointer-events: none;
}
.mascot-wrap::before {
    /* subtle top-left gloss (kept very soft) */
    content: "";
    position: absolute;
    inset: -54px -54px auto auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 62%);
    opacity: 0.45;
    transform: rotate(10deg);
    pointer-events: none;
}
.mascot-wrap::after {
    /* outer ring stroke like reference */
    content: "";
    position: absolute;
    inset: -2px; /* slightly outside to feel like a stroke */
    border-radius: 999px;
    background:
        conic-gradient(
            from 210deg,
            rgba(86, 122, 255, 0.10) 0deg,
            rgba(86, 122, 255, 0.95) 70deg,
            rgba(138, 92, 255, 0.85) 140deg,
            rgba(120, 190, 255, 0.92) 210deg,
            rgba(86, 122, 255, 0.95) 290deg,
            rgba(86, 122, 255, 0.10) 360deg
        );
    /* ring thickness */
    -webkit-mask: radial-gradient(circle, transparent 80%, #000 81%);
    mask: radial-gradient(circle, transparent 80%, #000 81%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 0 22px rgba(86, 122, 255, 0.35),
        0 0 44px rgba(124, 58, 237, 0.18);
    opacity: 0.95;
    pointer-events: none;
}
.mascot-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0; /* максимально крупно без обрезки */
    object-fit: contain; /* no crop */
    object-position: center;
    /* transform is controlled by JS (unified framing + parallax) */
    filter:
        drop-shadow(0 26px 44px rgba(0,0,0,0.66))
        drop-shadow(0 0 18px rgba(168,85,247,0.16));
    user-select: none;
    pointer-events: none;
}

.tap-circle.has-mascot .mascot-wrap { opacity: 0.98; }

/* When photo mascot is used: remove extra rings (avoid circle-in-circle noise) */
.tap-circle.has-mascot::before {
    opacity: 0;
}
.tap-circle.has-mascot::after {
    opacity: 0;
    box-shadow: none;
}

.tap-circle.has-mascot .dino-character {
    opacity: 0;
    transform: scale(0.98);
}

.tap-circle:active .mascot-wrap {
    transform: translate(-50%, -50%) scale(0.985);
    box-shadow:
        0 28px 70px rgba(0,0,0,0.64),
        0 0 0 1px rgba(255,255,255,0.08) inset;
}

.tap-circle::before {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), transparent 45%),
        radial-gradient(circle at 55% 65%, rgba(168, 85, 247, 0.20), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.10);
}

.tap-circle::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 999px;
    box-shadow:
        0 0 0 10px rgba(168, 85, 247, 0.16),
        0 0 0 18px rgba(124, 58, 237, 0.10),
        0 0 60px rgba(168, 85, 247, 0.22);
    pointer-events: none;
}

.tap-circle:active {
    transform: scale(0.985);
}

.tap-circle.tap-disabled {
    pointer-events: none;
    filter: grayscale(0.3) saturate(0.7);
    opacity: 0.75;
}
.tap-circle.tap-disabled::after {
    box-shadow:
        0 0 0 8px rgba(255,255,255,0.06),
        0 0 30px rgba(255,255,255,0.06);
}

.dino-character {
    font-size: 120px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
    animation: float 3s ease-in-out infinite;
}

.dino-character.level-2 {
    filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.45));
}

.dino-character.level-3 {
    filter: drop-shadow(0 4px 16px rgba(255, 140, 0, 0.55));
}

.dino-character.level-4 {
    filter: drop-shadow(0 4px 20px rgba(0, 255, 191, 0.6));
}

.dino-character.level-5 {
    filter: drop-shadow(0 4px 24px rgba(138, 43, 226, 0.7));
    animation: float 3s ease-in-out infinite, glow 2s ease-in-out infinite;
}

/* Энергия и бусты */
.energy-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px 18px;
    background: transparent;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.energy-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.90);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 10px 12px;
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.energy-bar::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.85;
    pointer-events: none;
}
.energy-bar > * { position: relative; z-index: 1; }

.energy-icon {
    font-size: 20px;
}

.energy-timer {
    font-size: 12px;
    color: var(--muted);
    margin-left: 6px;
    white-space: nowrap;
}

.boost-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(124,58,237,0.95) 55%, rgba(192,132,252,0.90) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 18px 40px rgba(124,58,237,0.28);
    justify-content: center;
}

.boost-btn:active {
    transform: scale(0.95);
}

.boost-icon {
    font-size: 18px;
}

/* Нижняя навигация */
.bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 10px;
    background: linear-gradient(180deg, rgba(12, 10, 18, 0.72), rgba(12, 10, 18, 0.52));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    backdrop-filter: var(--blur-lg);
    box-shadow: 0 26px 80px rgba(0,0,0,0.62), 0 1px 0 rgba(255,255,255,0.05) inset;
    z-index: 100;
    overflow: hidden;
}
.bottom-nav::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(120deg, rgba(255,255,255,0.10), transparent 35%, rgba(168,85,247,0.10));
    opacity: 0.85;
    pointer-events: none;
}
.bottom-nav > * { position: relative; z-index: 1; }

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border-radius: 14px;
    position: relative;
}

.nav-item:active {
    opacity: 0.6;
}

.nav-icon {
    font-size: 20px;
    color: rgba(255,255,255,0.75);
}

.nav-label {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
}

.nav-item.active {
    background: rgba(168,85,247,0.18);
    border: 1px solid rgba(168,85,247,0.35);
    box-shadow: 0 10px 30px rgba(168,85,247,0.20);
}

.nav-item.active .nav-icon {
    filter: drop-shadow(0 0 12px rgba(168,85,247,0.55));
    color: rgba(255,255,255,0.92);
}

.nav-item.active .nav-label {
    color: rgba(255,255,255,0.88);
    font-weight: 700;
}

/* Уведомление об апгрейде */
.upgrade-notification {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

/* Make bottom nav feel like a premium dock */
.bottom-nav {
    padding: 10px 10px;
    gap: 6px;
}
.bottom-nav .nav-item {
    min-width: 64px;
}
.bottom-nav .nav-item.active {
    background: linear-gradient(180deg, rgba(168,85,247,0.22), rgba(124,58,237,0.12));
}

.upgrade-notification.show {
    display: flex;
}

.notification-content {
    background: linear-gradient(180deg, rgba(12,10,18,0.72), rgba(12,10,18,0.46));
    padding: 32px;
    border-radius: 20px;
    text-align: center;
    max-width: 85%;
    box-shadow: 0 28px 90px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.06) inset;
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: var(--blur-lg);
    animation: scaleIn 0.3s ease;
}

.notification-content h2 {
    font-size: 28px;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.92);
}

.notification-content p {
    font-size: 18px;
    margin-bottom: 24px;
    color: #ffffff;
}

.notification-content button {
    background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(124,58,237,0.95) 55%, rgba(192,132,252,0.90) 100%);
    color: rgba(255,255,255,0.96);
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 18px 40px rgba(124,58,237,0.26);
}

.notification-content button:active {
    transform: scale(0.95);
}

/* Эффекты тапа */
.tap-effects {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 50;
}

.tap-effect {
    position: absolute;
    font-size: 28px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    animation: tapPop 0.6s ease-out forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tap-effect.crit {
    color: rgba(168,85,247,0.98);
    text-shadow: 0 2px 10px rgba(255, 92, 244, 0.7);
    font-size: 32px;
}

/* Квесты */
.quests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quest-item {
    background: var(--glass-bg-strong);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 14px;
    backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.quest-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.85;
    pointer-events: none;
}
.quest-item > * { position: relative; z-index: 1; }

.quest-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.quest-reward {
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    margin-bottom: 6px;
}

.quest-link,
button.quest-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255,255,255,0.86);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(168,85,247,0.10);
    margin-bottom: 8px;
}
.quest-link.ig-btn,
button.quest-link.ig-btn {
    width: 100%;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.quest-link.ig-btn:disabled,
button.quest-link.ig-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.quest-link:active {
    transform: translateY(1px);
}

.quest-progress {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(168,85,247,0.85) 0%, rgba(124,58,237,0.95) 65%, rgba(192,132,252,0.85) 100%);
    width: 0%;
    transition: width 0.3s ease;
}

.quest-status {
    font-size: 12px;
    color: #aaa;
}

.quests-note {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
}

/* Предпросмотр следующих уровней */
.next-levels-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: 62vh;
    overflow: auto;
    padding-right: 4px;
}
.next-level-card {
    background: var(--glass-bg-strong);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--shadow-glass-soft);
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 74px;
}
.next-level-card.current {
    border-color: rgba(168,85,247,0.55);
    box-shadow: 0 0 0 1px rgba(168,85,247,0.25), var(--shadow-glass-soft);
}
.next-level-card.locked {
    opacity: 0.75;
}
.next-level-avatar {
    width: 78px;
    height: 78px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(60px 60px at 35% 30%, rgba(168,85,247,0.22), rgba(255,255,255,0.06));
    flex: 0 0 auto;
}
.next-level-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: contrast(1.08) saturate(1.05) drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}
.next-level-meta .title {
    font-weight: 800;
    font-size: 14px;
}
.next-level-meta .muted {
    font-size: 12px;
    color: rgba(255,255,255,0.72);
}
.next-level-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.next-level-chip {
    font-size: 11px;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    white-space: nowrap;
    flex: 0 0 auto;
}
.next-level-chip.past {
    background: rgba(34,197,94,0.10);
    border-color: rgba(34,197,94,0.25);
}
.next-level-chip.current {
    background: rgba(168,85,247,0.18);
    border-color: rgba(168,85,247,0.32);
}
.next-level-chip.locked {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.25);
}

@media (max-width: 380px) {
    .next-level-card { padding: 12px; }
}

/* Офлайн баннер */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    background: rgba(168,85,247,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    font-size: 14px;
    text-align: center;
    z-index: 3000;
    display: none;
}

@media (max-width: 360px) {
    .offline-banner {
        font-size: 12px;
    }
}

/* Анимации */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 4px 24px rgba(138, 43, 226, 0.7));
    }
    50% {
        filter: drop-shadow(0 4px 32px rgba(255, 20, 147, 0.9));
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes tapPop {
    0% {
        transform: scale(0.5) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1.2) translateY(-60px);
        opacity: 0;
    }
}

/* Модальное окно ежедневных наград */
.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 160ms ease;
}

/* Settings should be able to open above the hub ("⋯") modal */
#settingsModal {
    z-index: 2600;
}

.modal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    background: linear-gradient(180deg, rgba(12,10,18,0.70), rgba(12,10,18,0.46));
    border-radius: 20px;
    padding: 0;
    max-width: 90%;
    width: 400px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 28px 90px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.06) inset;
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: var(--blur-lg);
    transform: translateY(14px) scale(0.985);
    opacity: 0.98;
    transition: transform 180ms ease, opacity 180ms ease;
}

.modal.show .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Skeleton loaders */
.skeleton { display: flex; flex-direction: column; gap: 12px; }
.skeleton-row {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--glass-bg);
    overflow: hidden;
    position: relative;
}
.skeleton-row::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-60%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: shimmer 1.25s ease-in-out infinite;
}
.sk {
    height: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
}
.sk-title { width: 62%; margin-bottom: 10px; }
.sk-sub { width: 40%; opacity: 0.8; margin-bottom: 12px; }
.sk-bar { width: 100%; height: 8px; opacity: 0.7; }

@keyframes shimmer {
    0% { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.modal-header h2 {
    font-size: 24px;
    color: rgba(255,255,255,0.92);
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(85vh - 90px);
}

.reward-info {
    text-align: center;
}

.streak-info {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 16px;
}

.streak-info strong {
    color: rgba(255,255,255,0.92);
    font-size: 20px;
}

.reward-amount {
    font-size: 36px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin: 24px 0;
}

.claim-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(124,58,237,0.95) 55%, rgba(192,132,252,0.90) 100%);
    color: rgba(255,255,255,0.96);
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 18px 40px rgba(124,58,237,0.26);
    margin-top: 16px;
}

.claim-btn:active {
    transform: scale(0.95);
}

.claim-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Магазин */
.shop-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-item {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 14px;
    backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}
.shop-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.9;
    pointer-events: none;
}
.shop-item > * { position: relative; z-index: 1; }

.shop-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.shop-desc {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.shop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-cost {
    color: rgba(255,255,255,0.92);
    font-weight: 700;
}

.shop-btn {
    background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(124,58,237,0.95) 55%, rgba(192,132,252,0.90) 100%);
    color: rgba(255,255,255,0.96);
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 700;
    cursor: pointer;
}

.shop-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hub + list UI helpers (used by app.js) */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.hub-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 14px 12px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
    transition: transform 160ms cubic-bezier(.2,.9,.2,1), border-color 160ms ease, box-shadow 160ms ease;
}
.hub-btn::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-highlight);
    opacity: 0.38;
    pointer-events: none;
}
.hub-btn > * { position: relative; z-index: 1; }
.hub-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hub-btn:active { transform: scale(0.985); }
@media (hover:hover) {
    .hub-btn:hover {
        border-color: rgba(192,132,252,0.28);
        box-shadow: 0 18px 60px rgba(0,0,0,0.52), 0 0 0 1px rgba(168,85,247,0.10) inset;
        transform: translateY(-1px);
    }
}

/* Shop screen: single action should look intentional (no empty 2-column grid) */
#screenShop .hub-grid { grid-template-columns: 1fr; }
#screenShop .hub-btn {
    padding: 16px 14px;
    border-radius: 18px;
    text-align: left;
}
#screenShop .hub-btn::before { opacity: 0.32; }
#screenShop .card { padding: 12px; }

.card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 12px;
    backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.9;
    pointer-events: none;
}
.card > * { position: relative; z-index: 1; }

.list { display: flex; flex-direction: column; gap: 12px; }
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.list-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.75;
    pointer-events: none;
}
.list-item > * { position: relative; z-index: 1; }
.title { font-weight: 800; }
.muted { color: #9aa0aa; font-size: 12px; margin-top: 4px; }
.row { display: flex; align-items: center; }
.btn-small {
    background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(124,58,237,0.95) 55%, rgba(192,132,252,0.90) 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 18px 44px rgba(124,58,237,0.30);
    transition: transform 160ms cubic-bezier(.2,.9,.2,1), filter 160ms ease;
}
.btn-small:active { transform: scale(0.985); filter: saturate(1.05); }
.btn-small:disabled { opacity: 0.5; cursor: not-allowed; }

/* Календарь */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.calendar-day {
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.calendar-day::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.70;
    pointer-events: none;
}
.calendar-day > * { position: relative; z-index: 1; }

.calendar-day.active {
    border-color: rgba(168,85,247,0.45);
    box-shadow: 0 0 0 1px rgba(168,85,247,0.18) inset, 0 16px 40px rgba(168,85,247,0.18);
}

.calendar-day.done {
    background: rgba(168,85,247,0.10);
    border-color: rgba(168,85,247,0.28);
}

.calendar-reward {
    text-align: center;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    margin-bottom: 10px;
}

/* Лидерборд */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leader-item {
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.leader-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.72;
    pointer-events: none;
}
.leader-item > * { position: relative; z-index: 1; }

.leader-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.leader-score {
    color: rgba(255,255,255,0.92);
    font-weight: 700;
}

/* Настройки */
.setting-item {
    margin-bottom: 10px;
}

.setting-note {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}

/* ====== Game Hub + новые модалки ====== */
/* (styles for .hub-grid/.hub-btn/.card are defined above in "Hub + list UI helpers") */

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

.input {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: var(--glass-bg);
    backdrop-filter: var(--blur-md);
    color: #fff;
    outline: none;
}

.input::placeholder {
    color: #888;
}

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

.list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,0.09);
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-glass-soft);
    position: relative;
    overflow: hidden;
}
.list-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--glass-sheen);
    opacity: 0.72;
    pointer-events: none;
}
.list-item > * { position: relative; z-index: 1; }

.list-item .title {
    font-weight: 700;
}

.btn-small {
    padding: 8px 10px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(124,58,237,0.95) 55%, rgba(192,132,252,0.90) 100%);
    color: rgba(255,255,255,0.96);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 18px 44px rgba(124,58,237,0.30);
    transition: transform 160ms cubic-bezier(.2,.9,.2,1), filter 160ms ease;
}
.btn-small:active { transform: scale(0.985); filter: saturate(1.05); }

.btn-small:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Адаптивность */
@media (max-width: 360px) {
    .stats-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }
    
    .stat-card {
        padding: 8px;
    }
    
    .stat-icon {
        font-size: 20px;
    }
    
    .stat-label {
        font-size: 9px;
    }
    
    .stat-value {
        font-size: 12px;
    }
    
    .tap-circle {
        width: 196px;
        height: 196px;
    }
    
    .dino-character {
        font-size: 100px;
    }

    .hub-grid {
        grid-template-columns: 1fr;
    }
}