@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

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

:root {
    --neon-green: #00ff88;
    --neon-red: #ff1744;
    --neon-blue: #00b0ff;
    --neon-yellow: #ffd600;
    --neon-purple: #d500f9;
    --neon-orange: #ff6d00;
    --bg: #0f0f0f;
    --panel: #141414;
    --text: #e0e0e0;
}

html, body {
    width: 100%; height: 100%;
    background: var(--bg);
    overflow: hidden;
    cursor: none;
    font-family: 'Orbitron', monospace;
    color: var(--text);
    user-select: none;
}

/* ── CUSTOM CURSOR ── */
#cursor {
    position: fixed;
    width: 28px; height: 28px;
    border: 2px solid var(--neon-green);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width .1s, height .1s, border-color .1s;
    box-shadow: 0 0 8px var(--neon-green), inset 0 0 4px rgba(0,255,136,.15);
}
#cursor::after {
    content: '';
    position: absolute;
    width: 4px; height: 4px;
    background: var(--neon-green);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 6px var(--neon-green);
}
#cursor.danger { border-color: var(--neon-red); box-shadow: 0 0 10px var(--neon-red); }
#cursor.danger::after { background: var(--neon-red); box-shadow: 0 0 6px var(--neon-red); }

/* ── SCREENS ── */
.screen {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 100;
    transition: opacity .4s;
}
.screen.hidden { opacity: 0; pointer-events: none; }

/* ── START SCREEN ── */
#startScreen {
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0f0f0f 70%);
}
.game-title {
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 900;
    letter-spacing: .15em;
    /*background: linear-gradient(135deg, var(--neon-green), var(--neon-blue), var(--neon-purple));*/
    background: linear-gradient(135deg, orangered, darkred, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(255,0,0,.4));
    animation: titlePulse 2.5s ease-in-out infinite;
    text-align: center;
}
@keyframes titlePulse {
    0%,100% { filter: drop-shadow(0 0 30px rgba(255,0,0,.4)); }
    50% { filter: drop-shadow(0 0 60px rgba(255, 165, 0,.6)); }
}
.subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(.75rem, 2vw, 1rem);
    color: #555;
    letter-spacing: .3em;
    margin-top: .5rem;
    text-transform: uppercase;
}
.start-btn {
    margin-top: 3rem;
    padding: .9rem 3rem;
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .2em;
    border: 2px solid red;
    background: transparent;
    color: orangered;
    cursor: none;
    border-radius: 4px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: color .2s, box-shadow .2s;
}
.start-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: orangered;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    z-index: -1;
}
.start-btn:hover::before { transform: scaleX(1); }
.start-btn:hover { color: #fff; box-shadow: 0 0 30px red; }

.legend {
    margin-top: 3rem;
    display: flex; gap: 2rem;
    flex-wrap: wrap; justify-content: center;
}
.legend-item {
    display: flex; align-items: center; gap: .5rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: .75rem; color: #666;
}
.legend-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
}

/* ── HUD ── */
#hud {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 10px 20px;
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(to bottom, rgba(15,15,15,.95), transparent);
    pointer-events: none;
}
#hud.hidden { display: none; }

/* Time bar */
#timeBarWrap {
    flex: 1;
    height: 6px;
    background: #1e1e1e;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
}
#timeBar {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-green), #00ffcc);
    border-radius: 3px;
    transition: width .08s linear, background .3s;
    box-shadow: 0 0 8px var(--neon-green);
}
#timeBar.warn { background: linear-gradient(90deg, var(--neon-yellow), #ff9100); box-shadow: 0 0 8px var(--neon-yellow); }
#timeBar.danger { background: linear-gradient(90deg, var(--neon-red), #ff6d00); box-shadow: 0 0 8px var(--neon-red); }

#scoreDisplay {
    font-size: 1.4rem; font-weight: 900;
    color: #fff; min-width: 80px; text-align: right;
    text-shadow: 0 0 12px rgba(0,255,136,.5);
}
#bestDisplay {
    font-family: 'Share Tech Mono', monospace;
    font-size: .7rem; color: #444;
    min-width: 80px;
}
#comboDisplay {
    font-size: .85rem; font-weight: 700;
    color: var(--neon-yellow);
    min-width: 60px;
    text-shadow: 0 0 8px var(--neon-yellow);
    transition: opacity .2s;
}
#comboDisplay.hidden { opacity: 0; }

/* ── GAME ARENA ── */
#arena {
    position: fixed; inset: 0;
    z-index: 10;
    overflow: hidden;
}
#arena.hidden { display: none; }

/* Precision mode overlay */
#precisionOverlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
#precisionOverlay.active { opacity: 1; }
#precisionBanner {
    position: fixed;
    top: 60px; left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    font-size: 1rem; font-weight: 700;
    color: var(--neon-purple);
    text-shadow: 0 0 20px var(--neon-purple);
    letter-spacing: .3em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
#precisionBanner.active { opacity: 1; }

/* ── TARGETS ── */
.target {
    position: absolute;
    border-radius: 50%;
    cursor: none;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .15s cubic-bezier(.34,1.56,.64,1);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: .7rem; font-weight: 700;
    color: rgba(255,255,255,.85);
    z-index: 30;
    will-change: transform;
}
.target.spawned { transform: translate(-50%, -50%) scale(1); }
.target.clicked {
    animation: popOut .3s ease forwards;
}
.target.missed {
    animation: fadeOut .3s ease forwards;
}
@keyframes popOut {
    0% { transform: translate(-50%,-50%) scale(1.2); opacity:1; }
    100% { transform: translate(-50%,-50%) scale(0); opacity:0; }
}
@keyframes fadeOut {
    0% { transform: translate(-50%,-50%) scale(1); opacity:.7; }
    100% { transform: translate(-50%,-50%) scale(.3); opacity:0; }
}

