/* AUDIO_PROGRESS_V17_20260915 */

/* The old XP/level bar is now a child-friendly 3-word treasure meter. */
.level-wrap{max-width:470px;min-width:250px}
.level-row{align-items:center;gap:10px;margin:0 4px 6px}
#levelLabel{font-size:11px;font-weight:950;color:#5f5363;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#xpLabel{font-size:10px;font-weight:950;color:#80657c;white-space:nowrap;background:#fff7fb;border-radius:999px;padding:4px 8px;box-shadow:inset 0 0 0 1px #ead9e6}
.xp-track{position:relative;height:15px;background:#ece5ec;box-shadow:inset 0 2px 4px #493a5314;overflow:hidden}
.xp-track:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent 32.5%,#fff9 32.5% 34%,transparent 34% 65.8%,#fff9 65.8% 67.3%,transparent 67.3%)}
.xp-fill{position:relative;z-index:1;background:linear-gradient(90deg,#efb5c8,#efcf82,#96bd91);box-shadow:0 0 12px #e8bb9370;transition:width .48s cubic-bezier(.2,.8,.2,1)}

/* One simple master sound control. On by default; tap to mute both BGM + effects. */
.music-toggle{position:relative;width:43px;height:43px;min-width:43px;border:0;border-radius:15px;background:#fff7df;color:#735d36;box-shadow:0 8px 20px #59451e20,inset 0 0 0 1px #fff;font-size:20px;font-weight:950;display:grid;place-items:center;transition:transform .16s ease,background .2s ease,opacity .2s ease}
.music-toggle:not(.off){animation:soundAlive 2.8s ease-in-out infinite}
.music-toggle.off{background:#eee9ed;color:#8f868d;opacity:.72;animation:none}
.music-toggle.off:after{content:"";position:absolute;width:27px;height:2px;border-radius:999px;background:#9c7378;transform:rotate(-42deg)}
@keyframes soundAlive{0%,100%{box-shadow:0 8px 20px #59451e20,inset 0 0 0 1px #fff}50%{box-shadow:0 8px 20px #59451e20,0 0 0 5px #f6d77d24,inset 0 0 0 1px #fff}}

/* Physical-feeling button press feedback across Garden / Play / Parent. */
button:not(:disabled){transition:transform .11s ease,filter .14s ease,box-shadow .14s ease}
button:not(:disabled):active{transform:translateY(2px) scale(.975);filter:saturate(1.06)}
.choice-btn:not(:disabled):active,.assist-btn:not(:disabled):active,.listen-card:not(:disabled):active,.word-sound-button:not(:disabled):active{transform:translateY(2px) scale(.97)}
button:disabled{opacity:.55;cursor:default}

/* XP is no longer presented to Miori; this pill shows distance to the next treasure. */
.session-xp{min-width:128px;text-align:center;background:linear-gradient(135deg,#fff4d8,#f8e8f1);color:#755d69;box-shadow:inset 0 0 0 1px #fff;font-size:10px;letter-spacing:.01em}

/* Visible Apple Pencil scratch trail while crossing out a written letter. */
.written-box{position:relative;overflow:visible}
.scratch-trail{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);z-index:8;pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 1px #ffffffcc)}
.scratch-trail polyline{fill:none;stroke:#a8799b;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;opacity:.84}
.written-box.scratch-active{background:#fff6fb!important;border-color:#c99ab9!important;box-shadow:inset 0 0 0 2px #f3d6e8,0 0 0 4px #f0d7e52e!important}

/* Dragging garden items feels more alive. */
.garden-object.dragging{filter:drop-shadow(0 16px 14px #44372732) brightness(1.04)}
.garden-object.drop-pop{animation:gardenDropPop .32s cubic-bezier(.2,.9,.2,1)}
@keyframes gardenDropPop{0%{scale:.9}65%{scale:1.08}100%{scale:1}}

@media(max-width:820px){
  .level-wrap{min-width:210px;max-width:350px}.music-toggle{width:39px;height:39px;min-width:39px}.session-xp{min-width:108px;font-size:9px}
}
@media(max-width:690px){
  #levelLabel{font-size:9px}#xpLabel{font-size:8px;padding:3px 6px}.level-wrap{min-width:170px}.xp-track{height:12px}
}