*{box-sizing:border-box}
:root{
  /* Szenen-Farben; jedes Theme überschreibt sie (themes/*.css, später geladen) */
  --s-ink:#12002b;--s-a:#ff2bd6;--s-b:#ffe600;--s-c:#18f0ff;--s-paper:#fff6ff;--s-wood:#8a4b21;--s-green:#1db954;
  --s-disp:system-ui,sans-serif;--s-crt:'Courier New',monospace;
}
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}
button{cursor:pointer;font:inherit;min-height:2.75rem;touch-action:manipulation}
input{font-size:16px}
a{touch-action:manipulation}

/* Modale (Suche) und Detailansicht */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);padding:3vw;overscroll-behavior:contain}
.modal[hidden]{display:none}
#ytModal{z-index:70}
.modal .box{position:relative;width:min(94vw,36rem);max-height:90vh;overflow:auto;padding:1.2rem;overscroll-behavior:contain}
.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}
#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}
body.modal-open{overflow:hidden}
@media (max-width:700px){
.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}
}