:root {
  --bg:#0d1014; --panel:#151a21; --edge:#252d38; --key-edge:#2f3946;
  --text:#d9dee7; --dim:#6f7b8b;
  --blue:#4a90e2; --green:#4cc38a; --orange:#f0883e;
  --serif: "Roboto Mono", "Courier New", Courier, monospace;

}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:var(--serif); overflow:hidden; }
p { margin:0; }

.screen { position:absolute; inset:0; display:none; }
.screen.active { display:flex; }

/* ---------- title ---------- */
#title { flex-direction:column; align-items:center; justify-content:center; gap:16px; animation:fade 1.2s ease both; }
#title h1 { margin:0; font-size:88px; }
#title h1 span { color:var(--blue); }
#title p { font-style:italic; font-size:20px; color:var(--dim); }
.dots { display:flex; gap:10px; }
.dots b { width:10px; height:10px; border-radius:50%; background:var(--blue); }
.dots b:nth-child(2) { background:var(--green); }
.dots b:nth-child(3) { background:var(--orange); }
.knob { width:112px; height:112px; margin-bottom:12px; border-radius:50%; background:#1b2129;
        border:2px solid var(--key-edge); box-shadow:0 0 0 12px var(--bg), 0 0 0 14px var(--edge); position:relative; }
.knob i { position:absolute; left:50%; top:50%; width:3px; height:44px; margin-left:-1.5px; background:var(--blue);
          border-radius:2px; transform-origin:50% 0; transform:rotate(225deg); animation:sweep 3s linear forwards; }
@keyframes sweep { from { transform:rotate(135deg); } to { transform:rotate(720deg); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

#title.fade-out { animation: fadeout .8s ease forwards; }
@keyframes fadeout { to { opacity: 0; } }

#select.active { animation: fade .8s ease both; }

/* ---------- song select ---------- */
#select { flex-direction:column; padding:0 40px; }
#select header { display:flex; justify-content:space-between; align-items:center; padding:30px 0 20px; border-bottom:1px solid var(--edge); }
#select h2 { margin:0 0 4px; font-size:34px; }
#select header p { font-style:italic; color:var(--dim); }
button { font-family:var(--serif); font-size:18px; cursor:pointer; padding:8px 22px; border-radius:4px; background:transparent;
         color:var(--green); border:1.5px solid var(--green); }
button:hover { background:var(--green); color:var(--bg); }
#add { font-size:26px; padding:4px 18px; }
.actions { display:flex; gap:12px; align-items:center; }
#osu { font-size:16px; color:var(--blue); border-color:var(--blue); }
#osu:hover { background:var(--blue); color:var(--bg); }
#list { list-style:none; margin:8px 0; padding:0; flex:1; overflow-y:auto; }
#list li { display:flex; justify-content:space-between; padding:16px 12px; font-size:20px; border-bottom:1px solid var(--edge); cursor:pointer; }
#list li:hover { background:var(--panel); }
#list li em { color:var(--orange); font-size:15px; align-self:center; }
#list li.empty { color:var(--dim); font-style:italic; cursor:default; justify-content:center; border:0; }
#list li.empty:hover { background:none; }
#select footer { padding:14px 0 22px; font-style:italic; font-size:14px; color:var(--dim); }

/* ---------- game ---------- */
#cv { position:absolute; inset:0; width:100%; height:100%; }
#overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
           background:rgba(13,16,20,.93); text-align:center; padding:40px; }
#overlay[hidden] { display:none; }
#ohead { font-style:italic; font-size:24px; color:var(--blue); }
#oscore { margin:0; font-size:72px; }
#odetail { font-size:18px; color:var(--orange); max-width:620px; }
#back { margin-top:18px; }

/* ---------- .osu song picker ---------- */
#picker { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background:rgba(13,16,20,.9); }
#picker[hidden] { display:none; }
#picker .card { width:min(520px,90vw); max-height:80vh; display:flex; flex-direction:column; gap:12px; padding:28px;
                background:var(--panel); border:1px solid var(--edge); border-radius:8px; }
#picker h3 { margin:0; font-size:24px; }
#pname { font-style:italic; color:var(--blue); }
#plist { list-style:none; margin:0; padding:0; overflow-y:auto; border-top:1px solid var(--edge); }
#plist li { display:flex; justify-content:space-between; padding:12px 8px; border-bottom:1px solid var(--edge); cursor:pointer; }
#plist li:hover { background:var(--bg); }
#plist li em { color:var(--dim); font-size:14px; }