:root {
    --bg-gradient: linear-gradient(135deg, #050510 0%, #1a1a2e 100%);
    --neon-cyan: #00f3ff;
    --neon-pink: #ff00de;
    --neon-green: #00ff66;
    --neon-red: #ff3333;
    --b-motion: #4c97ff;
    --b-control: #ffab19;
    --b-end: #cf8b17;
    --font-stack: 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
    margin: 0; padding: 0; background: var(--bg-gradient); font-family: var(--font-stack);
    height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: white; user-select: none;
}
.hidden { display: none !important; }
.block-input {
    width: 45px; padding: 4px; margin: 0 5px; border: 2px solid #fff; border-radius: 6px;
    text-align: center; font-weight: bold; font-size: 1rem; color: #000; background: #fff;
}
/* ACCUEIL */
#home-screen {
    position: absolute; top:0; left:0; width:100%; height:100%; display: flex; align-items: center; justify-content: center;
    z-index: 100; gap: 60px; background: rgba(5, 5, 16, 0.98);
}
.home-content { 
    max-width: 650px; padding: 40px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
    backdrop-filter: blur(10px); box-shadow: 0 0 50px rgba(0,0,0,0.5);
}
.home-content h1 { 
    font-size: 3.5rem; margin: 0 0 20px 0; line-height: 1;
    background: linear-gradient(to right, var(--neon-cyan), var(--neon-pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(0, 243, 255, 0.4);
}
.story-text { font-size: 1.15rem; line-height: 1.6; color: #ddd; margin-bottom: 25px; }
.story-text strong { color: white; text-decoration: underline decoration-color(var(--neon-cyan)); }
.start-btn {
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); padding: 18px 60px; color: #000;
    font-size: 1.3rem; font-weight: 800; border-radius: 50px; border: none; box-shadow: 0 0 20px rgba(0, 243, 255, 0.4); cursor: pointer;
    transition: transform 0.2s; text-decoration: none; display: inline-block;
}
.start-btn:hover { transform: scale(1.05); box-shadow: 0 0 40px var(--neon-pink); }
.poster-frame {
    width: 320px; height: 520px; border: 3px solid var(--neon-cyan); border-radius: 20px; overflow: hidden; box-shadow: 0 0 30px rgba(0, 243, 255, 0.3);
}
.poster-frame img { width: 100%; height: 100%; object-fit: cover; }
/* UI JEU */
#game-ui { flex: 1; display: flex; flex-direction: column; height: 100%; }
header {
    height: 70px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between;
    background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.1);
}
.level-title { font-size: 1.4rem; font-weight: bold; color: var(--neon-cyan); text-transform: uppercase; }
.lives { font-size: 1.8rem; letter-spacing: 5px; }
#main-container { flex: 1; display: flex; overflow: hidden; }
/* NAV BAS */
#nav-strip {
    height: 80px; background: rgba(0,0,0,0.8); border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: center; align-items: center; gap: 10px; overflow-x: auto; padding: 0 20px;
}
.nav-dot {
    min-width: 50px; height: 50px; border-radius: 12px; background: #111; border: 1px solid #333; color: #555;
    display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: not-allowed; transition: all 0.3s; position: relative; font-size: 1.2rem;
}
.nav-dot.unlocked { background: rgba(0, 243, 255, 0.1); border-color: var(--neon-cyan); color: var(--neon-cyan); }
.nav-dot.active { background: var(--neon-cyan); color: #000; box-shadow: 0 0 15px var(--neon-cyan); transform: scale(1.1); }
.nav-dot.locked::after { content: '🔒'; font-size: 1rem; position:absolute; }
.nav-dot.locked span { opacity: 0; }
/* CODE */
#code-panel { width: 45%; display: flex; flex-direction: column; background: #151520; border-right: 2px solid #333; }
#mission-box { padding: 20px; background: rgba(0, 243, 255, 0.05); border-bottom: 1px solid var(--neon-cyan); color: #ddd; }
#toolbox {
    padding: 15px; background: #1a1a25; border-bottom: 1px solid #333; display: flex; flex-wrap: wrap; gap: 10px; min-height: 100px; align-items: center; transition: all 0.2s ease;
}
#toolbox.trash-active { background-color: rgba(255, 0, 0, 0.2) !important; box-shadow: inset 0 0 30px #ff0000 !important; border-bottom: 2px dashed #ff0000 !important; }
#workspace {
    flex: 1; 
    padding: 20px; 
    /* AJOUT IMPORTANT : On laisse beaucoup d'espace en bas pour scroller */
    padding-bottom: 300px !important; 
    overflow-y: auto; 
    position: relative;
    background-image: radial-gradient(#333 1px, transparent 1px); 
    background-size: 20px 20px;
    display: flex; 
    flex-direction: column; 
    gap: 2px;
}
.block {
    padding: 12px 16px; margin-bottom: 5px; border-radius: 6px; color: white; font-weight: 700; font-size: 1rem; cursor: grab;
    display: flex; align-items: center; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); position: relative; transition: margin-left 0.2s; min-width: 140px; width: fit-content;
}
.block.dragging { opacity: 0.5; border: 2px dashed #fff; }
.bg-motion { background: var(--b-motion); border: 1px solid rgba(255,255,255,0.2); }
.bg-control { background: var(--b-control); border-radius: 6px 20px 6px 6px; }
.bg-end { background: var(--b-end); opacity: 0.9; border-radius: 6px 6px 20px 6px; font-style: italic; }
/* VISUEL */
#visual-panel { width: 55%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; }
#game-grid {
    display: grid; gap: 2px; padding: 10px; background: #111; border: 3px solid var(--neon-cyan); border-radius: 12px; box-shadow: 0 0 50px rgba(0, 243, 255, 0.15); position: relative;
}
.cell { width: 60px; height: 60px; background: #1a1a2e; border-radius: 2px; position: relative; }
.wall { background: #2a2a40; background-image: repeating-linear-gradient(45deg, #333 0, #333 10px, #2a2a40 10px, #2a2a40 20px); border: 1px solid #444; }
.start-zone { background: rgba(0, 243, 255, 0.2); }
.goal-zone { background: rgba(0, 255, 102, 0.2); box-shadow: inset 0 0 15px var(--neon-green); display: flex; justify-content: center; align-items: center; }
.goal-zone::after { content: '🚪'; font-size: 35px; animation: pulse 1.5s infinite; }
.trap-zone { background: rgba(255, 0, 0, 0.15); display: flex; justify-content: center; align-items: center; }
.trap-zone::after { content: '🔥'; font-size: 30px; animation: flicker 0.2s infinite; }
@keyframes flicker { 0% { opacity:0.8; } 100% { opacity:1; transform:scale(1.1); } }
@keyframes pulse { 0% { opacity: 0.7; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.7; transform: scale(0.9); } }
#player {
    position: absolute; width: 60px; height: 60px; z-index: 500; display: flex; justify-content: center; align-items: center; font-size: 45px; transition: top 0.5s linear, left 0.5s linear, transform 0.4s ease; text-shadow: 0 0 10px var(--neon-cyan);
}
.actions-bar { position: absolute; bottom: 30px; right: 30px; display: flex; gap: 15px; }
button.action-btn {
    width: 70px; height: 70px; border-radius: 50%; border: none; display: flex; justify-content: center; align-items: center; font-size: 2rem; cursor: pointer; transition: transform 0.2s; box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#run-btn { background: var(--neon-green); color: #003311; }
#trash-btn { background: var(--neon-red); color: white; }
/* POPUPS */
#game-popup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 600; display: none; justify-content: center; align-items: center;
}
.popup-badge {
    background: #050510; border: 2px solid #fff; padding: 30px; text-align: center; border-radius: 12px; box-shadow: 0 0 50px rgba(0,0,0,0.8); transform: scale(0.9); animation: popIn 0.3s forwards; display: flex; flex-direction: column; align-items: center;
}
@keyframes popIn { to { transform: scale(1); } }
.popup-img {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; margin-bottom: 20px; box-shadow: 0 0 20px currentColor;
}
.popup-title { font-size: 2rem; margin: 0 0 10px 0; text-transform: uppercase; }
.popup-btn {
    padding: 10px 25px; font-size: 1.1rem; font-weight: bold; text-transform: uppercase; background: transparent; border: 2px solid currentColor; color: inherit; cursor: pointer;
}
.badge-success { border-color: var(--neon-green); color: var(--neon-green); }
.badge-fail { border-color: var(--neon-red); color: var(--neon-red); }
/* FIN */
#end-screen-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 5, 16, 0.98); z-index: 700; display: none; flex-direction: column; align-items: center; justify-content: center;
}
.end-frame {
    width: 300px; height: 400px; margin: 20px auto; background: #000; border-radius: 20px; overflow: hidden; border: 4px solid #fff;
}
.end-frame img { width: 100%; height: 100%; object-fit: cover; }