/* Full-screen menus: streamer select, title, chapter list, chapter intro / outro. */
#overlay { position:fixed; inset:0; background:rgba(8,10,20,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; z-index:5; overflow:auto; }
#overlay h1 { font-size:clamp(32px, 6vw, 56px); margin:0; letter-spacing:.02em; }
#overlay h1 small { display:block; font-size:.4em; color:var(--acc); letter-spacing:.2em; margin-bottom:4px; }
#overlay p { max-width:520px; margin:0; color:var(--dim); }
#overlay .row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
#overlay .list { display:flex; flex-direction:column; gap:8px; width:min(420px, 100%); }
#overlay .src a { color:var(--acc2); }
#overlay .small { font-size:12px; }

/* Streamer cards on the select screen; each card carries its own accent. */
#overlay .cards { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
#overlay .card { width:min(300px, 100%); text-align:left; background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--card-acc, var(--acc)); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; }
#overlay .card h2 { margin:0; font-size:22px; }
#overlay .card p { font-size:13px; }
#overlay .card .meta { font-size:12px; color:var(--dim); }
#overlay .card button.primary { background:var(--card-acc, var(--acc)); border-color:var(--card-acc, var(--acc)); }