.autumn-atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:20}
.autumn-particle{position:absolute;top:-50px;line-height:1;opacity:0;animation:autumn-drift linear forwards;will-change:transform;filter:drop-shadow(0 2px 3px #0002)}
@keyframes autumn-drift{0%{transform:translate3d(0,0,0) rotate(-15deg);opacity:0}8%{opacity:.65}45%{transform:translate3d(var(--drift),48vh,0) rotate(55deg)}88%{opacity:.65}100%{transform:translate3d(0,calc(100vh + 100px),0) rotate(var(--turn));opacity:0}}
.atmosphere-controls{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:12px;z-index:30;display:flex;gap:5px;align-items:center;padding:5px;border:1px solid #eee3cb55;border-radius:10px;background:#14251ef2;box-shadow:0 3px 14px #0003;color:#fff5df}
.atmosphere-controls button{font:600 14px/1.2 Arial,sans-serif;color:inherit;background:transparent;border:0;border-radius:6px;min-height:36px;padding:8px 10px;cursor:pointer}
.atmosphere-controls button:hover{background:#ffffff18}
.atmosphere-controls button:focus-visible{outline:2px solid #efbc75;outline-offset:1px}
.atmosphere-status:not(:empty){position:absolute;bottom:100%;left:0;width:240px;padding:10px;background:#14251e;font:14px/1.4 Arial,sans-serif}
body{padding-bottom:64px}
@media(max-width:700px){.atmosphere-controls{bottom:max(8px,env(safe-area-inset-bottom));left:8px}.atmosphere-controls button{min-height:40px}}
.music-bob{display:block;transform:translateY(var(--music-lift,0px)) rotate(var(--music-tilt,0deg)) scale(var(--music-scale,1));transform-origin:50% 90%}
.character-cameo{position:absolute;pointer-events:none;opacity:0;transform:translateY(14px) scale(.94);transition:opacity .22s ease-out,transform .28s ease-out;transform-origin:50% 100%}
.character-cameo.is-playing{opacity:1;transform:translateY(0) scale(1)}
.character-cameo.is-leaving{opacity:0;transform:translateY(12px) scale(.97)}
.character-canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 4px #0002);transform:translateY(var(--music-lift,0px));transform-origin:50% 100%}
.character-source{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:700px){.atmosphere-controls{max-width:calc(100vw - 16px);flex-wrap:wrap}.atmosphere-controls button{font-size:14px;padding:8px}}
@media(prefers-reduced-motion:reduce){.autumn-atmosphere{display:none}}