/* The canvas is a room in the same game, opened without losing village progress. */
#compose-song{pointer-events:auto;min-height:44px;border:1px solid #fff9;border-radius:24px;background:#fff9ec;color:#65538a;padding:9px 16px;box-shadow:0 4px 18px #46614a17;white-space:nowrap;font:16px Jua,sans-serif}
#song-card{position:fixed;left:28px;top:92px;z-index:4;width:174px;padding:7px 7px 9px;border:1px solid #fff9;border-radius:17px;background:#fffaf0eF;box-shadow:0 6px 24px #335b4b20;color:#665180;transform:rotate(-2deg);transition:transform .18s}
#song-card:hover{transform:rotate(0)}
#song-preview{display:block;width:100%;height:98px;background:#fffefa;border-radius:11px}
#song-caption{display:block;margin-top:7px;font:13px Jua,sans-serif;text-align:center}
.singing #song-card{transform:rotate(0);box-shadow:0 0 0 3px #c4a2da66,0 7px 25px #335b4b20}
#composer-dialog{padding:0;border:0;border-radius:22px;width:min(1500px,calc(100vw - 32px));height:calc(100dvh - 32px);max-width:none;max-height:none;background:#f5f1e9;overflow:hidden;box-shadow:0 18px 100px #26343455}
#composer-dialog::backdrop{background:#304e4c99;backdrop-filter:blur(5px)}
.composer-shell{position:relative;width:100%;height:100%}
#composer-frame{display:block;width:100%;height:100%;border:0;background:#fffefa}
#close-composer{position:absolute;top:9px;left:12px;z-index:3;min-height:44px;padding:8px 14px;border-radius:23px;background:#fffaf0;color:#625371;box-shadow:0 2px 14px #54445518;font:14px Jua,sans-serif}
.composer-ready #close-composer{display:none}
.composing #world,.composing .hud,.composing #bubbles,.composing #encounter,.composing #joystick,.composing #song-card{pointer-events:none}
@media(max-width:650px){
 .hud{top:14px;left:14px;right:14px;gap:8px}
 .wordmark{font-size:20px;white-space:nowrap}
 .hud-right{gap:6px}
 .hud-right>span{font-size:12px;padding:8px 9px}
 #sound{width:40px;height:40px;flex:none}
 #compose-song{font-size:13px;padding:8px 11px;min-height:42px}
 #song-card{top:75px;left:15px;width:111px;border-radius:13px;padding:5px 5px 7px}
 #song-preview{height:67px;border-radius:9px}
 #song-caption{font-size:11px;margin-top:5px}
 .singing #song-card{top:145px}
 #composer-dialog{width:100vw;height:100dvh;margin:0;border-radius:0}
 #close-composer{top:7px;left:8px;min-height:42px;padding:8px 10px;font-size:13px}
}
@media(max-width:370px){
 .wordmark{font-size:17px}.wordmark>span{font-size:19px;margin-right:1px}
 .hud{left:10px;right:10px;gap:5px}.hud-right{gap:4px}
 #compose-song{font-size:12px;padding:8px 9px}.hud-right>span{padding:7px 6px}
 #sound{width:36px;height:40px}
}
@media(max-height:480px) and (orientation:landscape){
 .hud{top:10px;left:18px;right:18px}
 #song-card,.singing #song-card{top:65px;left:18px;width:102px;padding:5px}
 #song-preview{height:56px}#song-caption{font-size:10px;margin-top:4px}
 #song-progress{top:65px}#encounter{bottom:28px}
 #composer-dialog{width:100vw;height:100dvh;margin:0;border-radius:0}
}
@media(prefers-reduced-motion:reduce){#song-card{transition:none;transform:none}}