/* Player view: dark falling-notes stage framed like the app's panels. Canvas colours come from the --kf-* tokens. */
.kf-view {
  --kf-stage: #18191d;
  --kf-lane-black: rgba(255, 255, 255, .035);
  --kf-lane-line: rgba(255, 255, 255, .06);
  --kf-oct-line: rgba(255, 255, 255, .14);
  --kf-beat: rgba(255, 255, 255, .06);
  --kf-bar: rgba(255, 255, 255, .22);
  --kf-bar-text: rgba(255, 255, 255, .45);
  --kf-kb-bg: #0d0d0d;
  --kf-white: var(--panel, #f4f3ef);
  --kf-white-edge: var(--ink, #0d0d0d);
  --kf-black: #121214;
  --kf-key-text: var(--grey-3, #6b6c69);
  --kf-key-text-black: var(--grey-1, #c9cac7);
  --kf-note-edge: rgba(0, 0, 0, .35);
  --kf-note-text: #141414;
  --kf-accent: var(--red, #d7191f);
  --kf-loop-shade: rgba(0, 0, 0, .45);
  --kf-font: "IBM Plex Mono", ui-monospace, monospace;
  position: relative; width: 100%; height: 100%; min-height: 160px; overflow: hidden;
  background: var(--kf-stage); border: var(--line, 1.5px solid #0d0d0d); border-radius: 20px;
  box-shadow: var(--shadow, none); user-select: none;
}
[data-theme=dark] .kf-view {
  --kf-stage: #0c0c0e;
  --kf-kb-bg: #000;
  --kf-white: #dcdbd6;
  --kf-white-edge: #111;
  --kf-black: #0e0e10;
  --kf-key-text: #5c5d5a;
  --kf-loop-shade: rgba(0, 0, 0, .55);
  border-color: #2e2f33;
}
.kf-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.kf-zoom {
  position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 3px; padding: 4px;
  border-radius: 999px; background: rgba(16, 16, 18, .6); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: .5; transition: opacity .15s;
}
.kf-view:hover .kf-zoom, .kf-zoom:focus-within { opacity: 1; }
.kf-zoom .kf-zl {
  padding: 0 3px 0 7px; color: rgba(255, 255, 255, .55);
  font: 500 9px/1 var(--f-mono, monospace); letter-spacing: .12em; text-transform: uppercase;
}
.kf-zoom button {
  width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: transparent; color: #eee; font: 500 13px/1 var(--f-mono, monospace); cursor: pointer;
}
.kf-zoom button.kf-wide { width: auto; padding: 0 8px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.kf-zoom button:hover { background: rgba(255, 255, 255, .14); }
.kf-zoom button:focus-visible { outline: 2px solid var(--kf-accent); outline-offset: 2px; }
@media (max-width: 520px) { .kf-zoom .kf-zl { display: none; } }

.kf-view { -webkit-user-select: none; -webkit-touch-callout: none; }
@media (pointer: coarse) {
  .kf-zoom { opacity: .92; gap: 4px; }
  .kf-zoom .kf-zl { display: none; }
  .kf-zoom button { width: 44px; height: 44px; font-size: 18px; }
  .kf-zoom button.kf-wide { width: auto; padding: 0 12px; font-size: 11px; }
}