/* HARZ Player: the store's glass toolbar and track list over a full-strength visualizer. */
.player-app #viz.on { opacity: .9; }
html[data-mode="light"] .player-app #viz.on { opacity: .9; }

.player-app .window { max-width: 760px; }
.player-app .thead, .player-app .row { grid-template-columns: 30px minmax(0, 1fr) 56px 28px; }
.player-app .row { cursor: pointer; }
.player-app .row .x { font-size: 16px; line-height: 1; opacity: 0; transition: opacity .15s; }
.player-app .row:hover .x, .player-app .row .x:focus-visible { opacity: 1; }
.player-app .row .x:hover { color: #fff; }
.player-app .lcd-title { cursor: default; }

.open-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.open-btns label { cursor: pointer; }
#p-repeat { font-size: 13px; opacity: .55; }
#p-repeat.on { opacity: 1; box-shadow: inset 0 1px 0 var(--edge), 0 0 10px var(--cool), 0 0 0 1px rgba(160,220,255,.35); }

.drop-hint {
  display: grid; gap: 6px; justify-items: center; text-align: center; padding: 48px 16px;
  color: var(--muted); background: rgba(10,11,12,.55); border: 1px dashed rgba(255,255,255,.12); margin: 8px; border-radius: 6px;
}
.drop-hint b { color: var(--text); font-size: 14px; }
.drop-hint .keys { font: 10px var(--mono); opacity: .8; }
.drop-hint[hidden] { display: none; }

.drop-veil {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; opacity: 0;
  font: 20px "Michroma", var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 3px rgba(190,225,255,.35); transition: opacity .15s;
}
.drop-veil.on { opacity: 1; }

html[data-mode="light"] .drop-hint { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.15); }
html[data-mode="light"] .drop-hint b { color: #1a1d20; }
html[data-mode="light"] .player-app .row .x:hover { color: #000; }

@media (max-width: 760px) {
  .player-app .right .wordmark { display: none; }
}