/* Challenges – mobile-first, passend zum Projekt */

.container{padding:16px;max-width:780px;margin:0 auto}
.card{border-radius:18px;padding:14px}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.card-head .h{font-weight:700}
.spacer{flex:1}

.state h2{margin:0 0 6px 0;font-size:1.05rem}
.state .desc{opacity:.9;line-height:1.35}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{font-size:.78rem;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.badge.warn{background:rgba(255,180,90,.12);border-color:rgba(255,180,90,.25)}
.badge.ok{background:rgba(120,255,170,.10);border-color:rgba(120,255,170,.22)}

.actions{display:flex;gap:10px;margin-top:12px}
.hidden{display:none !important}

.accepted{margin-top:12px}
.row{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.chip{font-size:.78rem;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.chip.ok{background:rgba(120,255,170,.10);border-color:rgba(120,255,170,.22)}
.muted{opacity:.75;font-size:.85rem}

.upload input{display:none}
.upload-box{
  border-radius:16px;
  padding:12px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
}
.upload-title{font-weight:650}
.upload-sub{opacity:.75;font-size:.85rem;margin-top:2px}

.btn{min-height:44px}
.result{
  width:100%;
  max-height:320px;
  object-fit:cover;
  border-radius:16px;
  margin-top:10px;
  border:1px solid rgba(255,255,255,.10);
}
.hint{opacity:.75;font-size:.85rem;margin-top:8px}

.skeleton{
  height:14px;border-radius:10px;
  background:rgba(255,255,255,.08);
  margin:10px 0;
  overflow:hidden;
}
.skeleton:after{
  content:"";
  display:block;height:100%;
  width:40%;
  background:rgba(255,255,255,.10);
  transform:translateX(-100%);
  animation:shimmer 1.2s infinite;
}
@keyframes shimmer{to{transform:translateX(260%)}}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.14);
  max-width:min(520px, calc(100% - 24px));
  display:none;
  z-index:99;
}
.toast.show{display:block}


/* 9er Auswahl */
.grid-hint{opacity:.85;margin:2px 0 10px 0;font-size:.9rem;line-height:1.35}
.ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
@media (max-width: 720px){
  .ch-grid{grid-template-columns:1fr}
}
.ch-card{
  text-align:left;
  border-radius:16px;
  padding:12px;
  /* Higher contrast for readability on dark background */
  background:rgba(12,10,8,.55);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
}
.ch-card:hover{border-color:rgba(255,255,255,.22)}
.ch-card.selected{outline:2px solid rgba(255,255,255,.22); transform:translateY(-1px)}
.ch-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ch-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.ch-badge span{opacity:.9;font-weight:700;letter-spacing:.02em}
.ch-badge.big{font-size:.9rem;padding:8px 12px;margin-bottom:10px}
.ch-title{font-weight:800;margin:0 0 6px 0;line-height:1.25;color:rgba(255,255,255,.94)}
.ch-desc{line-height:1.35;font-size:.9rem;color:rgba(255,255,255,.78)}

.ch-card.bronze{border-left:4px solid rgba(205,127,50,.9)}
.ch-card.silver{border-left:4px solid rgba(192,192,192,.9)}
.ch-card.gold{border-left:4px solid rgba(255,215,0,.9)}

.ch-badge.bronze{border-color:rgba(205,127,50,.35)}
.ch-badge.silver{border-color:rgba(192,192,192,.35)}
.ch-badge.gold{border-color:rgba(255,215,0,.35)}

.active-wrap h2{margin:0 0 6px 0}