/* ---------- Sound Box ---------- */
.sbx { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; }
.sbx-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sbx-bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 250, 245, .35); }
.sbx-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.sbx-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 15; }
.sbx-score { display: flex; align-items: center; gap: 8px; padding: 6px 20px 6px 12px; border-radius: 40px; background: #fff; box-shadow: var(--shadow); font-size: 40px; line-height: 1; color: var(--ink); }
.sbx-score .ico { width: 44px; height: 44px; }
.sbx-stars.bump { display: inline-block; animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
.sbx-next, .sbx-fun { width: 60px; height: 60px; flex: none; 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); }
.sbx-fun { background: conic-gradient(var(--blue) calc(var(--p, 0) * 360deg), #e4eef8 0); }
.sbx-next::before, .sbx-fun::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.sbx-next img, .sbx-fun img { position: relative; width: 62%; height: 62%; object-fit: contain; }
.sbx-next img { filter: grayscale(.7); opacity: .85; }
/* slow / normal / fast */
.sbx-speeds { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 12; }
.sbx-speed { width: clamp(58px, 10vh, 78px); height: clamp(58px, 10vh, 78px); opacity: .75; }
.sbx-speed.active { opacity: 1; box-shadow: 0 0 0 5px var(--yellow), var(--shadow); background: linear-gradient(135deg, #fff, #fff3c4); }
.sbx[data-mode="quiz"] .sbx-speeds { display: none; }
/* the pads */
.sbx-main { position: absolute; left: clamp(84px, 13vh, 110px); right: clamp(84px, 13vh, 110px); top: clamp(92px, 14vh, 112px); bottom: clamp(84px, 14vh, 112px); display: grid; place-items: center; }
/* the grid fills the space between the top bar and the page tabs; fixed tracks, so the pictures can never push a row out of it */
.sbx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.8vh, 16px); width: min(100%, 1000px); height: 100%; }
.sbx-pad { position: relative; min-width: 0; min-height: 0; border-radius: 26px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c) 30%, #fff)); border: 5px solid var(--c); box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 70%, #5b3a6b), 0 12px 18px rgba(120, 70, 140, .18); display: grid; place-items: center; transition: transform .1s, box-shadow .1s; animation: sbx-in .4s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--i) * 25ms); }
@keyframes sbx-in { from { transform: scale(.3); opacity: 0; } }
.sbx-pad { overflow: visible; } .sbx-pad img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.sbx-pad.hit { animation: sbx-hit .3s ease-out; }
@keyframes sbx-hit { 35% { transform: translateY(6px) scale(.94); } }
.sbx-pad.on { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c) 60%, #fff)); }
.sbx-pad.on img { animation: sbx-jig .32s ease-in-out infinite alternate; }
@keyframes sbx-jig { from { transform: rotate(-5deg) scale(1.04); } to { transform: rotate(5deg) scale(1.1); } }
.sbx-pad i { position: absolute; inset: -4px; border-radius: 28px; border: 4px solid var(--c); opacity: 0; pointer-events: none; }
.sbx-pad.on i { animation: sbx-ring 1s ease-out infinite; } .sbx-pad.on i + i { animation-delay: .5s; }
@keyframes sbx-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.22); } }
/* page tabs */
.sbx-tabs { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; padding: 8px 12px; border-radius: 40px; background: rgba(255, 255, 255, .88); box-shadow: var(--shadow); z-index: 12; max-width: calc(100% - 16px); }
.sbx-tab { position: relative; width: clamp(50px, 9vh, 72px); aspect-ratio: 1; flex: 0 1 auto; min-width: 0; border-radius: 20px; background: color-mix(in srgb, var(--c) 35%, #fff); border: 4px solid var(--c); display: grid; place-items: center; transition: transform .12s; }
.sbx-tab img { width: 82%; height: 82%; object-fit: contain; }
.sbx-tab.active { transform: translateY(-8px) scale(1.08); box-shadow: 0 6px 0 var(--c); background: #fff; }
.sbx-tab .sbx-price { display: none; }
.sbx-tab.sbx-locked > img { filter: grayscale(1); opacity: .35; }
.sbx-tab.sbx-locked { border-color: #d8cfe2; background: #f1ecf6; }
.sbx-tab.sbx-locked::after { content: ""; position: absolute; left: 50%; top: 44%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(../assets/img/ui_lock.png) center / contain no-repeat; }
.sbx-tab.sbx-locked .sbx-price { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 0 7px 0 3px; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); font-size: 16px; color: var(--ink); white-space: nowrap; }
.sbx-price .ico { width: 19px; height: 19px; }
.sbx[data-mode="quiz"] .sbx-tabs { display: none; }
/* surprise box */
.sbx-surprise { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(120, 90, 150, .45); animation: fadein .18s ease-out; }
.sbx-lid, .sbx-prize { grid-area: 1 / 1; width: min(46vh, 50vw); aspect-ratio: 1; }
.sbx-lid img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .25)); }
.sbx-surprise.rattle .sbx-lid { animation: sbx-rattle .16s linear infinite; }
@keyframes sbx-rattle { 0% { transform: rotate(-5deg) translateX(-6px); } 50% { transform: rotate(5deg) translateX(6px); } 100% { transform: rotate(-5deg) translateX(-6px); } }
.sbx-prize { object-fit: contain; opacity: 0; transform: scale(.2); padding: 4%; border-radius: 40px; background: #fff; border: 8px solid var(--yellow); box-shadow: var(--shadow); }
.sbx-surprise.open .sbx-lid { animation: sbx-lidoff .5s ease-in forwards; }
@keyframes sbx-lidoff { to { transform: translateY(-120vh) rotate(40deg); opacity: 0; } }
.sbx-surprise.open .sbx-prize { opacity: 1; transform: scale(1); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.sbx-prize.on { animation: sbx-jig .32s ease-in-out infinite alternate; }
/* listening game */
.sbx[data-mode="quiz"] .sbx-main { left: 16px; right: 16px; bottom: 16px; }
.sbx-quiz { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 4vh, 36px); }
.sbx-speaker { position: relative; width: clamp(110px, 22vh, 170px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 6px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.sbx-speaker img { width: 74%; height: 74%; object-fit: contain; }
.sbx-speaker i { position: absolute; left: 100%; top: 50%; width: 12px; height: 26%; margin-left: 10px; border-radius: 0 40px 40px 0; border: 5px solid var(--purple); border-left: 0; transform: translateY(-50%); opacity: .25; }
.sbx-speaker i:nth-of-type(2) { margin-left: 28px; height: 44%; } .sbx-speaker i:nth-of-type(3) { margin-left: 46px; height: 62%; }
.sbx-speaker.on { animation: pulse-plain .5s ease-in-out infinite; } .sbx-speaker.on i { animation: sbx-wave .6s ease-in-out infinite; } .sbx-speaker.on i:nth-of-type(2) { animation-delay: .15s; } .sbx-speaker.on i:nth-of-type(3) { animation-delay: .3s; }
@keyframes sbx-wave { 50% { opacity: .95; } }
.sbx-choices { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.6vw, 34px); width: 100%; }
.sbx-choice { width: min(24vw, 42vh, 300px); aspect-ratio: 1; border-radius: 36px; background: rgba(255, 255, 255, .94); border: 6px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .12s, opacity .3s; }
.sbx-choice img { width: 84%; height: 84%; object-fit: contain; }
.sbx-choice:active { transform: scale(.95); }
.sbx-choice.dim { opacity: .35; }
.sbx-choice.right { border-color: #6ddc7a; box-shadow: 0 0 0 6px rgba(109, 220, 122, .5), var(--shadow); animation: sbx-yes .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes sbx-yes { 50% { transform: scale(1.1); } }
.sbx-choice.shake { animation: sbx-shake .4s; }
@keyframes sbx-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
/* stars and the new-page card */
.sbx-starfly { position: absolute; width: 44px; transform: translate(-50%, -50%); animation: sbx-tostar .85s ease-in forwards; }
.sbx-starfly .ico { width: 100%; }
@keyframes sbx-tostar { to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.5); } }
.sbx-unlock { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: rgba(255, 255, 255, .22); }
.sbx-unlock-card { width: clamp(220px, 48vh, 360px); aspect-ratio: 1; padding: 4%; border-radius: 40px; background: #fff; border: 8px solid var(--yellow); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 4%; animation: sbx-card .6s cubic-bezier(.34, 1.56, .64, 1); }
.sbx-unlock-card img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
@keyframes sbx-card { from { transform: scale(0) rotate(-12deg); } }
@media (orientation: portrait) {
  .sbx-main { left: 12px; right: 12px; top: clamp(150px, 19vh, 190px); bottom: clamp(150px, 20vh, 190px); }
  .sbx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .sbx-speeds { flex-direction: row; top: clamp(88px, 12vh, 104px); left: 50%; transform: translateX(-50%); }
  .sbx-tabs { flex-wrap: wrap; justify-content: center; width: calc(100% - 16px); border-radius: 28px; }
  .sbx-choices { flex-wrap: wrap; } .sbx-choice { width: min(40vw, 24vh); }
}