/* ---------- Clean Up ---------- */
.cl { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.cl-scene { position: absolute; inset: 0; background-size: cover; background-position: center bottom; transition: opacity .45s; }
.cl-scene.cl-fade { opacity: 0; }
.cl-stage { position: absolute; inset: 0; touch-action: none; }
.cl-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.cl-item { position: absolute; width: clamp(64px, 12vh, 130px); transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(var(--r, 0deg)); z-index: 5; }
.cl-item img { width: 100%; display: block; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18)); pointer-events: none; }
.cl-dirt { z-index: 3; width: clamp(80px, 15vh, 170px); transition: opacity .1s; }
.cl-dirt img { filter: none; transform: scale(var(--w, 1)); }
.cl-lit { animation: cl-wob 2.4s ease-in-out infinite alternate; }
.cl-lit.cl-drag { z-index: 12; animation: none; transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 1.15)) rotate(var(--r, 0deg)); }
.cl-lit.cl-drag img { filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .28)); }
.cl-back { transition: left .35s cubic-bezier(.34, 1.56, .64, 1), top .35s cubic-bezier(.34, 1.56, .64, 1); }
.cl-eaten { transition: left .22s ease-in, top .22s ease-in; animation: cl-eat .28s ease-in forwards; }
.cl-gone { animation: cl-gone .45s ease-out forwards; pointer-events: none; }
.cl-pop { animation: cl-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.cl-nudge { animation: cl-nudge .7s ease-in-out 2; }
@keyframes cl-wob { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes cl-eat { to { transform: translate(-50%, -50%) scale(.1) rotate(180deg); opacity: 0; } }
@keyframes cl-gone { to { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
@keyframes cl-pop { from { transform: translate(-50%, -50%) scale(0); } }
@keyframes cl-nudge { 0%, 100% { translate: 0 0; } 25% { translate: -8px 0; } 75% { translate: 8px 0; } }
.cl-tool { position: absolute; z-index: 25; width: clamp(80px, 14vh, 150px); pointer-events: none; transform: translate(-30%, -75%) rotate(-15deg); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); animation: cl-scrub .16s ease-in-out infinite alternate; }
@keyframes cl-scrub { from { rotate: -8deg; } to { rotate: 8deg; } }
.cl-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; z-index: 15; }
.cl-score { display: flex; align-items: center; gap: 8px; padding: 6px 20px 6px 12px; border-radius: 40px; background: #fff; box-shadow: var(--shadow); font-size: 42px; line-height: 1; color: var(--ink); }
.cl-score .ico { width: 46px; height: 46px; }
.cl-stars.bump { display: inline-block; animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
.cl-progress { width: clamp(110px, 20vw, 240px); height: 24px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.cl-progress i { display: block; height: 100%; width: 0; border-radius: 12px; background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .4s; }
.cl-next { width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--p, 0) * 360deg), #eee4f2 0); display: grid; place-items: center; position: relative; box-shadow: var(--shadow); }
.cl-next::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.cl-next img { position: relative; width: 66%; height: 66%; object-fit: cover; border-radius: 50%; filter: grayscale(.7); opacity: .85; }
.cl-bin { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); width: clamp(120px, 26vh, 200px); z-index: 10; transition: transform .2s; }
.cl-bin img { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.cl-bin.cl-hungry { transform: scale(1.12) rotate(-4deg); }
.cl-wobble { animation: cl-wobble .5s ease; }
@keyframes cl-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 60% { rotate: 7deg; } }
.cl-robot { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); width: clamp(84px, 16vh, 130px); aspect-ratio: 1; z-index: 10; border-radius: 50%; padding: 7px; background: conic-gradient(var(--green) calc(var(--p, 0) * 360deg), #eee4f2 0); box-shadow: var(--shadow); }
.cl-robot img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: #fff; display: block; }
.cl-robot.cl-ready { animation: pulse-plain 1.2s ease-in-out infinite; }
.cl-robot.cl-robot-out img { opacity: .35; }
.cl-bot { width: clamp(84px, 16vh, 130px); transition: left 1.2s linear, top 1.2s linear; z-index: 8; }
.cl-bot img { animation: cl-scrub .3s ease-in-out infinite alternate; }
.cl-visitor-el { width: clamp(90px, 18vh, 170px); transition: left 7s linear; z-index: 9; }
.cl-visitor-el img { transform: scaleX(var(--flip, 1)); animation: cl-walk .35s ease-in-out infinite alternate; }
.cl-vis-seagull img { animation: cl-flap .3s ease-in-out infinite alternate; }
.cl-shooed { animation: cl-shoo .6s ease-in forwards; pointer-events: none; }
@keyframes cl-walk { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes cl-flap { from { translate: 0 -6px; rotate: -4deg; } to { translate: 0 6px; rotate: 4deg; } }
@keyframes cl-shoo { to { transform: translate(-50%, -300%) scale(.4) rotate(40deg); opacity: 0; } }
.cl-puff { position: absolute; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); animation: cl-puff .7s ease-out forwards; }
.cl-puff-bubble { background: radial-gradient(circle at 35% 35%, #fff, rgba(180, 230, 255, .8) 60%, rgba(120, 200, 255, .5)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.cl-puff-dust { background: radial-gradient(circle, rgba(200, 190, 180, .9), rgba(200, 190, 180, 0) 70%); width: 34px; height: 34px; }
@keyframes cl-puff { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -160%) scale(1.6); } }
.cl-spark { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--yellow)); transform: translate(-50%, -50%); animation: cl-spark .65s ease-out forwards; }
@keyframes cl-spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; } }
.cl-starfly { position: absolute; width: 44px; transform: translate(-50%, -50%); animation: cl-tostar .85s ease-in forwards; }
.cl-starfly .ico { width: 100%; }
@keyframes cl-tostar { to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.5); } }
.cl-unlock { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: rgba(255, 255, 255, .22); }
.cl-unlock-card { width: clamp(200px, 44vh, 320px); aspect-ratio: 1; border-radius: 40px; background: #fff; border: 8px solid var(--yellow); box-shadow: var(--shadow); display: grid; place-items: center; animation: cl-card .6s cubic-bezier(.34, 1.56, .64, 1); }
.cl-unlock-card img { width: 80%; height: 80%; object-fit: contain; }
.cl-unlock.cl-unlock-scene .cl-unlock-card { width: min(60vw, 520px); aspect-ratio: 16 / 10; }
.cl-unlock.cl-unlock-scene .cl-unlock-card img { width: 92%; height: 88%; object-fit: cover; border-radius: 22px; }
@keyframes cl-card { from { transform: scale(0) rotate(-12deg); } }
.cl-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(120, 90, 150, .55); animation: fadein .18s ease-out; }
.cl-panel { width: min(92%, 980px); max-height: 86%; overflow-y: auto; border-radius: 30px; background: #fff; box-shadow: var(--shadow); padding: 18px; animation: slidein .22s ease-out; -webkit-overflow-scrolling: touch; }
.cl-close { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); }
.cl-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cl-scene-card { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 5px solid #ece4f6; background: #f6f0ff; box-shadow: 0 6px 0 rgba(120, 70, 140, .14); transition: transform .12s; }
.cl-scene-card:active { transform: scale(.94); }
.cl-scene-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-scene-card.active { border-color: var(--yellow); box-shadow: 0 6px 0 #f4c20d; }
.cl-scene-card.cl-locked img { filter: grayscale(1); opacity: .4; }
.cl-scene-card.cl-locked::after { content: ""; position: absolute; left: 50%; top: 40%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(../assets/img/ui_lock.png) center / contain no-repeat; }
.cl-price { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 2px 12px 2px 6px; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); font-size: 24px; color: var(--ink); }
.cl-price .ico { width: 30px; height: 30px; }
.cl-done-panel { width: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 40px; }
.cl-done-stars { display: flex; align-items: center; gap: 12px; font-size: 72px; line-height: 1; color: var(--ink); }
.cl-done-stars .ico { width: 80px; height: 80px; }
.cl-done-row { display: flex; gap: 24px; }
.cl-done-row .round-btn { width: 110px; height: 110px; }
.cl-done-row .round-btn .ico { width: 62%; height: 62%; }
@media (orientation: portrait) {
  .cl-top { flex-wrap: wrap; justify-content: center; width: 70%; }
  .cl-item { width: clamp(56px, 9vh, 110px); }
  .cl-dirt { width: clamp(70px, 11vh, 140px); }
}