body {
    background-color: #f0f8ff;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.game-container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 95%;
    max-width: 1200px; 
    text-align: center;
}

h1 {
    color: #003399;
    margin-bottom: 20px;
}

#target-display {
    background-color: #007bff;
    color: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

#target-amount {
    font-size: 2.5em;
    font-weight: bold;
}

/* --- Play Area voor Naast Elkaar (Ongewijzigd) --- */
.play-area {
    display: flex;
    flex-wrap: nowrap; 
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

#available-money, #drop-zone {
    flex: 0 0 44%; 
    padding: 15px;
    border-radius: 10px;
    min-height: 250px;
}

#available-money {
    background-color: #e6f0ff; 
    border: 2px dashed #007bff;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 10px;
}

#drop-zone {
    background-color: #fffacd; 
    border: 3px solid #ffcc00;
}

#selected-money {
    min-height: 180px;
    border: 1px dashed #ccc;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

#current-total {
    font-size: 1.6em;
    font-weight: bold;
    color: #003399;
}

/* --- Visuele Stijlen voor Geld (GROTER GEMAAKT) --- */
.money {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: transparent; 
    cursor: grab;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    border: none !important; 
    margin: 5px; /* Margins ook iets vergroot */
}

/* COINS: Rond en GROTER */
.coin {
    width: 75px; /* Was 60px */
    height: 75px; /* Was 60px */
    border-radius: 50%;
    background-color: #f7b731; 
}

/* BANKNOTES: Rechthoekig en GROTER */
.banknote {
    width: 140px; /* Was 120px */
    height: 70px; /* Was 60px */
    border-radius: 5px;
    background-color: #9ac2f4;
}
/* --- Afbeelding Plaatsaanduidingen (HIER MOET JE DE AFBEELDINGEN TOEVOEGEN) ---
   Zorg dat je afbeeldingen in dezelfde map staan of geef het juiste pad op.
*/

/* Voorbeelden voor de munten: */
.munt-2euro { background-image: url('2_euro_munt.png'); }
.munt-1euro { background-image: url('1_euro_munt.png'); }
.munt-50cent { background-image: url('50_cent_munt.png'); }
.munt-20cent { background-image: url('20_cent_munt.png'); }
.munt-10cent { background-image: url('10_cent_munt.png'); }
.munt-5cent { background-image: url('5_cent_munt.png'); }
.munt-2cent { background-image: url('2_cent_munt.png'); }
.munt-1cent { background-image: url('1_cent_munt.png'); }

/* Voorbeelden voor de biljetten: */
.biljet-100euro { background-image: url('100_euro_biljet.PNG'); }
.biljet-50euro { background-image: url('50_euro_biljet.PNG'); }
.biljet-20euro { background-image: url('20_euro_biljet.PNG'); }
.biljet-10euro { background-image: url('10_euro_biljet.PNG'); }
.biljet-5euro { background-image: url('5_euro_biljet.PNG'); 
}

/* Stijl voor items in de dropzone (ook iets groter gemaakt) */
.money-clone.coin {
    width: 60px; /* Was 50px */
    height: 60px; /* Was 50px */
}
.money-clone.banknote {
    width: 120px; /* Was 100px */
    height: 60px; /* Was 50px */
}

/* Knoppenstijlen (ongewijzigd) */
.controls button {
    padding: 10px 20px;
    font-size: 1.1em;
    margin: 0 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
#new-amount-btn { background-color: #00cc66; color: white; }
#check-btn { background-color: #ff9900; color: white; }
#feedback { margin-top: 20px; font-size: 1.4em; font-weight: bold; min-height: 40px; }
/* EduTools V7 */
*{box-sizing:border-box}body{background:#f2f7fd;color:#17334f;padding:14px;font-family:system-ui,Arial,sans-serif}
.game-container{max-width:1250px;border:1px solid #d8e6f4;box-shadow:0 9px 25px rgba(16,76,140,.07)}
h1{color:#135bbb;font-size:clamp(24px,4vw,35px)}#target-display{background:#1668cd}
.money{cursor:pointer;transition:transform .15s,filter .15s}.money:hover,.money:focus-visible{transform:scale(1.04);outline:3px solid #1766d4;outline-offset:3px}
#available-money{gap:5px;justify-content:center}#drop-zone{min-width:0}#selected-money{min-height:160px}
.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.controls button{border-radius:12px;min-height:48px;margin:0;font-weight:800}
#new-amount-btn{background:#1766d4}#check-btn{background:#0b986d}
@media(max-width:760px){.game-container{padding:12px;width:100%}.play-area{flex-direction:column}.play-area>div{flex:auto!important;width:100%}.money.banknote{width:120px;height:60px}.money.coin{width:64px;height:64px}}