/* Requested coin progress: one coin represents one completed task. */
.hud .level-path { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.hud .round-progress { grid-column: 3; }
.hud .task-coin, .fx-coin {
  position: relative; display: block; flex: 0 0 auto; border-radius: 50%;
  width: clamp(1.65rem, 3vw, 2.3rem); aspect-ratio: 1;
  background: linear-gradient(135deg, #fff8ce 4%, #ffde76 24%, #e6a42b 58%, #ffe897 80%, #b97820);
  border: 2px solid #bd802d; box-shadow: inset 0 0 0 2px #ffe89a, 0 3px 0 #9c6323, 0 5px 8px #55351935;
  filter: none; opacity: 1;
}
.coin-face { position: absolute; inset: 17%; border: 1px solid #b97d28; border-radius: 50%; box-shadow: inset 1px 1px 2px #9f631840, 0 1px 0 #fff3b4; }
.coin-face::after { content: ''; position: absolute; left: 30%; top: 16%; width: 35%; height: 58%; border-radius: 80% 10% 80% 10%; transform: rotate(28deg); background: #bd812d; box-shadow: 1px 1px 0 #fff3ac; }
.hud .task-coin:not(.done) { background: #ddc79d; box-shadow: inset 0 2px 4px #69452355; border: 2px dashed #ac8550; transform: none; }
.hud .task-coin:not(.done) .coin-face { opacity: .38; }
.hud .task-coin.current { border-style: solid; border-color: #d99c39; background: #f8e6bb; }
.hud .task-coin.done { filter: drop-shadow(0 0 5px #f2c14190); }
.hud .task-coin.done .coin-face::before { content: ''; position: absolute; z-index: 2; right: -40%; bottom: -34%; width: 42%; height: 20%; border-left: 2px solid #68431c; border-bottom: 2px solid #68431c; transform: rotate(-45deg); }
#fx-layer { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; contain: layout style; }
#fx-layer * { pointer-events: none !important; }
.fx-particle, .fx-coin, .fx-ring, .fx-thought, .fx-straw { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.fx-particle { width: 9px; height: 15px; border-radius: 75% 12% 75% 12%; background: var(--particle-color, #f2c141); }
.fx-coin { width: 56px; max-width: none; }
.fx-ring { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #ffe6a0; box-shadow: 0 0 22px #f2c14166, inset 0 0 18px #f2c14133; }
.fx-thought { color: #80572f; background: #fff8e6; border-radius: 50%; padding: 5px 12px; font-size: 24px; box-shadow: 0 3px 0 #c98f5a; }
.fx-straw { width: 8px; height: 38px; border-radius: 90%; background: #d9b565; }
.fx-bloom { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #fff5c1a0, #f2c14120 45%, transparent 72%); opacity: 0; }
.juice-idle { animation: juiceBreathe 2.4s ease-in-out infinite !important; }
.game-shell[data-state="playing"] .task-coin.current:last-child { animation: juiceBreathe 2.8s ease-in-out infinite; }
.game-shell:is([data-state="playing"], [data-state="hint"]) .muva.juice-beat { animation: none; }
.game-shell:is([data-state="menu"], [data-state="paused"]) * { animation-play-state: paused !important; }
.game-shell:is([data-state="level-complete"], [data-state="game-complete"]) .reward-panel { isolation: isolate; }
.game-shell:is([data-state="level-complete"], [data-state="game-complete"]) .reward-panel::before {
  content: ''; position: absolute; inset: -12%; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse, #ffe5a35c, transparent 70%); animation: juiceCurtain 1.2s ease-out both;
}
.ambient-motes i:nth-child(1) { left: 1%; top: 40%; }
.ambient-motes i:nth-child(2) { left: 96%; top: 34%; }
.ambient-motes i:nth-child(3) { left: 92%; top: 75%; }
@keyframes juiceBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
@keyframes juiceCurtain { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@media (orientation: portrait) {
  .hud .level-path { top: clamp(3.35rem, 14vw, 4rem); grid-column: auto; min-height: 2.4rem; padding: .2rem .9rem; gap: .55rem; }
  .hud .round-progress { top: 0; right: 0; min-height: 3rem; padding: .25rem .5rem; gap: .35rem; }
  .hud .task-coin { width: clamp(1.55rem, 6.7vw, 1.9rem); }
  .hud .level-marker { width: 1.3rem; height: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .juice-idle, .task-coin, .reward-panel::before { animation: none !important; }
  #fx-layer { display: none; }
}