* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
:root {
--accent: #3b82f6;
--accent-glow: rgba(59, 130, 246, 0.4);
--bg-deep: #06060f;
--bg-card: #0d0d1a;
--bg-card-border: #1a1a2e;
--text-primary: #e2e8f0;
--text-muted: #64748b;
}
body {
background: var(--bg-deep);
color: var(--text-primary);
font-family: 'JetBrains Mono', monospace;
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 20% 0%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(168, 85, 247, 0.04) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
#root {
position: relative;
z-index: 1;
}
@keyframes floatUp {
0% { opacity: 1; transform: translateY(0) scale(1); }
60% { opacity: 0.8; }
100% { opacity: 0; transform: translateY(-120px) scale(1.3); }
}
@keyframes levelUpBanner {
0% { opacity: 0; transform: translateY(30px) scale(0.8);
======BEGIN STORAGE.md======
# Storage Design - EXP Clicker
## Data Requirements
- **Local Storage**: Total clicks, total EXP, milestones reached, session start time
## Storage Strategy
### Offline-Only Approach
- All game state persisted in localStorage
- No backend needed - this is a single-player idle clicker
- State restored on page load with "Welcome back!" toast
### Data Structure
```json
// localStorage key: "exp_clicker_state"
{
"totalClicks": 1542,
"totalExp": 28493.7,
"milestones": ["Lv. 5", "1K Clicks", "10K EXP"],
"sessionStartTime": "2026-04-03T10:30:00Z",
"lastSaveTime": "2026-04-03T14:20:00Z"
}
```
### API Endpoints Used
- None - fully offline localStorage app
### Authentication Requirements
- None
======END STORAGE.md======
======BEGIN index.html======
⚔️ EXP Clicker
======END index.html======
======BEGIN styles.css======
:root {
--bg-primary: #06060f;
--bg-secondary: #0d0d1f;
--bg-card: #111128;
--accent: #3b82f6;
--glow: rgba(59, 130, 246, 0.5);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-primary);
color: #e0e0f0;
font-family: 'JetBrains Mono', monospace;
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.03) 0%, transparent 50%),
radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, 0.02) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
#root { position: relative; z-index: 1; }
/* Level badge */
.level-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
}
.level-badge::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
padding: 3px;
background: conic-gradient(from 0deg, var(--accent), transparent, var(--accent));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
animation: spinRing 4s linear infinite;
}
@keyframes spinRing {
to { transform: rotate(360deg); }
}
.level-badge-inner {
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--bg-card);
border: 2px solid var(--accent);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px var(--glow), inset 0 0 20px rgba(0,0,0,0.5);
}
.level-pulse {
animation: levelPulse 2s ease-in-out infinite;
}
@keyframes levelPulse {
0%, 100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.03); filter: brightness(1.15); }
}
/* Click button */
.click-btn {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
cursor: pointer;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1.1rem;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
transition: transform 0.08s ease, box-shadow 0.15s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.click-btn::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: conic-gradient(from 0deg, var(--accent), transparent 40%, var(--accent) 60%, transparent);
opacity: 0.4;
animation: btnGlow 3s linear infinite;
z-index: -1;
}
@keyframes btnGlow {
to { transform: rotate(360deg); }
}
.click-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 50px var(--glow), 0 0 100px var(--glow);
}
.click-btn:active {
transform: scale(0.92);
box-shadow: 0 0 20px var(--glow);
}
/* EXP bar */
.exp-bar-outer {
position: relative;
width: 100%;
height: 28px;
background: rgba(0,0,0,0.5);
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
}
.exp-bar-inner {
height: 100%;
border-radius: 14px;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.exp-bar-inner::after {
content: '';
position: absolute;
top: 0; left: -100%; right: 0; bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
/* Floating numbers */
.float-number {
position: absolute;
pointer-events: none;
font-family: 'Press Start 2P', monospace;
font-size: 14px;
font-weight: 700;
animation: floatUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
text-shadow: 0 0 10px currentColor;
z-index: 100;
}
@keyframes floatUp {
0% { opacity: 1; transform: translateY(0) scale(1); }
30% { opacity: 1; transform: translateY(-30px) scale(1.2); }
100% { opacity: 0; transform: translateY(-120px) scale(0.6); }
}
/* Level up celebration */
.level-up-flash {
position: fixed;
inset: 0;
background: radial-gradient(circle, var(--glow), transparent);
animation: flashOut 0.8s ease-out forwards;
pointer-events: none;
z-index: 200;
}
@keyframes flashOut {
0% { opacity: 0.7; }
100% { opacity: 0; }
}
.level-up-banner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
z-index: 201;
pointer-events: none;
animation: bannerIn 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bannerIn {
0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
20% { transform: translate(-50%, -50%) scale(1.2) rotate(2deg); opacity: 1; }
40% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
80% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(0.5) rotate(5deg); opacity: 0; }
}
/* Particles */
.particle {
position: fixed;
width: 6px;
height: 6px;
border-radius: 50%;
pointer-events: none;
z-index: 202;
}
/* Screen shake */
.screen-shake {
animation: shake 0.4s ease-out;
}
@keyframes shake {
0%, 100% { transform: translate(0); }
15% { transform: translate(-4px, 2px); }
30% { transform: translate(4px, -2px); }
45% { transform: translate(-2px, 4px); }
60% { transform: translate(2px, -4px); }
75% { transform: translate(-2px, 1px); }
}
/* Toast */
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%) translateY(-100px);
z-index: 300;
animation: toastIn 3s ease forwards;
}
@keyframes toastIn {
0% { transform: translateX(-50%) translateY(-100px); opacity: 0; }
15% { transform: translateX(-50%) translateY(0); opacity: 1; }
80% { transform: translateX(-50%) translateY(0); opacity: 1; }
100% { transform: translateX(-50%) translateY(-100px); opacity: 0; }
}
/* Stats panel */
.stats-panel {
transition: max-height 0.4s ease, opacity 0.3s ease;
overflow: hidden;
}
/* Milestone log */
.milestone-item {
animation: milestoneSlide 0.4s ease forwards;
}
@keyframes milestoneSlide {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Color tiers */
.tier-gray { --accent: #6b7280; --glow: rgba(107, 114, 128, 0.5); }
.tier-green { --accent: #22c55e; --glow: rgba(34, 197, 94, 0.5); }
.tier-blue { --accent: #3b82f6; --glow: rgba(59, 130, 246, 0.5); }
.tier-purple { --accent: #a855f7; --glow: rgba(168, 85, 247, 0.5); }
.tier-orange { --accent: #f97316; --glow: rgba(249, 115, 22, 0.5); }
.tier-gold { --accent: #eab308; --glow: rgba(234, 179, 8, 0.5); }
.tier-rainbow {
--accent: #f472b6;
--glow: rgba(244, 114, 182, 0.5);
}
.tier-rainbow .click-btn::before {
background: conic-gradient(from 0deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444);
opacity: 0.6;
}
.tier-rainbow .level-badge::before {
background: conic-gradient(from 0deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444);
}
.tier-rainbow .exp-bar-inner {
background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #a855f7) !important;
}
@media (max-width: 640px) {
.click-btn {
width: 160px;
height: 160px;
font-size: 0.9rem;
}
.level-badge {
width: 90px;
height: 90px;
}
.level-badge-inner {
width: 74px;
height: 74px;
}
}