#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden;contain:strict}
.juice-fx{position:absolute;left:0;top:0;width:var(--size);height:var(--size);pointer-events:none;will-change:transform,opacity;opacity:0}
.juice-fx.star{object-fit:contain;filter:drop-shadow(0 0 10px #f2c141aa)}
.juice-fx.spark{background:#f2c141;border-radius:30%;box-shadow:0 0 9px #fff8d1}
.juice-fx.pearl{border-radius:50%;background:#fff8e6;box-shadow:0 0 8px #e9bfa4}
.juice-fx.bubble{border:2px solid #fff8e6bb;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffffffa0,transparent 45%);box-shadow:inset 0 0 6px #f9dfa755}
.juice-fx.bloom{border-radius:50%;background:radial-gradient(#ffedb1,transparent 68%);mix-blend-mode:screen}
.bubble-stream{position:absolute;bottom:8%;width:45px;height:160px;opacity:0;animation:reef-rise 14s linear infinite}
.bubble-stream.left{left:2%}.bubble-stream.right{right:2%;animation-delay:7s}
.bubble-stream b{position:absolute;width:15px;height:15px;border:1px solid #fff8e688;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff8e677,transparent 50%)}
.bubble-stream b:nth-child(2){left:24px;top:65px;width:9px;height:9px}.bubble-stream b:nth-child(3){left:5px;top:120px;width:20px;height:20px}
.fx-paused *{animation-play-state:paused!important}
.fx-paused .juice-fx{visibility:hidden}
.juice-idle{animation:juice-breathe 2.8s ease-in-out infinite!important}
.slot{animation:none}
@keyframes treasure-settle{0%{transform:translateY(-12px) scale(.75);opacity:.5}65%{transform:translateY(2px) scale(1.08,.94);opacity:1}100%{transform:none;opacity:1}}
@keyframes juice-breathe{50%{transform:scale(1.045)}}
@keyframes reef-rise{0%{transform:translateY(50px) translateX(0);opacity:0}15%{opacity:.4}80%{opacity:.3}100%{transform:translateY(-70vh) translateX(20px);opacity:0}}
@media(prefers-reduced-motion:reduce){#reef-ambient,.juice-fx{display:none}.juice-idle,.slot{animation:none!important}}

.success .hero img{animation:none}
.panel{overflow-x:hidden}
.reduce-motion #reef-ambient,.reduce-motion .juice-fx{display:none}
.reduce-motion *{animation:none!important;transition:none!important}

/* Layered pearl ripples and a warm comet trail; all hit testing stays on the game. */
.juice-fx.ring,.juice-fx.pearl-ring{border:3px solid #edcb74;border-radius:50%;box-shadow:0 0 15px #f2c14166,inset 0 0 12px #fff8e655}
.juice-fx.pearl-ring{border:2px solid #fff8e6bb;box-shadow:0 0 10px #fff8e644}
#reef-ambient:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 5%,#fff4c912 12%,transparent 22%,transparent 80%,#fff4c919 92%,transparent);animation:reef-light 12s ease-in-out infinite;pointer-events:none}
@keyframes reef-light{0%,100%{transform:translateX(-2%);opacity:.3}50%{transform:translateX(2%);opacity:.8}}
#rounds .round-star.current:last-child{animation:juice-breathe 3s ease-in-out infinite}
.fx-paused #reef-ambient::before{animation-play-state:paused!important}

/* Make the second decision visibly interactive after the treasures are sorted. */
#game[data-stage="compare"] .column{cursor:pointer}
#game[data-question="same"] .column{cursor:default}
.needs-choice:not([data-question="same"]) .column .category,
.needs-choice[data-question="same"] #relations button{outline:2px solid #d4b478;outline-offset:2px}
.needs-choice:not([data-question="same"]) .column,
.needs-choice[data-question="same"] #relations button{animation:choice-invitation 1.2s ease-in-out 2}
@keyframes choice-invitation{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.needs-choice .column,.needs-choice #relations button{animation:none!important}}