/* ブラウザ版専用の追加分 (style.css は newriad 版と共用) */

.sidepanel {
  position: fixed; top: 0; right: -420px; width: 400px; max-width: 94vw;
  height: 100vh; background: var(--panel); border-left: 1px solid var(--line);
  padding: 14px; overflow-y: auto; transition: right .2s; z-index: 40;
  box-sizing: border-box;
}
.sidepanel.open { right: 0; box-shadow: -12px 0 40px rgba(0,0,0,.6); }
.sidepanel .host-head { display: flex; align-items: center; justify-content: space-between; }
.sidepanel h3 { color: var(--gold); margin-top: 0; }

#liveCtl, #controls {
  display: flex; gap: 8px; align-items: center; padding: 4px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  font-size: .85em; flex-wrap: wrap;
}
#controls #seek { flex: 1; min-width: 120px; }

#keyBadge { font-size: .8em; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; }
#keyBadge:not(.dim) { color: var(--gold); border-color: var(--gold); }

.hist-row { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.hist-row .hist-label { flex: 1; min-width: 180px; font-size: .85em; }

.key-in { width: 100%; box-sizing: border-box; margin: 6px 0; }

.muse-note { color: #e0a050; font-size: .8em; margin: 2px 0; min-height: 1em; }

.ver { font-size: .5em; font-weight: normal; }

@media (max-width: 860px) {
  .sidepanel { display: none; width: 100vw; max-width: 100vw; right: 0; }
  .sidepanel.open { display: block; box-shadow: none; }
}