/* ═══════════════════════════════════════════════════════
   Arrow Puzzle — Daily Rewards, Challenges & Badges (v4)
   ═══════════════════════════════════════════════════════ */

/* ── Daily Rewards Modal ─────────────────────────────── */
.daily-card {
  width: min(480px, 100%);
  max-height: 88vh;
  padding: 24px 20px;
  gap: 0;
}

.daily-streak-banner {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(135deg, #6C5CE720, #a29bfe20);
  border: 1px solid #6C5CE740;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size:0.9rem; font-weight:800; color:var(--txt);
}
.daily-streak-fire { font-size:1.3rem; }

.daily-title {
  font-size:1.2rem; font-weight:900;
  text-align:center; margin-bottom:4px;
}
.daily-status {
  font-size:0.82rem; color:var(--txt-muted);
  text-align:center; margin-bottom:16px;
}

.daily-calendar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  overflow-y: auto;
  max-height: 52vh;
}

.day-card {
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 7px 4px 6px;
  text-align:center;
  position:relative;
  transition: all 0.2s;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.day-number { font-size:0.58rem; font-weight:800; color:var(--txt-muted); text-transform:uppercase; letter-spacing:0.05em; }
.day-icon   { font-size:1.2rem; line-height:1; }
.day-value  { font-size:0.6rem; font-weight:700; color:var(--txt-muted); }

.day-card.day-past {
  background: rgba(46,213,115,0.06);
  border-color: rgba(46,213,115,0.2);
  opacity: 0.7;
}
.day-check {
  position:absolute; top:4px; right:4px;
  width:14px; height:14px;
  background:#2ED573;
  border-radius:50%;
  font-size:0.5rem; font-weight:900; color:#fff;
  display:flex; align-items:center; justify-content:center;
}

.day-card.day-today {
  border-color: var(--clr-primary);
  box-shadow: 0 0 12px rgba(108,92,231,0.4);
  background: rgba(108,92,231,0.1);
  animation: day-pulse 2s ease infinite;
  grid-column: span 1;
  padding-bottom: 8px;
}
@keyframes day-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(108,92,231,0.3); }
  50% { box-shadow: 0 0 20px rgba(108,92,231,0.6); }
}

.day-claim-btn {
  margin-top: 4px;
  font-size:0.6rem; font-weight:800;
  padding:3px 8px; border-radius:6px;
  background: var(--clr-primary); color:#fff;
  border:none; cursor:pointer;
  transition: transform 0.1s;
}
.day-claim-btn:hover { transform:scale(1.08); }

.day-card.day-future {
  opacity:0.35;
}
.day-card.day-future .day-icon { filter: blur(1px); }

