*{box-sizing:border-box}
html,body{margin:0;min-height:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:system-ui,sans-serif;overflow-x:hidden}
#collage{position:fixed;inset:0;overflow:hidden;z-index:0}
#collage .st{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-50%) rotate(var(--r));z-index:var(--z);animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
#collage .st img{display:block;width:100%;height:auto;max-height:var(--w);object-fit:contain}
#collage .st b{display:block;text-align:center;font-weight:900;word-break:break-word}
#collage .st.txt{width:auto;max-width:42vw}
@keyframes pop{from{transform:translate(-50%,-50%) rotate(var(--r)) scale(0);opacity:0}}
#top,#stage{position:relative;z-index:5}
#top{text-align:center;padding:max(2vh,env(safe-area-inset-top)) 4vw 0}
#termForm{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
#termForm{flex-direction:column;align-items:stretch;max-width:30rem;margin:0 auto}
#termInput{width:100%;font-size:16px;padding:.9rem 1rem}
#termBtn{width:100%;min-height:3.2rem;font-size:1.15rem}
button{cursor:pointer;font:inherit;min-height:2.75rem;touch-action:manipulation}
input{font-size:16px}
#stage{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:2vh 4vw max(6vh,env(safe-area-inset-bottom))}
#mtv{width:min(94vw,40rem);text-align:center}
#mtvScreen{aspect-ratio:4/3;display:flex;flex-direction:column;overflow:hidden;position:relative}
#mtvList{list-style:none;margin:0;padding:0;overflow:auto;flex:1;text-align:left}
#mtvList li{padding:.3rem .6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mtvBtn{margin-top:.8rem;width:100%;min-height:3.5rem;font-size:1.3rem}
#tvLink{display:block;margin-top:.5rem;font-size:.9rem}
#spot{width:min(94vw,28rem);text-align:center}
#spotBtn{width:100%;min-height:2.9rem;font-size:1rem}
#spotList{list-style:none;margin:.5rem 0;padding:0;max-height:8rem;overflow:auto;text-align:left;font-size:.85rem}
#spotEmbed iframe{width:100%;border:0;border-radius:12px;margin-top:.5rem}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);padding:3vw}
.modal[hidden]{display:none}
.modal .box{position:relative;width:min(94vw,36rem);max-height:90vh;overflow:auto;padding:1.2rem}
.modal .x{position:absolute;top:.3rem;right:.6rem;font-size:2rem;line-height:1;background:none;border:0;color:inherit}
.modal form{display:flex;gap:.5rem}
.modal form input{flex:1;min-width:0;padding:.6rem;font-size:1rem}
#ytRes{list-style:none;margin:.8rem 0;padding:0;display:grid;gap:.5rem}
#ytRes li{display:flex;gap:.6rem;align-items:center;cursor:pointer;padding:.4rem}
#ytRes li img{width:7rem;aspect-ratio:16/9;object-fit:cover;flex:none}
#ytRes li.sel{outline:3px solid currentColor}
body.modal-open{overflow:hidden}
.modal{overscroll-behavior:contain}
.modal .box{overscroll-behavior:contain}
#ytRes small{display:block;opacity:.7}
#ytAdd{width:100%;min-height:3.2rem;font-size:1.1rem;position:sticky;bottom:0}
#ytAdd:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:700px){
#collage .st.txt{max-width:60vw}
.modal{align-items:flex-end;padding:0}
.modal .box{width:100%;max-height:92dvh;border-radius:1.2rem 1.2rem 0 0;padding:1rem 1rem max(1rem,env(safe-area-inset-bottom))}
#ytRes li img{width:6rem}
}
#mtvList li{font-size:.95rem}
@media (prefers-reduced-motion:reduce){#collage .st{animation:none}}