/* Genre dailies (FLI-243): /daily/80s/ and /daily/90s/. The web daily's look
   (hosting/daily/index.html), only the parts these pages use. */
:root { --bg:#0D0D1A; --panel:#181830; --yellow:#FFD24A; --green:#2FBE6C; --red:#E5484D; --ink:#ECECF4; --sub:#8B8FA8; }
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--ink); font-family:'Poppins',system-ui,sans-serif;
       min-height:100vh; display:flex; flex-direction:column; align-items:center; }
.wrap { width:100%; max-width:430px; padding:18px 20px 40px; }
header { text-align:center; padding:14px 0 4px; }
header .brand { font-weight:700; font-size:20px; letter-spacing:.02em; }
header .brand span { color:var(--yellow); }
header .brand i { font-style:normal; color:var(--accent,#e040fb); }
.meta { color:var(--sub); font-size:13px; margin-top:2px; }
.themeName { color:var(--accent,#e040fb); font-weight:600; }
.prog { text-align:center; color:var(--sub); font-size:13px; margin:16px 0 0; }
.prog b { color:var(--yellow); }
.chips { display:flex; justify-content:center; gap:8px; margin:14px 0 0; }
.chip { border:1px solid #34374f; color:var(--sub); border-radius:999px; padding:6px 14px;
        font-size:13px; font-weight:600; }
.chip.on { background:var(--yellow); color:#191919; border-color:var(--yellow); }
.pts { text-align:center; color:var(--yellow); font-size:21px; font-weight:700; margin:10px 0 0; }
.playRow { display:flex; justify-content:center; margin:16px 0 0; }
#playBtn { width:92px; height:92px; border-radius:50%; background:var(--panel); color:var(--accent,#e040fb);
           border:3px solid var(--accent,#e040fb); font-size:34px; cursor:pointer; transition:all .25s;
           display:flex; align-items:center; justify-content:center; }
#playBtn.playing { background:var(--accent,#e040fb); color:#10101c;
                   box-shadow:0 0 28px 6px color-mix(in srgb, var(--accent,#e040fb) 55%, transparent); }
.note { text-align:center; color:var(--sub); font-size:12px; min-height:16px; margin-top:8px; }
.credit { text-align:center; color:#6a6e8a; font-size:11px; margin-top:16px; }
.longer { display:flex; justify-content:center; margin:10px 0 0; }
#longerBtn { background:none; border:1.5px solid var(--yellow); color:var(--yellow); border-radius:999px;
             padding:9px 20px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; }
#longerBtn:disabled { border-color:#2a2c40; color:#4a4d66; cursor:default; }
.opts { display:flex; flex-direction:column; gap:10px; margin:18px 0 0; }
.opt { background:var(--panel); border:none; color:var(--ink); border-radius:14px; padding:14px 16px;
       font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:background .15s; }
.opt.correct { background:var(--green); color:#fff; }
.opt.wrong { background:var(--red); color:#fff; }
#result { display:none; text-align:center; }
#result .num { color:var(--sub); font-size:12px; letter-spacing:1.5px; margin-top:26px; }
#result .score { font-size:46px; font-weight:700; margin-top:6px; }
#result .rpts { color:var(--yellow); font-size:17px; }
.grid { display:flex; justify-content:center; gap:7px; margin:16px 0 0; }
.sq { width:30px; height:30px; border-radius:7px; background:var(--red); }
.sq.g { background:var(--green); }
.streak { margin:16px auto 0; width:fit-content; background:#ffffff10; border-radius:999px;
          padding:8px 18px; font-size:14px; font-weight:600; color:var(--yellow); }
#streakHint { margin:14px auto 0; }
.share { display:block; width:100%; background:var(--yellow); color:#191919; border:none; border-radius:16px;
         padding:15px; font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; margin:22px 0 0; }
.more { display:flex; gap:10px; margin:12px 0 0; }
.more a { flex:1; border:1.5px solid #34374f; color:var(--ink); border-radius:16px; padding:12px 8px;
          font-size:14px; font-weight:600; text-decoration:none; text-align:center; line-height:1.3; }
.more a b { color:var(--yellow); }
.getapp { display:block; width:100%; background:none; border:1.5px solid #34374f; color:var(--ink);
          border-radius:16px; padding:13px; font-size:14px; font-weight:600; text-decoration:none;
          text-align:center; margin:12px 0 0; }
.getapp b { color:var(--yellow); }
.songs { margin:22px 0 0; text-align:left; }
.songsHead { color:var(--sub); font-size:13px; font-weight:600; text-align:center; }
.songs ol { list-style:none; margin:8px 0 0; padding:0; }
.songs li { display:flex; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid #2a2c40;
            font-size:13px; color:var(--sub); line-height:1.35; }
.songs li:last-child { border-bottom:none; }
.songs .st { flex:1; min-width:0; overflow-wrap:anywhere; }
.songs .st b { color:var(--ink); font-weight:600; }
.songs .am { flex:none; display:block; line-height:0; }
.songs .am img { height:34px; width:auto; }
.countdown { color:var(--sub); font-size:13px; margin-top:18px; }
.countdown b { color:var(--ink); font-variant-numeric:tabular-nums; }
.yday { margin:22px 0 0; text-align:left; color:var(--sub); font-size:13px; }
.yday summary { cursor:pointer; color:var(--ink); font-weight:600; text-align:center;
                list-style:none; padding:10px; border:1px solid #2a2c40; border-radius:14px; }
.yday summary::-webkit-details-marker { display:none; }
.yday summary::after { content:' ▾'; color:var(--sub); }
.yday[open] summary::after { content:' ▴'; }
.yday ol { margin:12px 0 0; padding-left:22px; line-height:1.8; }
.yday li b { color:var(--ink); font-weight:600; }
.err { text-align:center; color:var(--sub); margin-top:60px; line-height:1.6; }
.err a { color:var(--yellow); }
footer { margin-top:auto; padding:18px; color:#4a4d66; font-size:11px; text-align:center; }
footer a { color:#6a6e8a; }
.about { width:100%; max-width:560px; margin:56px auto 0; padding:0 22px;
         color:var(--sub); font-size:14px; line-height:1.75; }
.about h1 { color:var(--ink); font-size:20px; font-weight:700; margin:0 0 12px; text-wrap:balance; }
.about h2 { color:var(--ink); font-size:15px; font-weight:600; margin:28px 0 8px; }
.about p { margin:0 0 14px; }
.about ul { margin:0 0 14px; padding-left:18px; }
.about li { margin-bottom:8px; }
.about a { color:var(--yellow); }