#arkkids-app { text-align:center; min-height:50vh; font-family: sans-serif; }
.group-btn { margin:5px; padding:10px 15px; cursor:pointer; font-size: 20px; border: none; border-radius: 8px; background: #eee; }
.group-btn:hover { background: #ddde; }

.grid { display:flex; flex-wrap:wrap; gap:30px; justify-content:center; margin-top:20px; }
.card { width:150px; border-radius:15px; padding:15px 10px; background:#3B3B3B88; cursor:pointer; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: 0.2s; border: 4px solid transparent; }
.card:hover { transform: scale(1.00); }
.card.aanwezig { background:#8BC34A; color:#fff; }

.avatar { font-size:40px; margin-bottom: 5px; min-height: 50px; }
.avatar img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.counter { font-size: 12px; font-weight: bold; margin-top: 8px; background: rgba(0,0,0,0.1); padding: 4px 8px; border-radius: 10px; white-space: nowrap; }

/* Standaard: bewerken-icoon rechtsboven (blijft werken als hij NIET in statusline zit) */
.edit-emoji { position: absolute; top: 5px; right: 5px; background: #fff; border: 1px solid #ccc; border-radius: 50%; width: 25px; height: 25px; font-size: 12px; cursor: pointer; color: #000; }

/* =========================================================
   Bewerken-icoon naast "aangemeld" (alleen als edit-emoji IN .statusline staat)
   ========================================================= */
.statusline{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.statusline .edit-emoji{
  position: static;      /* haalt absolute weg in statusline */
  top: auto;
  right: auto;
  width: 18px;
  height: 18px;
  font-size: 10px;
  margin: 0;
}

/* =========================================================
   Beloningslijstjes (oude gradients uitgeschakeld)
   ========================================================= */
/*
.card.reward-wood {
  border-color: #8b5a2b;
  box-shadow: 0 4px 6px rgba(0,0,0,0.18), inset 0 0 0 2px rgba(255,255,255,0.15);
  background-image: linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)),
                    repeating-linear-gradient(45deg, rgba(139,90,43,0.35) 0 6px, rgba(139,90,43,0.15) 6px 12px);
}
*/

/*
Kleiner frame (meer ruimte rondom):
.card.reward-wood::before{ inset: 8px; }

Groter frame (minder ruimte rondom):
.card.reward-wood::before{ inset: -6px; }
*/

/* ===================== WOOD ===================== */
.card.reward-wood::before{
  content:"";
  position:absolute;
  inset:-30px;
  background: url("https://start.arkkids.nl/wp-content/uploads/2026/05/Hout.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events:none;
  z-index:2;
}

.card.reward-wood > *{
  position:relative;
  z-index:1;
}

/* (optioneel) als tekst/inhoud tegen het frame komt */
.card.reward-wood{
  padding: 24px 18px;
}

/* ===================== BRONZE ===================== */
/*
.card.reward-bronze {
  border-color: #cd7f32;
  box-shadow: 0 6px 10px rgba(0,0,0,0.2), inset 0 0 0 2px rgba(255,255,255,0.18);
  background-image: linear-gradient(135deg, rgba(205,127,50,0.22), rgba(255,255,255,0.06));
}
*/

.card.reward-bronze::before{
  content:"";
  position:absolute;
  inset:-20px;
  background: url("https://start.arkkids.nl/wp-content/uploads/2026/05/Bronze.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events:none;
  z-index:2;
}

.card.reward-bronze > *{
  position:relative;
  z-index:1;
}

.card.reward-bronze{
  padding: 24px 18px;
}

/* ===================== SILVER ===================== */
/*
.card.reward-silver {
  border-color: #c0c0c0;
  box-shadow: 0 6px 12px rgba(0,0,0,0.22), inset 0 0 0 2px rgba(255,255,255,0.25);
  background-image: linear-gradient(135deg, rgba(192,192,192,0.25), rgba(255,255,255,0.08));
}
*/

.card.reward-silver::before{
  content:"";
  position:absolute;
  inset:-20px;
  background: url("https://start.arkkids.nl/wp-content/uploads/2026/05/Silver.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events:none;
  z-index:2;
}

.card.reward-silver > *{
  position:relative;
  z-index:1;
}

.card.reward-silver{
  padding: 24px 18px;
}

/* ===================== GOLD ===================== */
/*
.card.reward-gold {
  border-color: #d4af37;
  box-shadow: 0 8px 14px rgba(0,0,0,0.24), inset 0 0 0 2px rgba(255,255,255,0.28);
  background-image: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(255,255,255,0.08));
}
*/

.card.reward-gold::before{
  content:"";
  position:absolute;
  inset:-20px;
  background: url("https://start.arkkids.nl/wp-content/uploads/2026/05/Goud.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events:none;
  z-index:2;
}

.card.reward-gold > *{
  position:relative;
  z-index:1;
}

.card.reward-gold{
  padding: 24px 18px;
}

/* =========================================================
   Lijstweergave
   ========================================================= */
#children.list-view { flex-direction: column; align-items: stretch; max-width: 360px; margin-left:auto; margin-right:auto; }
#children.list-view .card { width: 100%; display:flex; align-items:center; gap: 12px; padding: 12px 14px; border-radius: 14px; }
#children.list-view .card:hover { transform: none; }
#children.list-view .avatar { margin:0; min-height: unset; }
#children.list-view .avatar img { width: 42px; height: 42px; }
#children.list-view .info { text-align:left; width: 100%; }
#children.list-view .card .toprow { display:flex; justify-content: space-between; align-items:center; gap: 10px; }
#children.list-view .statusline { font-size: 12px; margin-top: 2px; }
#children.list-view .counter { margin-top: 0; background: rgba(0,0,0,0.08); }

#emoji-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #3B3B3B; padding: 20px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 1000; width: 300px; color:#fff; }
#emoji-modal .emoji-option { font-size: 30px; cursor: pointer; margin: 5px; display: inline-block; }
#modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }

.ark-input { max-width:420px; margin:auto; text-align:center; font-family: sans-serif; background: #f9f9f9; padding: 20px; border-radius: 15px; }
.ark-input input, .ark-input select { width:90%; margin:8px 0; padding:12px; border: 1px solid #ccc; border-radius: 8px; }
.ark-input button { background: #2196F3; color: black; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-size: 16px; margin-top: 10px; }

.arkkids-toolbar { display:flex; justify-content:center; gap: 12px; margin: 10px 0 0; flex-wrap: wrap; }
.history-control, .view-control { display:flex; align-items:center; gap:10px; padding:8px 10px; background: rgba(0,0,0,0.05); border-radius: 12px; }
.history-label { font-size: 14px; font-weight: 600; }
#history-date { padding: 8px 10px; border: 1px solid #ccc; border-radius: 10px; font-size: 14px; }

/* Schuifknop */
.switch { position: relative; display: inline-block; width: 52px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .2s; border-radius: 999px; }
.slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; transition: .2s; border-radius: 50%; }
.switch input:checked + .slider { background-color: #2196F3; }
.switch input:checked + .slider:before { transform: translateX(24px); }

/* Verberg alle tekst-informatie in de portrait tegel */
.arkkids-portrait-mode .card .info {
    display: none !important;
}

/* Verberg de edit-knop voor emoji's in portrait-modus indien gewenst */
.arkkids-portrait-mode .card .edit-emoji {
    display: none !important;
}

/* Zorg dat de afbeelding (avatar) de gehele kaart vult */
.arkkids-portrait-mode .card {
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.arkkids-portrait-mode .card .avatar, 
.arkkids-portrait-mode .card .avatar img {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: cover; /* De JPG vult de hele tegel */
}