:root {
    --bg-main: #05070f;
    --bg-card: #0f1321;
    --bg-inner: #1a2033;
    --accent-blue: #00f0ff;
    --accent-purple: #c026d3;
    --accent-green: #22ff88;
    --accent-red: #ff2d55;
    --text-primary: #e0f8ff;
    --text-secondary: #8ba3c2;
    --border-color: #334466;
    --glow-blue: rgba(0, 240, 255, 0.8);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    touch-action: manipulation;
}

body {
    background: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    overflow: hidden;
    position: relative;
}

canvas#particle-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.85;
}

/* AUTH & APP CONTAINER */
.auth-box, #app-container {
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border: 2px solid var(--accent-blue);
    border-radius: 28px;
    box-shadow: 0 0 80px var(--glow-blue);
}

.auth-box { padding: 48px 36px; text-align: center; }
#app-container { padding: 24px; min-height: 680px; display: none; flex-direction: column; }

/* HEADER */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.title-area h1 { color: var(--accent-blue); font-size: 1.4rem; }

.rebirth-badge {
    padding: 6px 18px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.header-right-zone { display: flex; align-items: center; gap: 12px; }

/* TABS */
.nav-tabs {
    display: flex;
    background: var(--bg-inner);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 6px;
    margin-bottom: 26px;
    overflow: hidden;
}

.tab-btn {
    flex: 1;
    padding: 14px 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    border-radius: 14px;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 0.95rem;
}

.tab-btn.active {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    color: white;
    box-shadow: 0 0 25px var(--glow-blue);
}

/* VIEWS */
.view-content { display: none; flex-direction: column; flex-grow: 1; }
.view-content.active { display: flex; }

/* BALANCE */
.balance-card {
    background: linear-gradient(145deg, #1a2033, #0f1321);
    border: 1px solid var(--accent-blue);
    border-radius: 22px;
    padding: 34px 26px;
    text-align: center;
    margin-bottom: 26px;
}

.label { font-size: 0.9rem; opacity: 0.8; letter-spacing: 2px; display: block; margin-bottom: 8px; }
.value-wrapper { font-size: 3.5rem; font-weight: 800; color: var(--accent-green); }
.unit { font-size: 1.2rem; color: var(--text-secondary); }

/* BUTTONS */
.action-btn {
    width: 100%;
    padding: 20px;
    background: linear-gradient(90deg, var(--accent-blue), #00aaff);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 1.22rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 30px var(--glow-blue);
    margin-bottom: 20px;
}

/* STATS & REBIRTH */
.stats-row {
    display: flex;
    justify-content: space-between;
    background: var(--bg-inner);
    padding: 18px;
    border-radius: 18px;
    margin: 24px 0;
    font-size: 1rem;
}

.rebirth-panel {
    background: linear-gradient(135deg, rgba(192,38,211,0.18), rgba(0,240,255,0.12));
    border: 2px solid var(--accent-purple);
    border-radius: 22px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.rebirth-btn {
    background: linear-gradient(90deg, var(--accent-purple), #e040ff);
    color: white;
    padding: 16px 32px;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* SHOP - FIXED HORIZONTAL SCROLL */
.upgrade-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    width: 100%;
}

.upgrade-item {
    width: 100%;
    background: var(--bg-inner);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

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

.buy-btn {
    padding: 14px 24px;
    background: linear-gradient(#ffffff, #e0e0e0);
    color: #0a0f1f;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.buy-btn.affordable {
    box-shadow: 0 0 20px var(--glow-blue),
                0 0 35px rgba(0, 240, 255, 0.6);
    background: linear-gradient(#ccffff, #ffffff);
    transform: scale(1.04);
}

/* LEADERBOARD */
.leaderboard-card {
    background: var(--bg-inner);
    border-radius: 20px;
    padding: 20px;
    flex: 1;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.leaderboard-list {
    max-height: 380px;
    overflow-y: auto;
}

/* FOOTER */
.danger-zone { margin-top: auto; padding-top: 20px; text-align: center; }
.reset-btn {
    background: transparent;
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
    padding: 10px 28px;
    border-radius: 9999px;
    font-weight: 600;
}

.log-box { font-size: 0.85rem; opacity: 0.8; text-align: center; }