Spaces:

MatteoScript
/

InnovationLab

Running

File size: 27,433 Bytes

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>INNOVATION RUN - Matteo Bergamelli</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
    <style>
        :root { --neon-green: #00ff41; --legacy-gold: #ffb700; --error-red: #ff0055; --bg-dark: #0a0a0a; }
        body { background: #0a0a0a; color: #e0e0e0; font-family: 'JetBrains Mono', monospace; overflow: hidden; user-select: none; }
        canvas { display: block; width: 100%; height: 100%; }
        
        .scanlines { background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)); background-size: 100% 4px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; }
        .ui-panel { backdrop-filter: blur(5px); background: rgba(20, 20, 20, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.2s; }
        
        /* BTN PIÙ GRANDE */
        .btn { background: var(--neon-green); color: #000; padding: 20px 50px; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); transition: 0.2s; border: none; }
        .btn:hover { transform: scale(1.05); background: #fff; box-shadow: 0 0 40px rgba(0, 255, 65, 0.6); }
        
        .flow-container { width: 200px; height: 12px; background: #333; border-radius: 6px; overflow: hidden; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 20; border: 2px solid #555; }
        .flow-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #ffb700, #00ff41); transition: width 0.1s linear; }
        .flow-text { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: #fff; text-transform: uppercase; font-weight: bold; text-shadow: 0 2px 4px #000; width: 100%; text-align: center; }
        
        .floating-message { 
            position: absolute; 
            font-weight: 800; 
            font-size: 1.2rem; 
            text-align: left; 
            pointer-events: none; 
            text-shadow: 2px 2px 0px #000; 
            z-index: 50; 
            white-space: nowrap; 
            animation: floatRightUp 3.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; 
        }

        @keyframes floatRightUp { 
            0% { opacity: 0; transform: translate(0, 20px) scale(0.5); } 
            10% { opacity: 1; transform: translate(20px, -20px) scale(1.2); } 
            70% { opacity: 1; transform: translate(40px, -80px) scale(1); } 
            100% { opacity: 0; transform: translate(60px, -120px) scale(0.9); } 
        }

        .motivational-banner { position: absolute; top: 20%; width: 100%; text-align: center; font-size: 2.5rem; font-weight: 800; color: #fff; text-shadow: 0 0 20px var(--neon-green); pointer-events: none; z-index: 40; opacity: 0; transition: all 0.5s; letter-spacing: 2px; }
        
        .combo-display { position: absolute; top: 45%; right: 8%; font-size: 3rem; font-weight: 900; color: #fff; text-shadow: 4px 4px 0px #ff0055; opacity: 0; transition: all 0.3s; z-index: 45; transform: rotate(-10deg); text-align: right; pointer-events: none; font-style: italic; }
        
        .hidden { display: none !important; }
    </style>
</head>
<body>

<div id="game-container" style="position: relative; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%); overflow: hidden;">
    <div class="scanlines"></div>
    <canvas id="gameCanvas"></canvas>
    
    <div id="motivator" class="motivational-banner"></div>
    <div id="combo" class="combo-display"></div>

    <div style="position: absolute; top: 0; left: 0; width: 100%; padding: 1rem; display: flex; justify-content: space-between; z-index: 20; pointer-events: none;">
        <div class="ui-panel" style="padding: 0.5rem 1rem; border-radius: 0.25rem;">
            <div style="font-size: 10px; color: #999;" id="lbl-phase">FASE PROGETTO</div>
            <div id="phase-display" style="color: #00ff41; font-weight: bold; font-size: 1.125rem;"></div>
        </div>
        <div class="ui-panel" style="padding: 0.5rem 1rem; border-radius: 0.25rem; text-align: right;">
            <div style="font-size: 10px; color: #999;" id="lbl-metrics">KPI</div>
            <div style="color: white; font-size: 0.875rem;">
                <span id="lbl-score">PUNTI</span>: <span id="score-display" style="color: #00ff41; font-weight: bold;">0</span> | 
                <span id="lbl-legacy">LEGACY</span>: <span id="legacy-display" style="color: #ffb700; font-weight: bold;">0</span>%
            </div>
        </div>
    </div>

    <div class="flow-text" id="flow-label"></div>
    <div class="flow-container"><div id="flow-bar" class="flow-bar"></div></div>

    <div id="start-screen" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 30; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); padding: 1rem;">
        
        <div style="background: #111; border: 1px solid #444; padding: 2rem; border-radius: 0.5rem; max-width: 40rem; width: 100%; margin-bottom: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
            <div style="display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.1rem;">
                <div style="display: flex; align-items: center;">
                    <span id="icon-legacy" style="font-size: 2.8rem; margin-right: 1rem;"></span>
                    <div><span id="title-legacy" style="color: #ffb700; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-legacy" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div>
                </div>
                <div style="display: flex; align-items: center;">
                    <span id="icon-ai" style="font-size: 2.8rem; margin-right: 1rem;"></span>
                    <div><span id="title-ai" style="color: #00ff41; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-ai" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div>
                </div>
                <div style="display: flex; align-items: center;">
                    <span id="icon-obs" style="font-size: 2.8rem; margin-right: 1rem;"></span>
                    <div><span id="title-obs" style="color: #ff0055; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-obs" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div>
                </div>
                <div style="display: flex; align-items: center;">
                    <span style="font-size: 2.8rem; margin-right: 1rem;">⚡</span>
                    <div><span id="title-bar" style="color: white; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-bar" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div>
                </div>
            </div>
        </div>

        <button id="btn-start" class="btn" onclick="initGame()"></button>
        <p id="controls-hint" style="margin-top: 1.5rem; font-size: 1rem; color: #ccc; animation: pulse 2s infinite; font-weight: bold;"></p>
    </div>

    <div id="game-over" class="hidden" style="position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; z-index: 40; background: rgba(0,0,0,0.95);">
        
        <h2 id="go-title" style="font-size: 2.25rem; font-weight: bold; color: white; margin-bottom: 1.5rem; text-align: center;"></h2>
        
        <div style="text-align: center; font-size: 1.45rem; color: #ccc; margin-bottom: 2.5rem; background: #1a1a1a; padding: 2.5rem; border: 1px solid #444; border-radius: 0.5rem; max-width: 35rem; width: 100%;">
            <p id="go-reason" style="color: #ff0055; font-weight: bold; margin-bottom: 1.5rem; font-size: 1.7rem;"></p>
            
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.8rem;"><span>MVP Score:</span><span id="final-score" style="color: #00ff41; font-weight: bold;">0</span></div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 1.5rem;"><span>Modernizzazione:</span><span id="final-legacy" style="color: #ffb700; font-weight: bold;">0%</span></div>
            <hr style="border-color: #444; margin: 1.5rem 0;">
            
            <p id="death-quote" style="font-style: italic; color: #999; font-size: 1.2rem;"></p>
        </div>
        <button id="btn-restart" class="btn" onclick="initGame()"></button>
    </div>
</div>

<script>
/**
 * ==========================================================================================
 * ⚙️ CONFIGURAZIONE DI GIOCO - MATTEO INNOVATION LAB EDITION 
 * ==========================================================================================
 */
const GAME_CONFIG = {
    SPEED: {
        INITIAL: 5.8,        
        MAX: 14.0,           
        ACCELERATION: 0.0007,
        BOOST: 3.5           
    },
    GRAVITY: 0.45,
    JUMP_FORCE: -10.8,
    
    TEXTS: {
        TITLE: "Innovation Run",
        SUBTITLE: "// Missione: Crea un PoC visionario OMNICANALE", 
        LBL_PHASE: "STATUS MENTALE",
        LBL_METRICS: "LIVELLO HYPE",
        LBL_SCORE: "STIMA DEL CAPO",
        LBL_LEGACY: "BUG RISOLTI",
        START_BTN: "Corri verso l'innovazione",
        RESTART_BTN: "CTRL+Z E RIPROVA",
        CONTROLS: "Premi SPAZIO per saltare i problemi | GIÙ per schivare le riunioni",
        BAR_EMPTY: "CERCA ISPIRAZIONE...",
        BAR_FULL: "🔥 MODALITÀ GENIO ATTIVA! 🔥" 
    },

    // ORA CON LISTE DI MESSAGGI RANDOM!
    ENTITIES: {
        LEGACY: {
            CHAR: '☕', 
            COLOR: '#FFC107', // Giallo Oro
            TITLE: "CAFFÈ DOPPIO", 
            DESC: "Senza questo non si compila. [+10 Punti]",
            MSG: [
                "CAFFÈ DOPPIO!", 
                "ENERGIA PURA!", 
                "COMPILAZIONE OK!", 
                "BUGIORNO!", 
                "FOCUS ON!"
            ]
        },
        AI: {
            CHAR: '🤖', 
            COLOR: '#00D4FF', // Azzurro Ciano
            TITLE: "VERTEX AI", 
            DESC: "Non ti sostituisce, ti AMPLIFICA. [GOD MODE]",
            MSG: [
                "GEMINI MI AMPLIFICA!", 
                "COPILOT ATTIVO!", 
                "INTELLIGENZA++", 
                "SALTO NEL FUTURO!", 
                "HYPE BOOST!"
            ]
        },
        OBSTACLE: {
            CHAR: '🧱', 
            COLOR: '#FF3D00', // Rosso Arancio
            TITLE: "OLD STYLE", 
            DESC: "'Si è sempre fatto così', 'Costa troppo'. SALTALA!",
            MSG: [
                "NON TI SENTO!", 
                "BYE BYE SILOS!", 
                "SALTO IL MEETING!", 
                "INNOVAZIONE VERA!", 
                "BUROCRAZIA KO!"
            ]
        },
        BAR: {
            TITLE: "BARRA DELL'INNOVAZIONE",
            DESC: "Riempi la barra per far approvare il budget."
        }
    },

    MOTIVATIONAL: [
        "MA SUL MIO PC FUNZIONA!",
        "È COLPA DELLA CACHE!",
        "CHI HA TOCCATO IL SERVER?!",
        "PUSHATO IN PRODUZIONE!",
        "NON È UN BUG, È UNA FEATURE!",
        "HO COMMENTATO IL CODICE (MENTI!)",
        "STACCA E RIATTACCA!",
        "PIÙ PYTHON, MENO PPTX!",
        "OMNICHANNEL A VITA!",
        "DOSSOBUONO CAPUT MUNDI!" 
    ],

    COMBO_PHRASES: [
        "DAJE DEV!",
        "CODICE POETICO!",
        "MIRACOLO TECNICO!",
        "SENIOR DEV AURA!",
        "ANGULAR GOAL!",
        "ZERO CONFLITTI GIT!",
        "MVP LEGGENDARIO!",
        "AUMENTO SUBITO!",
        "FERMATEMI!",
        "QUESTO È IL FUTURO!", 
        "BRIVIDO AI!", 
        "DOSSOBUONO POWER!"
    ],

    GAME_OVER_TITLES: [
        "SCHERMATA BLU",
        "TI HANNO MESSO IN UN'ALTRA CALL",
        "HAI CANCELLATO IL DATABASE",
        "IL WI-FI TI HA TRADITO"
    ],
    GAME_OVER_REASONS: [
        "Sei finito in un tunnel di burocrazia.",
        "Hai accettato una riunione venerdì alle 17:30.",
        "Il Legacy Code ha avuto la meglio.",
        "Ti sei dimenticato la WHERE nel DELETE * FROM..."
    ],
    DEATH_QUOTES: [
        "\"Tranquillo, il backup è... aspetta, c'era un backup vero?\"",
        "\"Vabbè, diciamo che era solo un test di carico.\"",
        "\"Se nessuno se ne è accorto, non è successo niente.\"",
        "\"Prova a dare la colpa allo stagista.\"",
        "\"Riavvia il router e prega.\""
    ],

    PHASES: [
        { score: 0, name: "ULTIMO ARRIVATO" },
        { score: 150, name: "QUELLO BRAVO COL PC" },
        { score: 400, name: "HACKER DI PROVINCIA" },
        { score: 700, name: "VISIONARIO TECH" },
        { score: 1200, name: "RE DELL'INNOVATION LAB 👑" }
    ]
};

/* ================= ENGINE START ================= */
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const GRAVITY = GAME_CONFIG.GRAVITY;
const JUMP = GAME_CONFIG.JUMP_FORCE;
const DOUBLE_JUMP = GAME_CONFIG.JUMP_FORCE * 0.9;
const GROUND_H = 80;

let state = { playing: false, speed: GAME_CONFIG.SPEED.INITIAL, score: 0, legacy: 0, flow: 50, frame: 0, phaseIdx: 0, shake: 0, combo: 0 };
let player = { x: 80, y: 0, w: 35, h: 35, dy: 0, grounded: false, canDouble: false, amplified: 0, stretch: 1 };
let entities = [], particles = [], bgStars = [];

const dom = {
    start: document.getElementById('start-screen'),
    over: document.getElementById('game-over'),
    score: document.getElementById('score-display'),
    legacy: document.getElementById('legacy-display'),
    phase: document.getElementById('phase-display'),
    bar: document.getElementById('flow-bar'),
    barLabel: document.getElementById('flow-label'),
    finalScore: document.getElementById('final-score'),
    finalLegacy: document.getElementById('final-legacy'),
    deathQuote: document.getElementById('death-quote'),
    motivator: document.getElementById('motivator'),
    combo: document.getElementById('combo'),
    goTitle: document.getElementById('go-title'),
    goReason: document.getElementById('go-reason')
};

function setupUI() {
    // TITOLI RIMOSSI ANCHE DAL JS
    // document.getElementById('title-main').innerText = GAME_CONFIG.TEXTS.TITLE;
    // document.getElementById('subtitle-main').innerText = GAME_CONFIG.TEXTS.SUBTITLE;
    document.getElementById('lbl-phase').innerText = GAME_CONFIG.TEXTS.LBL_PHASE;
    document.getElementById('lbl-metrics').innerText = GAME_CONFIG.TEXTS.LBL_METRICS;
    document.getElementById('lbl-score').innerText = GAME_CONFIG.TEXTS.LBL_SCORE;
    document.getElementById('lbl-legacy').innerText = GAME_CONFIG.TEXTS.LBL_LEGACY;
    document.getElementById('btn-start').innerText = GAME_CONFIG.TEXTS.START_BTN;
    document.getElementById('btn-restart').innerText = GAME_CONFIG.TEXTS.RESTART_BTN;
    document.getElementById('controls-hint').innerText = GAME_CONFIG.TEXTS.CONTROLS;

    // Use first element of array for description preview if needed, or just static text
    document.getElementById('icon-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.CHAR;
    document.getElementById('title-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.TITLE;
    document.getElementById('desc-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.DESC;

    document.getElementById('icon-ai').innerText = GAME_CONFIG.ENTITIES.AI.CHAR;
    document.getElementById('title-ai').innerText = GAME_CONFIG.ENTITIES.AI.TITLE;
    document.getElementById('desc-ai').innerText = GAME_CONFIG.ENTITIES.AI.DESC;

    document.getElementById('icon-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.CHAR;
    document.getElementById('title-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.TITLE;
    document.getElementById('desc-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.DESC;

    document.getElementById('title-bar').innerText = GAME_CONFIG.ENTITIES.BAR.TITLE;
    document.getElementById('desc-bar').innerText = GAME_CONFIG.ENTITIES.BAR.DESC;
}

function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; state.groundY = canvas.height - GROUND_H; }
window.addEventListener('resize', resize);
setupUI();
resize();

for(let i=0; i<80; i++) bgStars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 2 });

function initGame() {
    Object.assign(state, { playing: true, speed: GAME_CONFIG.SPEED.INITIAL, score: 0, legacy: 0, flow: 50, frame: 0, phaseIdx: 0, shake: 0, combo: 0 });
    Object.assign(player, { y: state.groundY - player.h, dy: 0, grounded: true, amplified: 0, stretch: 1 });
    entities = []; particles = [];
    
    dom.start.style.display = 'none';
    dom.over.classList.add('hidden');
    dom.over.style.display = 'none'; 
    dom.motivator.style.opacity = 0;
    dom.combo.style.opacity = 0;
    
    dom.phase.innerText = GAME_CONFIG.PHASES[0].name;

    updateHUD(); 
    requestAnimationFrame(loop);
}

function jump() {
    if (!state.playing) return;
    if (player.grounded) { 
        player.dy = JUMP; 
        player.grounded = false; 
        player.stretch = 1.3; 
        player.canDouble = state.flow >= 25; 
        explosion(player.x + player.w/2, player.y + player.h, 5, '#fff'); 
    }
    else if (player.canDouble) { 
        player.dy = DOUBLE_JUMP; 
        player.canDouble = false; 
        player.stretch = 1.2; 
        state.flow = Math.max(0, state.flow - 25); 
        explosion(player.x + player.w/2, player.y + player.h, 15, '#00ff41'); 
        floatText("ELEVAZIONE", player.x + 40, player.y - 40, '#00ff41'); // Offset right
    }
    updateHUD();
}

window.addEventListener('keydown', e => { 
    if (e.code === 'Space' || e.code === 'ArrowUp') { e.preventDefault(); jump(); } 
    if (e.code === 'ArrowDown' && !player.grounded) { player.dy += 6; player.stretch = 0.7; } 
});
window.addEventListener('touchstart', e => { e.preventDefault(); jump(); }, {passive: false});
window.addEventListener('mousedown', jump);

function loop() {
    if (!state.playing) return;
    
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    if (state.shake > 0) { 
        ctx.translate((Math.random()-0.5)*state.shake, (Math.random()-0.5)*state.shake); 
        state.shake *= 0.9; 
        if(state.shake < 0.5) state.shake = 0; 
    }
    
    ctx.fillStyle = '#0a0a0a'; ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    if (state.speed < GAME_CONFIG.SPEED.MAX) state.speed += GAME_CONFIG.SPEED.ACCELERATION;
    let currentSpd = state.speed + (player.amplified > 0 ? GAME_CONFIG.SPEED.BOOST : 0);

    ctx.fillStyle = '#fff';
    bgStars.forEach(s => { 
        s.x -= currentSpd * 0.15; 
        if(s.x < 0) s.x = canvas.width; 
        ctx.globalAlpha = 0.4; 
        ctx.fillRect(s.x, s.y, s.size, s.size); 
    });
    ctx.globalAlpha = 1;

    ctx.strokeStyle = '#222'; ctx.lineWidth = 1; ctx.beginPath();
    let offset = (state.frame * currentSpd * 0.4) % 100;
    for (let i = 0; i < canvas.width + 100; i += 100) { 
        ctx.moveTo(i - offset, state.groundY); 
        ctx.lineTo(i - offset - 150, canvas.height); 
    }
    ctx.stroke();

    updatePlayer();
    manageEntities(currentSpd);
    drawParticles();

    ctx.shadowBlur = 10; ctx.shadowColor = player.amplified > 0 ? '#00ff41' : '#444';
    ctx.fillStyle = '#111'; ctx.fillRect(0, state.groundY, canvas.width, canvas.height - state.groundY);
    ctx.strokeStyle = '#00ff41'; ctx.lineWidth = 4; ctx.beginPath();
    ctx.moveTo(0, state.groundY); ctx.lineTo(canvas.width, state.groundY); ctx.stroke(); ctx.shadowBlur = 0;

    if (state.frame % 600 === 0 && state.frame > 100) showMotivation();
    
    if (player.amplified > 0) { 
        player.amplified--; 
        if (player.amplified === 0) floatText("GOD MODE OFF", player.x + 40, player.y - 50, '#aaa'); 
    }

    state.frame++; 
    requestAnimationFrame(loop);
}

function updatePlayer() {
    player.dy += GRAVITY; player.y += player.dy;
    
    if (player.y + player.h > state.groundY) {
        if (!player.grounded) { 
            player.stretch = 0.7; 
            explosion(player.x + player.w/2, state.groundY, 8, '#aaa'); 
        }
        player.y = state.groundY - player.h; player.dy = 0; player.grounded = true;
    }
    player.stretch += (1 - player.stretch) * 0.1;

    let drawH = player.h * player.stretch, drawW = player.w * (1/player.stretch);
    let drawX = player.x + (player.w - drawW)/2, drawY = player.y + (player.h - drawH);
    
    ctx.fillStyle = player.amplified > 0 ? ((state.frame % 4 < 2) ? '#fff' : '#00ff41') : '#00ff41';
    
    if (state.frame % 3 === 0) particles.push({ x: drawX, y: drawY, w: drawW, h: drawH, life: 0.6, type: 'trail', color: ctx.fillStyle });
    
    ctx.shadowColor = ctx.fillStyle; ctx.shadowBlur = 20; 
    ctx.fillRect(drawX, drawY, drawW, drawH);
    ctx.fillStyle = '#000'; ctx.fillRect(drawX + drawW*0.6, drawY + drawH*0.2, drawW*0.3, 5); ctx.shadowBlur = 0;
}

function manageEntities(spd) {
    let minGap = 500 - (spd * 8); 
    let last = entities[entities.length-1];
    
    if (!last || (canvas.width - last.x > minGap)) {
        if (Math.random() > 0.97) return;
        
        let typeKey = 'OBSTACLE';
        let rand = Math.random();
        if (rand > 0.6) typeKey = 'LEGACY';
        if (rand > 0.92) typeKey = 'AI';
        
        let conf = GAME_CONFIG.ENTITIES[typeKey];
        let h = typeKey === 'OBSTACLE' ? 50 : 40, y = state.groundY - h;
        if (typeKey === 'AI') y -= Math.random() * 80; 
        
        entities.push({ type: typeKey, conf: conf, x: canvas.width, y: y, w: 40, h: h, active: true });
    }

    for (let i = entities.length - 1; i >= 0; i--) {
        let e = entities[i]; 
        e.x -= spd;
        if (e.type !== 'OBSTACLE') e.y += Math.sin(state.frame * 0.08) * 0.7; 
        
        if (e.active) {
            ctx.strokeStyle = e.conf.COLOR; ctx.lineWidth = 3;
            if (e.type === 'LEGACY') ctx.setLineDash([5,5]); else ctx.setLineDash([]);
            ctx.strokeRect(e.x, e.y, e.w, e.h);
            ctx.font = "28px Arial"; ctx.textAlign = "center";
            ctx.fillText(e.conf.CHAR, e.x + e.w/2, e.y + e.h/2 + 10);
            
            if (rectHit(player.x, player.y, player.w, player.h, e.x, e.y, e.w, e.h)) handleHit(e);
        }
        if (e.x + e.w < 0) entities.splice(i, 1);
    }
}

function rectHit(x1, y1, w1, h1, x2, y2, w2, h2) { return x2 < x1 + w1 && x2 + w2 > x1 && y2 < y1 + h1 && y2 + h2 > y1; }

function handleHit(e) {
    e.active = false;
    
    // Pick RANDOM Message
    let msgList = e.conf.MSG;
    let randomMsg = Array.isArray(msgList) ? msgList[Math.floor(Math.random() * msgList.length)] : msgList;

    if (e.type === 'OBSTACLE') {
        if (player.amplified > 0) {
            state.shake = 20; 
            explosion(e.x + e.w/2, e.y + e.h/2, 25, '#ff0055');
            floatText(randomMsg, e.x + 80, e.y - 20, '#fff'); // White text for destruction
            state.score += 15; state.combo++;
            showCombo();
        } else {
            gameOver();
        }
    } else {
        explosion(e.x + e.w/2, e.y + e.h/2, 12, e.conf.COLOR);
        // Colore del testo uguale all'entità raccolta
        floatText(randomMsg, e.x + 80, e.y - 40, e.conf.COLOR);
        
        if (e.type === 'LEGACY') { 
            state.legacy += 10; state.score += 10; 
            state.flow = Math.min(100, state.flow + 25); 
            state.combo++; 
        }
        if (e.type === 'AI') { 
            player.amplified = 600; 
            state.score += 50; state.shake = 8; 
            showMotivation(); 
            state.combo += 3; 
        }
        showCombo(); updateHUD();
    }
}

function explosion(x, y, count, color) {
    for(let i=0; i<count; i++) particles.push({ x, y, vx: (Math.random() - 0.5) * 10, vy: (Math.random() - 0.5) * 10, life: 1.0, color, type: 'spark' });
}

function drawParticles() {
    for(let i=particles.length-1; i>=0; i--) {
        let p = particles[i];
        if (p.type === 'trail') { 
            ctx.fillStyle = p.color; ctx.globalAlpha = p.life * 0.5; 
            ctx.fillRect(p.x, p.y, p.w, p.h); 
            ctx.globalAlpha = 1; p.life -= 0.04; 
        } else { 
            p.x += p.vx; p.y += p.vy; p.vy += 0.3; p.life -= 0.015; 
            ctx.fillStyle = p.color; ctx.globalAlpha = p.life; 
            ctx.fillRect(p.x, p.y, 5, 5); ctx.globalAlpha = 1; 
        }
        if (p.life <= 0) particles.splice(i, 1);
    }
}

// Function modified to shift text right and use new CSS class
function floatText(txt, x, y, col) {
    let el = document.createElement('div'); 
    el.className = 'floating-message';
    el.innerText = txt; 
    // Spostamento a destra di base (+100px) per evitare il bordo sinistro
    el.style.left = (x + 60) + 'px'; 
    el.style.top = y + 'px'; 
    el.style.color = col;
    document.body.appendChild(el); 
    // Timeout aumentato per matchare l'animazione CSS
    setTimeout(() => el.remove(), 4000);
}

function showMotivation() {
    let txt = GAME_CONFIG.MOTIVATIONAL[Math.floor(Math.random() * GAME_CONFIG.MOTIVATIONAL.length)];
    dom.motivator.innerText = txt;
    dom.motivator.style.opacity = 1; dom.motivator.style.transform = "scale(1.15)";
    setTimeout(() => { dom.motivator.style.opacity = 0; dom.motivator.style.transform = "scale(1)"; }, 3500);
}

function showCombo() {
    if (state.combo > 1) {
        let phrase = GAME_CONFIG.COMBO_PHRASES[Math.floor(Math.random() * GAME_CONFIG.COMBO_PHRASES.length)];
        dom.combo.innerText = phrase;
        dom.combo.style.opacity = 1; dom.combo.style.transform = 'scale(1.2) rotate(-10deg)';
        setTimeout(() => { dom.combo.style.opacity = 0; dom.combo.style.transform = 'scale(1) rotate(-10deg)'; }, 2000);
    }
}

function updateHUD() {
    dom.score.innerText = state.score; 
    dom.legacy.innerText = state.legacy; 
    dom.bar.style.width = state.flow + '%';
    
    if (state.flow >= 25) { 
        dom.bar.style.boxShadow = '0 0 15px #00ff41'; 
        dom.barLabel.innerText = GAME_CONFIG.TEXTS.BAR_FULL; 
        dom.barLabel.style.color = "#00ff41"; 
    } else { 
        dom.bar.style.boxShadow = 'none'; 
        dom.barLabel.innerText = GAME_CONFIG.TEXTS.BAR_EMPTY; 
        dom.barLabel.style.color = "#aaa"; 
    }
    
    let currentPhaseObj = GAME_CONFIG.PHASES.slice().reverse().find(p => state.score >= p.score);
    if (currentPhaseObj && currentPhaseObj.name !== dom.phase.innerText) {
        dom.phase.innerText = currentPhaseObj.name;
        floatText("FASE: " + currentPhaseObj.name, canvas.width/2, canvas.height/2, '#fff');
    }
}

function gameOver() {
    state.playing = false; 
    dom.finalScore.innerText = state.score; 
    dom.finalLegacy.innerText = state.legacy + "%";
    
    dom.goTitle.innerText = GAME_CONFIG.GAME_OVER_TITLES[Math.floor(Math.random() * GAME_CONFIG.GAME_OVER_TITLES.length)];
    dom.goReason.innerText = GAME_CONFIG.GAME_OVER_REASONS[Math.floor(Math.random() * GAME_CONFIG.GAME_OVER_REASONS.length)];
    dom.deathQuote.innerText = GAME_CONFIG.DEATH_QUOTES[Math.floor(Math.random() * GAME_CONFIG.DEATH_QUOTES.length)];
    
    dom.over.classList.remove('hidden');
    dom.over.style.display = 'flex';
}
</script>
</body>
</html>