/* style.css */

/* --- 1. DARK MODE & NEON STIJL --- */
:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #ffffff;
    --neon-glow: 0 0 10px rgba(255, 255, 255, 0.5);
}

html, body {
    height: 100%;
    max-height: 100dvh;
}

body {
    font-family: 'Varela Round', sans-serif;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
    user-select: none;
    transition: background 0.2s;
}

/* --- NAVIGATIE --- */
header {
    background: rgba(30, 30, 30, 0.9);
    backdrop-filter: blur(10px);
    padding: 10px 30px;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    height: 60px;
    box-sizing: border-box;
}

h1 { margin: 0; font-size: 1.5em; background: linear-gradient(45deg, #ff00cc, #3333ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
 
button { font-family: inherit; }

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

#backBtn, #fullScreenBtn {
    background: linear-gradient(45deg, #ff4757, #ff6b81);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 15px #ff4757;
    transition: transform 0.2s;
    font-size: 0.9em;
}
#backBtn { display: none; }
#backBtn:hover, #fullScreenBtn:hover { transform: scale(1.1); }

.vol-control { display: flex; align-items: center; gap: 10px; font-size: 0.9em; color: #aaa; }

/* --- DASHBOARD --- */
#dashboard {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-content: start;
    align-items: start;
    gap: 12px 14px;
    padding: 10px 20px 16px;
    max-width: 1080px;
    margin: 0 auto;
    max-height: calc(100dvh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.card {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    border-radius: 16px;
    background: var(--card-bg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.18s ease, box-shadow 0.3s;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transform: none;
    box-sizing: border-box;
    padding: 8px 6px 10px;
}

.card:hover {
    z-index: 20;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 0 22px currentColor;
}

.card-num {
    position: absolute;
    top: 6px;
    left: 7px;
    z-index: 2;
    pointer-events: none;
    min-width: 1.55em;
    height: 1.55em;
    padding: 0 0.18em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.05rem, 2.3vh, 1.45rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    border: 2px solid currentColor;
    border-radius: 999px;
    box-shadow: 0 0 10px currentColor;
}

.card-icon {
    font-size: clamp(1.7rem, 5vh, 2.55rem);
    margin-bottom: 4px;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
}
.card-title {
    font-size: clamp(0.75rem, 1.6vh, 0.98rem);
    font-weight: bold;
    text-align: center;
    line-height: 1.15;
    padding: 0 4px;
}

#external-links {
    grid-column: 1 / -1;
    gap: 8px !important;
    padding: 0 0 2px 0 !important;
}
#external-links button {
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
}
#external-links img {
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
}

@media (max-width: 720px) {
    #dashboard {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        padding: 10px 12px 14px;
    }
}

@media (max-width: 480px) {
    #dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Kleuren */
.c1 { color: #ff9f43; border-color: #ff9f43; } 
.c2 { color: #ff5252; border-color: #ff5252; } 
.c3 { color: #18dcff; border-color: #18dcff; } 
.c4 { color: #00b894; border-color: #00b894; } 
.c5 { color: #a29bfe; border-color: #a29bfe; } 
.c6 { color: #74b9ff; border-color: #74b9ff; } 
.c7 { color: #ff7675; border-color: #ff7675; } 
.c8 { color: #fd79a8; border-color: #fd79a8; } 
.c9 { color: #55efc4; border-color: #55efc4; } 
.c10 { color: #0984e3; border-color: #0984e3; }

/* --- GAME STAGE --- */
#game-stage {
    display: none;
    pointer-events: none;
    width: 100%;
    height: 0;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

body.lab-open {
    overflow: hidden;
}

body.lab-open #dashboard,
body.lab-open #external-links {
    display: none !important;
}

body.lab-open #game-stage {
    display: flex !important;
    flex-direction: column;
    pointer-events: auto;
    height: calc(100dvh - 60px);
    max-height: calc(100dvh - 60px);
    overflow: hidden;
}

#external-links {
    grid-column: 1 / -1;
}

.game-view {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    box-sizing: border-box;
    animation: fadeIn 0.35s ease;
    overflow: hidden;
}
.game-view:not(.active) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden;
    pointer-events: none;
}
.game-view.active {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

button.action-btn {
    padding: 15px 40px; font-size: 1.2em; border-radius: 50px; border: none; color: white; cursor: pointer; margin: 10px;
    transition: all 0.2s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
}
button.action-btn:active { transform: scale(0.95); }
button.action-btn.arp-active { transform: scale(0.95); border: 2px solid white; }
 
.controls-row {
    display: flex; align-items: center; justify-content: center; gap: 16px; margin: 8px;
    background: rgba(255,255,255,0.05); padding: 10px 20px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0; flex-wrap: wrap;
}

/* --- PIANO LAYOUT --- */
.piano-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 30px); margin-top: 4px; max-width: 100%; flex: 1; min-height: 0; }
.piano-side-controls { display: flex; flex-direction: column; gap: 12px; align-items: center; flex-shrink: 0; }
.piano-side-controls .action-btn { margin: 0; padding: 10px 16px; font-size: 0.95rem; width: min(180px, 28vw); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.piano-keys { display: flex; justify-content: center; position: relative; width: fit-content; max-width: 100%; margin: 0; background: #222; padding: clamp(8px, 2vh, 24px); border-radius: 15px; box-shadow: 0 0 60px rgba(0,0,0,0.6); }
.key { width: clamp(28px, 4.4vw, 65px); height: clamp(110px, 28vh, 240px); background: linear-gradient(to bottom, #f0f0f0 90%, #d0d0d0 100%); border-radius: 0 0 10px 10px; cursor: pointer; margin: 0 2px; position: relative; z-index: 1; border: 1px solid #111; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.1); transition: all 0.1s; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 16px; color: #333; font-weight: bold; }
.key.black { background: linear-gradient(to bottom, #444 0%, #222 100%); color: #fff; height: clamp(68px, 17vh, 150px); width: clamp(18px, 3vw, 45px); margin: 0 clamp(-16px, -1.6vw, -22px); z-index: 2; border-radius: 0 0 5px 5px; position: absolute; top: 0; }
.key:active, .key.active { background: #ff9f43; transform: translateY(4px); box-shadow: 0 0 30px #ff9f43; border-color: #ff9f43; color: white; }
.key span { font-size: 0.8em; opacity: 0.6; margin-top: 5px; pointer-events: none; }
 
#particleCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* --- RITME --- */
.rhythm-container { display: flex; margin-top: 8px; background: #2d3436; padding: clamp(10px, 2vh, 24px); border-radius: 20px; border: 2px solid #444; }
.rhythm-labels { display: flex; flex-direction: column; justify-content: space-around; padding-right: 15px; font-weight: bold; color: #aaa; text-align: right; min-width: 60px; }
.rhythm-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; width: 100%; }
.beat-btn { width: clamp(32px, 6vh, 50px); height: clamp(32px, 6vh, 50px); background: #444; border-radius: 8px; border: none; cursor: pointer; transition: all 0.1s; box-shadow: inset 0 0 8px rgba(0,0,0,0.5); position: relative; }
.beat-btn.active.r0 { background: #ff5252; box-shadow: 0 0 15px #ff5252; } 
.beat-btn.active.r1 { background: #18dcff; box-shadow: 0 0 15px #18dcff; } 
.beat-btn.active.r2 { background: #ff9f43; box-shadow: 0 0 15px #ff9f43; } 
.beat-btn.active.r3 { background: #a29bfe; box-shadow: 0 0 15px #a29bfe; } 
.beat-btn.playing { transform: scale(1.05); border: 2px solid white; }
.beat-btn::after { content:''; width:8px; height:8px; background:#111; border-radius:50%; position:absolute; top:4px; right:4px; transition:0.2s; }
.beat-btn.active::after { background: #fff; box-shadow: 0 0 5px #fff; }

/* --- ARPEGGIATOR (GECORRIGEERD) --- */

/* Verhoog de containerbreedte zodat er meer ruimte is voor de zij-aan-zij lay-out */
#view-arpeggio.game-view {
    max-width: 1200px;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    flex-wrap: wrap; 
}
#view-arpeggio h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
    order: 0;
}

/* De container voor de knoppen (Linkerzijde) */
.arp-controls-container {
    flex-basis: 300px; 
    flex-shrink: 0; 
    
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 15px;
    padding: 0;
    width: 100%; 
    margin: 0;
    order: 1; 
}

/* De visualizer (Rechterzijde) */
#arp-visualizer {
    flex-grow: 1; 
    flex-basis: 400px; 
    
    order: 2; 
    min-height: 0;
    height: clamp(140px, 32vh, 320px);
    max-width: none; 
    background: #111; 
    border: 3px solid #74b9ff; 
    border-radius: 15px; 
    padding: 10px; 
    gap: 8px; 
    box-shadow: inset 0 0 40px rgba(0,0,0,0.8), 0 0 25px rgba(116, 185, 255, 0.5); 
    margin-top: 0; 
    
    /* CRUCIAAL: Zorgt ervoor dat de balken onderin verschijnen en gecentreerd zijn */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Zorg dat de tekst op de voorgrond staat als de balken er niet zijn */
    position: relative; 
}
#arp-visualizer p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* De stijl voor de individuele staven/balken */
.arp-bar { 
    width: 35px; 
    background-color: #333; 
    border-radius: 4px 4px 0 0; 
    transition: all 0.1s; 
    position: relative; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.8); 
    border: 1px solid rgba(255,255,255,0.05); 
    opacity: 0.5;
    /* Hoogte wordt via JavaScript ingesteld met de style attribuut */
}
.arp-bar.active { 
    opacity: 1; 
    background-color: currentColor !important; 
    box-shadow: 0 0 25px 5px currentColor; 
}

/* Media Query voor kleine schermen om ze onder elkaar te zetten */
@media (max-width: 850px) {
    #view-arpeggio.game-view {
        flex-direction: column;
        align-items: center;
        max-width: 600px; 
    }
    .arp-controls-container {
        order: 2;
        max-width: 600px;
        margin-top: 20px;
    }
    #arp-visualizer {
        order: 1;
        width: 100%;
        max-width: 600px;
        margin-top: 0;
    }
}

/* Stijl voor de rijen binnen de controls */
.arp-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; 
    width: 100%;
}

/* Stijl voor de kleinere knoppen */
.arp-controls-row .action-btn {
    padding: 10px 15px; 
    font-size: 0.9em; 
    flex-grow: 1;
    max-width: 150px; 
    margin: 0;
}

/* Stijl voor Select Knoppen (voor Modus/Octaaf buttons) */
.select-btn { 
    padding: 8px 15px; 
    border-radius: 10px; 
    border: 1px solid #333; 
    background: #2d2d2d; 
    color: #aaa; 
    cursor: pointer; 
    transition: all 0.2s; 
    box-shadow: 0 0 5px rgba(0,0,0,0.5); 
    font-size: 0.9em; 
    flex-grow: 1; 
    max-width: 100px; 
} 
.select-btn.active { 
    color: white; 
    background: #74b9ff; 
    border-color: #74b9ff; 
    box-shadow: 0 0 15px #74b9ff, inset 0 0 5px rgba(255,255,255,0.5); 
    transform: translateY(-2px); 
}

/* Specifieke stijl voor de Arpeggiator Modus Knoppen */
.mode-btn, .octave-btn {
    flex-grow: 1;
    min-width: 90px;
    max-width: 150px;
    margin: 0 5px;
}


.arp-bpm-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 120px;
}
.arp-bpm-group label {
    font-size: 0.9em;
    color: #ccc;
}


/* --- NIEUWE TEKENEN STIJL --- */
#drawCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 0; background: #000; cursor: crosshair; display: block; touch-action: none; z-index: 1; }
body:not(.lab-open) #drawCanvas,
body:not(.lab-open) #waveCanvas { pointer-events: none; }
#view-tekenen { padding: 0; justify-content: flex-start; position: relative; width: 100%; min-height: 0; overflow: hidden; }
#view-tekenen.game-view.active { padding: 0; }
 
.draw-toolbar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid #18dcff;
    border-radius: 20px;
    padding: 15px;
    display: flex;
    gap: 20px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    z-index: 100;
    align-items: center;
    max-width: 90%;
    flex-wrap: wrap;
    justify-content: center;
}

.draw-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.draw-group label {
    font-size: 0.8em;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.palette {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.color-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.2);
    transition: transform 0.2s;
}
.color-btn:hover { transform: scale(1.2); }
.color-btn.active { border: 2px solid white; transform: scale(1.2); }

.small-btn {
    padding: 8px 15px !important;
    font-size: 0.9em !important;
    margin: 0 2px !important;
    min-width: 60px;
}
.small-btn.warning { background: #ff4757 !important; }
 
/* --- SCOPE --- */
#view-golven { cursor: grab; min-height: 0; }
#waveCanvas { display: block; width: 95%; flex: 1 1 auto; min-height: 140px; max-height: calc(100dvh - 140px); height: auto; background: #000; border: 3px solid #a29bfe; border-radius: 10px; box-shadow: 0 0 30px #a29bfe; cursor: crosshair; }
#waveCanvas:active { cursor: grabbing !important; box-shadow: 0 0 40px #a29bfe; }

/* --- HARMONIE --- */
#harmonie-controls { display: flex; flex-direction: column; gap: 15px; padding: 20px 0; max-width: 800px; width: 90%; }
.harmony-select-row { flex-direction: column; padding: 10px; }
.harmony-select-row label { font-weight: bold; color: #ccc; margin-bottom: 5px; display: block; text-align: center; border-bottom: 1px solid rgba(253, 121, 168, 0.2); padding-bottom: 5px; }
.button-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 5px; }
.select-btn { padding: 8px 15px; border-radius: 10px; border: 1px solid #333; background: #2d2d2d; color: #aaa; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 5px rgba(0,0,0,0.5); font-size: 0.9em; flex-grow: 1; max-width: 100px; }
.select-btn.active { color: white; background: #e84393; border-color: #fd79a8; box-shadow: 0 0 15px #e84393, inset 0 0 5px rgba(255,255,255,0.5); transform: translateY(-2px); }
#harmony-pad-wrapper { position: relative; width: 100%; height: clamp(140px, 28vh, 280px); background: #1c2833; border-radius: 15px; box-shadow: 0 0 20px rgba(253, 121, 168, 0.4); overflow: hidden; border: 3px solid #fd79a8; margin-top: 10px; }
.chord-ray { position: absolute; bottom: 0; left: 50%; width: 8px; border-radius: 10px 10px 0 0; transform-origin: 50% 100%; transition: height 0.1s ease-out; box-shadow: 0 0 15px currentColor, 0 0 30px currentColor; mix-blend-mode: screen; opacity: 0.9; z-index: 1; }

select, input[type=range] { font-family: inherit; padding: 8px; border-radius: 5px; border: 1px solid #fd79a8; background: #333; color: white; accent-color: #fd79a8; }
#osc-character { font-size: clamp(4rem, 18vh, 10em); transition: transform 0.1s; cursor: pointer; user-select: none; }
.wobble { animation: shake 0.1s infinite; }
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 50% { transform: translate(-1px, -2px) rotate(-1deg); } 100% { transform: translate(-3px, 0px) rotate(1deg); } }
input[type=range] { accent-color: #ff9f43; }

/* --- ECHO LAYOUT --- */
.echo-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(16px, 3vh, 40px); margin-top: 8px; width: 90%; max-width: 1000px; min-height: 0; }
.echo-pad-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; width: min(400px, 42vh, 90vw); aspect-ratio: 1; }
.echo-pad { background: #2d3436; border-radius: 20px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 4em; cursor: pointer; border: 2px solid transparent; transition: all 0.1s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); user-select: none; }
.echo-pad:active { transform: scale(0.95); }
.echo-pad span { font-size: 0.25em; font-weight: bold; margin-top: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; }
.pad-kick { border-color: #ff5252; color: #ff5252; } .pad-kick:hover { background: rgba(255, 82, 82, 0.1); box-shadow: 0 0 20px #ff5252; } .pad-kick.active { background: #ff5252; color: white; box-shadow: 0 0 40px #ff5252; }
.pad-snare { border-color: #18dcff; color: #18dcff; } .pad-snare:hover { background: rgba(24, 220, 255, 0.1); box-shadow: 0 0 20px #18dcff; } .pad-snare.active { background: #18dcff; color: white; box-shadow: 0 0 40px #18dcff; }
.pad-hat { border-color: #f1c40f; color: #f1c40f; } .pad-hat:hover { background: rgba(241, 196, 15, 0.1); box-shadow: 0 0 20px #f1c40f; } .pad-hat.active { background: #f1c40f; color: white; box-shadow: 0 0 40px #f1c40f; }
.pad-zap { border-color: #a29bfe; color: #a29bfe; } .pad-zap:hover { background: rgba(162, 155, 254, 0.1); box-shadow: 0 0 20px #a29bfe; } .pad-zap.active { background: #a29bfe; color: white; box-shadow: 0 0 40px #a29bfe; }
.echo-controls-panel { display: flex; flex-direction: column; gap: 15px; width: 300px; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 20px; border: 1px solid #0984e3; }

/* --- NIEUWE STIJL VOOR SEQUENCER 2.0 --- */
#seq-wrapper {
    display: flex;
    gap: 5px; /* Kleiner gap voor strakke look */
    padding: 20px;
    background: #222;
    border-radius: 15px;
    border: 1px solid #55efc4;
    box-shadow: 0 0 30px rgba(85, 239, 196, 0.2);
}
 
.seq-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
 
.seq-col.playing {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.seq-cell {
    width: clamp(20px, 4.2vh, 35px);
    height: clamp(20px, 4.2vh, 35px);
    background: #333;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s;
}
 
.seq-cell:hover {
    border-color: #aaa;
}

.seq-cell.active {
    background: #00b894;
    box-shadow: 0 0 15px #00b894;
    border-color: #55efc4;
}

/* Synth Shredder / Laser Gitaar */
.synth-shredder-pad {
    width: 90%;
    max-width: 600px;
    height: clamp(160px, 45vh, 360px);
    max-height: calc(100dvh - 180px);
    background: #111;
    border: 3px solid #ff7675;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(255, 118, 117, 0.6);
    cursor: crosshair;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}
#synth-indicator-x {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px;
    width: 100%;
    background: linear-gradient(to right, #ff4757, #ff7675);
    transform-origin: left;
    transition: transform 0.05s linear;
    box-shadow: 0 0 10px #ff7675;
}
#synth-indicator-y {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to top, #ff4757, #ff7675);
    transform-origin: bottom;
    transition: transform 0.05s linear;
    box-shadow: 0 0 10px #ff7675;
}
#laser-fret {
    position: absolute;
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, white 20%, #ff7675 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 25px #ff7675;
    pointer-events: none;
    z-index: 10;
    transition: none;
}
#freq-display {
    color: #ff7675;
    font-weight: bold;
    margin-top: 15px;
}

/* Nieuwe animaties voor Dance Mode */
@keyframes beat-pulse {
    0% { transform: scale(1); filter: brightness(1); }
    10% { transform: scale(1.02); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

.canvas-throb {
    animation: beat-pulse 0.5s infinite; /* 120 BPM */
}

/* Labs in het venster houden (digibord) */
.game-view.active > h2,
.game-view.active > p {
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 8px;
}
#view-arpeggio.game-view.active,
#view-harmonie.game-view.active,
#view-echo.game-view.active {
    justify-content: flex-start;
    overflow: auto;
}
#harmonie-controls {
    overflow-y: auto;
    min-height: 0;
}
#seq-wrapper {
    flex-shrink: 1;
    min-height: 0;
}
#view-oscillator input[type=range] {
    width: min(300px, 80vw);
    margin: 12px;
}