#activity, #result { background: linear-gradient(160deg, #e9f6ff, #fff3e6); }
#activity { display: flex; flex-direction: column; padding: 20px 36px 28px; }
.activity-header { display: flex; align-items: center; gap: 20px; }
.activity-counter { font-weight: 700; font-size: 1.4rem; min-width: 70px; text-align: center; }
.progress { flex: 1; height: 18px; background: #fff; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.06); }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--mint), var(--primary)); transform-origin: left; transform: scaleX(0); transition: transform 0.4s ease; }
.timer-ring {
  --left: 1; width: 64px; height: 64px; border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(var(--secondary) calc(var(--left) * 360deg), #ffffff 0);
  box-shadow: var(--shadow);
}
.timer-ring::after {
  content: attr(data-seconds); position: absolute; inset: 8px; border-radius: 50%; background: var(--card);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem;
}
.activity-stage { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ---------- resultado ---------- */
#result { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.result-card {
  position: relative; z-index: 1; background: var(--card); border-radius: 36px; padding: 28px 44px;
  width: min(760px, calc(var(--app-w) * 0.92)); max-height: calc(var(--app-h) * 0.94); display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--shadow-soft);
}
.result-stars { display: flex; gap: 10px; font-size: 4.2rem; line-height: 1; }
.result-star { color: #e4e0f0; transition: transform 0.3s; }
.result-star.on { color: var(--gold); animation: star-pop 0.45s ease-out; }
@keyframes star-pop { 0% { transform: scale(0.3) rotate(-30deg); } 70% { transform: scale(1.3); } 100% { transform: none; } }
.result-title { margin: 4px 0 0; font-size: 2.2rem; }
.result-score { margin: 0; font-size: 1.3rem; color: var(--muted); }
.result-coins { margin: 4px 0; font-size: 2.2rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.result-coins .coin { width: 44px; height: 44px; }
.result-nocoins { margin: 4px 0; font-size: 1.2rem; }
.result-mastered {
  margin: 2px 0; font-size: 1.5rem; font-weight: 700; color: #b8860b;
  background: #fff6d6; padding: 6px 18px; border-radius: 999px; animation: star-pop 0.6s ease-out;
}
.result-list {
  list-style: none; padding: 0; margin: 6px 0; columns: 2; column-gap: 32px; font-size: 1.15rem;
  overflow-y: auto; max-height: calc(var(--app-h) * 0.3); width: 100%;
}
.result-list li { padding: 3px 0; break-inside: avoid; }
.result-list li.ko { color: var(--wrong-dark); }
.result-actions { display: flex; gap: 18px; margin-top: 8px; }
.coin-rain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rain-coin { position: absolute; top: -60px; width: 44px; height: 44px; font-size: 2.4rem; animation: coin-fall 1.8s ease-in forwards; }
@keyframes coin-fall { to { transform: translateY(calc(var(--app-h) * 1.1)) rotate(540deg); } }