:root {
            --bg: #121214;
            --gold: #d4af37;
            --wood: #3e2723;
            --fret-color: #b0bec5;
            --finger: #ff5722;
            --silver: #e0e0e0; /* Nuevo para flauta */
            --v-wood: #8d4925; /* Madera de violín */
        }

        body {
            background-color: var(--bg);
            color: white;
            font-family: 'Segoe UI', sans-serif;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            min-height: 100vh; margin: 0; padding: 10px; user-select: none;
        }
        .main-title {
            font-size: 3rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #ffffff;
            text-align: center;
            margin: 20px 0;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        /* El toque dorado para la palabra "Virtuales" */
        .main-title span {
            color: var(--gold);
            display: block; /* O "inline" si lo quieres en la misma línea */
            font-size: 1.5rem;
            letter-spacing: 12px;
            margin-top: -10px;
            opacity: 0.8;
        }

        /* Una línea decorativa debajo del título */
        .main-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: var(--gold);
            margin: 10px auto;
            border-radius: 2px;
            box-shadow: 0 0 15px var(--gold);
        }

        #overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000;
        }

        #start-btn {
            padding: 15px 45px; font-size: 1.2rem; background: var(--gold); border: none;
            color: #121214; font-weight: bold; border-radius: 50px; cursor: pointer; display: none;
        }

        .controls { margin-bottom: 10px; }
        select { padding: 8px; background: #25252b; color: var(--gold); border: 2px solid var(--gold); border-radius: 8px; cursor: pointer; }

        .mapping-bar {
            display: flex; gap: 10px; margin-bottom: 15px;
            padding: 12px; background: #1a1a1d; border-radius: 12px; border: 1px solid #333;
        }

        .slot {
            width: 75px; height: 65px; border: 2px dashed #555;
            border-radius: 8px; display: flex; flex-direction: column;
            align-items: center; justify-content: center; cursor: pointer; transition: 0.2s;
        }

        .slot.selected { border-color: var(--gold); background: rgba(212, 175, 55, 0.1); }
        .slot.active-playing { background: var(--gold) !important; color: #000; border-style: solid; }

        .chords-container {
            display: grid; grid-template-columns: repeat(10, 1fr);
            gap: 4px; margin-bottom: 15px; padding: 10px;
            background: rgba(255, 255, 255, 0.03); border-radius: 8px; width: 95%; max-width: 1000px;
        }

        .chord-btn {
            padding: 6px; background: #1e1e22; color: #fff; border: 1px solid #444;
            border-radius: 4px; cursor: pointer; font-size: 0.7rem; font-weight: bold;
        }

        /* --- PIANO --- */
        #piano-ui { display: flex; background: #111; padding: 20px 10px; border-radius: 8px; border-top: 15px solid #000; }
        .key { cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 8px; }
        .white { width: 32px; height: 160px; background: #fff; border: 1px solid #ccc; border-radius: 0 0 4px 4px; color: #999; font-size: 0.65rem; }
        .black { width: 22px; height: 100px; background: #222; margin: 0 -11px; z-index: 2; border-radius: 0 0 3px 3px; color: #666; font-size: 0.55rem; }
        .active-chord-note { background: var(--gold) !important; color: #000 !important; box-shadow: 0 0 15px var(--gold); }

        /* --- GUITARRA --- */
        #guitar-ui {
            display: none; width: 1100px; height: 300px; background: var(--wood);
            position: relative; border-radius: 4px; border: 2px solid #2b1d1a; box-shadow: inset 0 0 50px rgba(0,0,0,0.6);
            overflow: hidden;
        }
        .fretboard-interactive { display: flex; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; }
        .fret-col { flex: 1; border-right: 2px solid var(--fret-color); display: flex; flex-direction: column; justify-content: space-around; }
        .fret-col:first-child { border-right: 8px solid #fff; max-width: 50px; background: #221513; }
        .note-spot { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 15; position: relative; }
        .note-spot span { font-size: 0.6rem; color: rgba(255,255,255,0.25); pointer-events: none; }
        .finger-mark { position: absolute; width: 22px; height: 22px; background: var(--finger); border-radius: 50%; box-shadow: 0 0 8px var(--finger); display: none; z-index: 20; pointer-events: none; }
        .string-trigger { position: absolute; left: 0; width: 100%; height: 38px; z-index: 40; cursor: crosshair; display: flex; align-items: center; pointer-events: none; }
        .string-trigger.active-rasgueo { pointer-events: auto; }
        .string-vis { width: 100%; height: var(--h); background: linear-gradient(to bottom, #eee,#999,#666); pointer-events: none; }

        /* --- FLAUTA (NUEVO) --- */
        #flute-ui {
            display: none; width: 800px; height: 70px;
            background: linear-gradient(180deg,#bdc3c7, var(--silver),#95a5a6);
            border-radius: 35px; position: relative; border: 2px solid #7f8c8d;
            box-shadow: 0 10px 20px rgba(0,0,0,0.5); margin: 20px 0;
        }
        .flute-hole {
            position: absolute; width: 28px; height: 28px; background: #1a1a1a;
            border-radius: 50%; top: 50%; transform: translateY(-50%);
            border: 3px solid #333; box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
            transition: 0.1s;
        }
        .flute-hole.active { background: var(--gold); border-color: #fff; box-shadow: 0 0 15px var(--gold), inset 0 0 5px white; }

        /* --- VIOLIN (ADICIÓN) --- */
        #violin-ui {
            display: none; width: 400px; height: 300px; background: var(--v-wood);
            position: relative; border-radius: 60px; border: 4px solid #5d2b14;
            box-shadow: inset 0 0 50px rgba(0,0,0,0.7); overflow: hidden;
        }
        .violin-string {
            position: absolute; width: 100%; height: 20%; left: 0;
            display: flex; align-items: center; cursor: crosshair; z-index: 50;
        }
        .v-vis { width: 100%; height: 2px; background: #eee; box-shadow: 0 2px 4px black; pointer-events: none; }