/* Normal */
.target.normal {
    background: radial-gradient(circle at 35% 35%, #33ffaa, #00bb66);
    box-shadow: 0 0 16px var(--neon-green), 0 0 40px rgba(0,255,136,.3);
    border: 1px solid rgba(0,255,136,.4);
}
/* Bomb */
.target.bomb {
    background: radial-gradient(circle at 35% 35%, #ff4466, #cc0022);
    box-shadow: 0 0 16px var(--neon-red), 0 0 40px rgba(255,23,68,.3);
    border: 1px solid rgba(255,23,68,.4);
    animation: bombPulse 1s ease-in-out infinite;
}
.target.bomb.spawned { animation: bombPulse 1s ease-in-out infinite; transform: translate(-50%,-50%) scale(1); }
@keyframes bombPulse {
    0%,100% { box-shadow: 0 0 16px var(--neon-red), 0 0 40px rgba(255,23,68,.3); }
    50% { box-shadow: 0 0 24px var(--neon-red), 0 0 60px rgba(255,23,68,.5); }
}
/* Shrinking */
.target.shrinking {
    background: radial-gradient(circle at 35% 35%, #40c4ff, #0082b3);
    box-shadow: 0 0 16px var(--neon-blue), 0 0 40px rgba(0,176,255,.3);
    border: 1px solid rgba(0,176,255,.4);
}
/* Moving */
.target.moving {
    background: radial-gradient(circle at 35% 35%, #ffe066, #cc9900);
    box-shadow: 0 0 16px var(--neon-yellow), 0 0 40px rgba(255,214,0,.3);
    border: 1px solid rgba(255,214,0,.4);
}
/* Precision (tiny, high score) */
.target.precision {
    background: radial-gradient(circle at 35% 35%, #ea80fc, #a000c8);
    box-shadow: 0 0 12px var(--neon-purple), 0 0 30px rgba(213,0,249,.4);
    border: 1px solid rgba(213,0,249,.4);
    z-index: 35;
}
/* Fake */
.target.fake {
    background: radial-gradient(circle at 35% 35%, #33ffaa, #00bb66);
    box-shadow: 0 0 16px var(--neon-green), 0 0 40px rgba(0,255,136,.3);
    border: 1px solid rgba(0,255,136,.4);
}

/* Shrink animation driven by JS */
.target.shrinking-anim {
    transition: width .05s linear, height .05s linear, transform .15s cubic-bezier(.34,1.56,.64,1);
}

/* ── SCORE POP ── */
.score-pop {
    position: fixed;
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 90;
    animation: scorePop .8s ease forwards;
    text-shadow: 0 0 10px currentColor;
}
@keyframes scorePop {
    0% { transform: translate(-50%,-50%) scale(.8); opacity:1; }
    60% { transform: translate(-50%,-110%) scale(1.1); opacity:1; }
    100% { transform: translate(-50%,-160%) scale(.9); opacity:0; }
}

/* ── GAME OVER ── */
#gameOverScreen {
    background: radial-gradient(ellipse at center, #1a0000 0%, #0f0f0f 70%);
}
.go-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    color: var(--neon-red);
    text-shadow: 0 0 40px var(--neon-red);
    letter-spacing: .1em;
    animation: goFlicker 1.5s ease-in-out infinite;
}
@keyframes goFlicker {
    0%,100% { opacity:1; }
    92% { opacity:1; }
    94% { opacity:.4; }
    96% { opacity:1; }
    98% { opacity:.4; }
}
.go-score {
    margin-top: 1.5rem;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #fff;
}
.go-best {
    font-family: 'Share Tech Mono', monospace;
    font-size: .9rem;
    color: var(--neon-yellow);
    margin-top: .5rem;
    letter-spacing: .1em;
}
.go-restart {
    margin-top: 2.5rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: .9rem;
    color: #444;
    letter-spacing: .2em;
    animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── SHAKE ── */
@keyframes shake {
    0%,100% { transform: translate(0,0) rotate(0); }
    10% { transform: translate(-6px,3px) rotate(-.5deg); }
    20% { transform: translate(6px,-3px) rotate(.5deg); }
    30% { transform: translate(-5px,5px) rotate(-.3deg); }
    40% { transform: translate(5px,-2px) rotate(.3deg); }
    50% { transform: translate(-4px,4px) rotate(-.2deg); }
    60% { transform: translate(4px,-4px) rotate(.2deg); }
    70% { transform: translate(-3px,3px) rotate(0); }
    80% { transform: translate(3px,-3px); }
    90% { transform: translate(-2px,2px); }
}
body.shake { animation: shake .4s ease; }

/* ── GRID BG ── */
#gridBg {
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(0,255,136,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
}

/* ── RING RIPPLE on click ── */
.ripple {
    position: fixed;
    border-radius: 50%;
    border: 2px solid;
    pointer-events: none;
    z-index: 80;
    animation: rippleOut .4s ease forwards;
    transform: translate(-50%,-50%);
}
@keyframes rippleOut {
    0% { width: 10px; height: 10px; opacity: .8; }
    100% { width: 60px; height: 60px; opacity: 0; }
}