/* Reward popup */
.reward-popup {
  position:absolute; inset:0;
  background: rgba(13,13,26,0.92);
  border-radius: inherit;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.3s;
  z-index:10;
}
.reward-popup.active { opacity:1; }
.reward-popup-inner {
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.reward-popup-icon  { font-size:3rem; }
.reward-popup-label { font-size:0.85rem; color:var(--txt-muted); }
.reward-popup-value { font-size:1.4rem; font-weight:900; color:var(--clr-accent); }

/* ── Challenge Screen ──────────────────────────────── */
.ch-shell { display:flex; flex-direction:column; height:100%; }

.ch-header {
  display:flex; align-items:center; gap:12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.ch-header h2 { flex:1; font-size:1.2rem; font-weight:800; }
.ch-badge {
  font-size: 0.72rem; font-weight: 800;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(108,92,231,0.15);
  color: var(--clr-primary);
  border: 1px solid rgba(108,92,231,0.3);
}

.ch-list {
  flex:1; overflow-y:auto;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
}

.ch-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  display: flex;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.2s;
}
.ch-card:hover { transform: translateY(-2px); border-color: var(--clr-primary); }

.ch-card-accent {
  width: 5px; flex-shrink: 0;
}
.ch-card-accent.diff-easy    { background: #2ED573; }
.ch-card-accent.diff-medium  { background: #FFC107; }
.ch-card-accent.diff-hard    { background: #FF4757; }
.ch-card-accent.diff-extreme { background: #9B59B6; }
.ch-card-accent.diff-god     { background: linear-gradient(#f7971e,#ffd200); }

.ch-card-body { flex:1; padding: 14px 16px 12px; display:flex; flex-direction:column; gap:8px; }

.ch-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ch-card-title { font-size:1rem; font-weight:800; color:var(--txt); margin-bottom:6px; }
.ch-card-meta { display:flex; align-items:center; gap:8px; }
.diff-pill {
  font-size:0.62rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.07em; padding:3px 8px; border-radius:6px; color:#fff;
}
.diff-pill.diff-easy    { background:#2ED573; }
.diff-pill.diff-medium  { background:#FFC107; color:#111; }
.diff-pill.diff-hard    { background:#FF4757; }
.diff-pill.diff-extreme { background:#9B59B6; }
.diff-pill.diff-god     { background:linear-gradient(135deg,#f7971e,#ffd200); color:#111; }
.ch-reward { font-size:0.82rem; font-weight:700; color:var(--clr-accent); }

.ch-play-btn {
  flex-shrink:0;
  background: var(--clr-primary);
  color:#fff;
  border:none;
  border-radius:10px;
  padding: 10px 16px;
  font-size:0.85rem; font-weight:800;
  cursor:pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ch-play-btn:hover { background:#5a4dd4; transform:scale(1.05); }

.ch-card-bottom { display:flex; align-items:center; }
.ch-countdown {
  font-size:0.75rem; color:var(--txt-muted);
}
.ch-countdown.urgent { color:#FF4757; font-weight:700; }

.ch-empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; flex:1;
  padding: 48px 24px;
  text-align:center;
  gap:12px;
}
.ch-empty-icon { font-size:3.5rem; }
.ch-empty-title { font-size:1.1rem; font-weight:800; color:var(--txt); }
.ch-empty-sub { font-size:0.85rem; color:var(--txt-muted); line-height:1.5; }

/* ── Badges Modal ───────────────────────────────────────────── */
.badges-card {
  width: min(440px, 100%);
  max-height: 88vh;
  padding: 24px 20px;
  gap: 0;
}
.badges-title { font-size:1.2rem; font-weight:900; text-align:center; margin-bottom:16px; }

.badges-summary {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  text-align:center;
}
.bs-earned { font-size:1.6rem; font-weight:900; color:var(--clr-accent); }
.bs-label  { font-size:0.75rem; color:var(--txt-muted); margin-bottom:10px; }
.bs-progress-track {
  height:6px; background:var(--border);
  border-radius:10px; overflow:hidden; margin-bottom:8px;
}
.bs-progress-fill {
  height:100%;
  background: linear-gradient(90deg,#FFC107,#FF9800);
  border-radius:10px;
  transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.bs-next-hint { font-size:0.75rem; color:var(--txt-muted); }

.badges-grid {
  display:grid; grid-template-columns: repeat(2,1fr);
  gap:10px; overflow-y:auto; max-height:52vh;
}

.badge-card {
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 12px;
  display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center;
  transition: transform 0.15s, border-color 0.2s;
}
.badge-card.earned {
  border-color: #FFC10760;
  background: rgba(255,193,7,0.05);
}
.badge-card.earned:hover { transform:translateY(-2px); }
.badge-card.locked { opacity:0.6; }

.badge-icon-wrap {
  width:56px; height:56px;
  border-radius:50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
}
.badge-icon-wrap.earned-glow {
  border-color: #FFC107;
  box-shadow: 0 0 16px rgba(255,193,7,0.4);
}

.badge-name { font-size:0.85rem; font-weight:800; color:var(--txt); }
.badge-desc { font-size:0.7rem; color:var(--txt-muted); line-height:1.4; }

.badge-earned-tag {
  font-size:0.68rem; font-weight:800;
  color:#2ED573;
  background: rgba(46,213,115,0.12);
  border: 1px solid rgba(46,213,115,0.3);
  padding: 2px 10px; border-radius:20px;
}

.badge-progress-row { display:flex; align-items:center; gap:6px; width:100%; margin-top:2px; }
.badge-mini-bar {
  flex:1; height:4px;
  background: var(--border);
  border-radius:10px; overflow:hidden;
}
.badge-mini-fill {
  height:100%;
  background: var(--clr-primary);
  border-radius:10px;
}
.badge-mini-label { font-size:0.62rem; color:var(--txt-muted); white-space:nowrap; font-weight:700; }