:root{
--bg1:#ff006e;
--bg2:#8338ec;
--bg3:#3a86ff;
--bg4:#06d6a0;

```
--panel:rgba(15,23,42,.88);
--panel-light:rgba(30,41,59,.92);

--text:#ffffff;
--muted:#cbd5e1;

--gold:#fbbf24;
--green:#22c55e;
--red:#ef4444;
--cyan:#22d3ee;

--shadow:0 10px 30px rgba(0,0,0,.35);
```

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
width:100%;
height:100%;
}

body{
font-family:
Inter,
Segoe UI,
Roboto,
sans-serif;

```
color:var(--text);

background:
    linear-gradient(
        -45deg,
        var(--bg1),
        var(--bg2),
        var(--bg3),
        var(--bg4)
    );

background-size:400% 400%;
animation:bgShift 16s ease infinite;

overflow-x:hidden;
```

}

/* =====================
Animated Background
===================== */

@keyframes bgShift{
0%{
background-position:0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}
}

/* =====================
Particles Layer
===================== */

#particles{
position:fixed;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:1;
}

/* =====================
Header
===================== */

header{
position:relative;
z-index:10;

```
display:flex;
justify-content:space-between;
align-items:center;

padding:20px 30px;
```

}

header h1{
font-size:2rem;
font-weight:900;
letter-spacing:1px;

```
text-shadow:
    0 0 15px rgba(255,255,255,.35);
```

}

/* =====================
Layout
===================== */

main{
position:relative;
z-index:10;

```
display:grid;
grid-template-columns:
    1fr
    420px;

min-height:
    calc(100vh - 90px);
```

}

.game-panel{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

```
padding:30px;
```

}

/* =====================
Score Display
===================== */

.score-label{
font-size:1rem;
letter-spacing:4px;
opacity:.8;
margin-bottom:15px;
}

.score{
font-size:6rem;
font-weight:900;

```
text-shadow:
    0 0 20px rgba(255,255,255,.4),
    0 0 50px rgba(34,211,238,.4);

transition:
    transform .08s ease;
```

}

.score.bump{
transform:scale(1.08);
}

.per-press{
margin-top:15px;

```
font-size:1.3rem;
font-weight:700;

color:#7dd3fc;
```

}

.instructions{
margin-top:25px;
font-size:1rem;
opacity:.85;
}

/* =====================
Sidebar
===================== */

aside{
background:var(--panel);

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

border-left:
    1px solid rgba(255,255,255,.08);

padding:20px;

overflow-y:auto;
```

}

/* =====================
Tabs
===================== */

.tabs{
display:flex;
gap:8px;
margin-bottom:20px;
}

.tab{
flex:1;

```
border:none;
border-radius:10px;

padding:12px;

background:#1e293b;
color:white;

cursor:pointer;

transition:.2s;
```

}

.tab:hover

.tab.active{
background:#3b82f6;
}

.tab-panel{
display:none;
}

.tab-panel.active{
display:block;
}

/* =====================
Upgrade Cards
===================== */

.upgrade{
background:var(--panel-light);

```
border-radius:14px;

padding:14px;

margin-bottom:12px;

cursor:pointer;

border:
    1px solid transparent;

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

}

.upgrade:hover{
transform:translateY(-2px);

```
border-color:
    rgba(255,255,255,.3);
```

}

.upgrade.disabled{
opacity:.45;
cursor:not-allowed;
}

.upgrade-name{
font-weight:800;
font-size:1rem;
}

.upgrade-desc{
margin-top:4px;
margin-bottom:10px;

```
font-size:.85rem;

color:var(--muted);
```

}

.upgrade-row{
display:flex;
justify-content:space-between;

```
font-size:.9rem;

margin-top:5px;
```

}

.cost{
color:var(--gold);
}

.level{
color:var(--green);
}

.purchase-flash{
animation:purchaseFlash .3s ease;
}

@keyframes purchaseFlash{
0%{
transform:scale(1);
}
50%{
transform:scale(1.04);
}
100%{
transform:scale(1);
}
}

/* =====================
Stats
===================== */

.stat{
display:flex;
justify-content:space-between;

```
background:var(--panel-light);

margin-bottom:10px;

padding:12px;

border-radius:10px;
```

}

/* =====================
Achievements
===================== */

.achievement{
background:var(--panel-light);

```
border-radius:12px;

padding:12px;

margin-bottom:10px;
```

}

.achievement.unlocked{
border-left:
5px solid var(--gold);
}

.achievement.locked{
opacity:.45;
}

.achievement-title{
font-weight:800;
}

.achievement-desc{
margin-top:4px;
font-size:.85rem;
color:var(--muted);
}

/* =====================
Achievement Popup
===================== */

#achievementPopup{
position:fixed;

```
right:20px;
bottom:20px;

width:320px;

padding:16px;

border-radius:14px;

background:
    linear-gradient(
        135deg,
        #f59e0b,
        #fbbf24
    );

color:black;

font-weight:700;

box-shadow:var(--shadow);

transform:
    translateX(400px);

transition:
    transform .35s ease;

z-index:1000;
```

}

#achievementPopup.show{
transform:
translateX(0);
}

/* =====================
Floating Numbers
===================== */

.floating-number{
position:fixed;

```
font-weight:900;

color:white;

text-shadow:
    0 0 10px rgba(255,255,255,.8);

pointer-events:none;

z-index:999;

animation:
    floatUp 1s forwards;
```

}

@keyframes floatUp{
from{
opacity:1;
transform:
translateY(0)
scale(1);
}

```
to{
    opacity:0;
    transform:
        translateY(-80px)
        scale(1.2);
}
```

}

/* =====================
Particles
===================== */

.particle{
position:fixed;

```
width:8px;
height:8px;

border-radius:50%;

pointer-events:none;

animation:
    particleMove .8s forwards;
```

}

@keyframes particleMove{

```
from{
    opacity:1;
    transform:
        translate(0,0)
        scale(1);
}

to{
    opacity:0;

    transform:
        translate(
            var(--dx),
            var(--dy)
        )
        scale(0);
}
```

}

/* =====================
Prestige
===================== */

#prestigeBtn{
border:none;

```
padding:12px 18px;

border-radius:12px;

font-weight:800;

cursor:pointer;

background:
    linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

color:white;

box-shadow:var(--shadow);

transition:.2s;
```

}

#prestigeBtn:hover{
transform:translateY(-2px);
}

.hidden{
display:none;
}

/* =====================
Scrollbar
===================== */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#0f172a;
}

::-webkit-scrollbar-thumb{
background:#475569;
border-radius:999px;
}

/* =====================
Responsive
===================== */

@media (max-width:950px){

```
main{
    grid-template-columns:1fr;
}

aside{
    border-left:none;
    border-top:
        1px solid rgba(255,255,255,.1);

    min-height:350px;
}

.score{
    font-size:4rem;
}

header{
    flex-direction:column;
    gap:15px;
}
```

}