:root { color-scheme: dark; --bar: 48px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #ddd;
             font: 13px/1.4 "Segoe UI", system-ui, sans-serif; overflow: hidden; }

#bar { position: fixed; left: 0; right: 0; top: 0; height: var(--bar); z-index: 10;
       display: flex; gap: 10px; align-items: center; padding: 0 12px;
       background: #141414; border-bottom: 1px solid #333; }

#brand { display: flex; align-items: baseline; gap: 8px;
         padding-right: 8px; margin-right: 2px; white-space: nowrap; }
#brand .silver { font-weight: 800; letter-spacing: 3px; font-size: 15px;
         background: linear-gradient(180deg, #f4f6fa 0%, #c2c8d2 45%, #9aa2b0 100%);
         -webkit-background-clip: text; background-clip: text;
         -webkit-text-fill-color: transparent; color: #d7dce4;
         text-shadow: 0 1px 1px #0008; }
#brand .sub { font-weight: 500; letter-spacing: .5px; font-size: 12px; color: #828b9b; }

#bar label { opacity: .55; }

select, button { background: #1f1f1f; color: #eee; border: 1px solid #444;
                 border-radius: 4px; padding: 4px 8px; font: inherit; }
button { cursor: pointer; }
button:hover, select:hover { border-color: #6a6a6a; }
#chapter { max-width: 260px; }
#track   { max-width: 220px; }

.vol { display: flex; align-items: center; gap: 6px; }
.vol .vico { opacity: .6; }
#vol { width: 120px; accent-color: #8aa0d6; }

#status { margin-left: auto; opacity: .65; white-space: nowrap; overflow: hidden;
          text-overflow: ellipsis; max-width: 38vw; font-variant-numeric: tabular-nums; }

#stage-area { position: fixed; left: 0; right: 0; top: var(--bar); bottom: 0; background: #000; }
#stage-area iframe { position: absolute; inset: 0; width: 100%; height: 100%;
                     border: 0; display: none; background: #000; }
#stage-area iframe.show { display: block; }

/* collapsible menu */
#menuToggle { width: 30px; padding: 4px 0; font-size: 14px; line-height: 1; }
#menuReveal { position: fixed; top: 8px; right: 12px; z-index: 30; display: none;
              width: 32px; height: 26px; padding: 0; font-size: 14px; line-height: 1;
              border-radius: 6px; background: #141414cc; color: #cdd;
              border: 1px solid #444; cursor: pointer; }
#menuReveal:hover { border-color: #6a6a6a; }
body.menu-hidden #bar { display: none; }
body.menu-hidden #stage-area { top: 0; }
body.menu-hidden #menuReveal { display: block; }

#hint { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
        z-index: 20; padding: 7px 14px; border-radius: 999px;
        background: #0b0b0bcc; border: 1px solid #444; color: #cdd; opacity: .9;
        pointer-events: none; transition: opacity .35s; }
#hint.hidden { opacity: 0; }