/* 'Play it yourself': the strip that says this is a recorded run (it takes the app's own title-bar slot, so nothing moves under
 * it), the note for a change a recording can't run, and the key chip, which needs no key here. */
html:root { --pl-titlebar: 32px; }
#play-banner {
  position: fixed; left: 0; right: 0; top: 0; height: 32px; z-index: 2147483000; box-sizing: border-box; padding: 0 16px;
  display: flex; align-items: center; gap: 10px; overflow: hidden; white-space: nowrap;
  background: #10233d; color: #e9eef6; font: 400 12.5px/32px system-ui, -apple-system, "Segoe UI", sans-serif;
}
#play-banner b { font-weight: 650; color: #fff; flex: none; }
#play-banner > span:not(#play-speed) { overflow: hidden; text-overflow: ellipsis; min-width: 0; color: #c3cfdf; }
#play-banner a { flex: none; margin-left: auto; color: #ffcf8a; font-weight: 600; text-decoration: none; }
#play-banner a:hover, #play-banner a:focus-visible { text-decoration: underline; }
#play-speed { flex: none; padding: 0 9px; border-radius: 10px; background: #ffcf8a; color: #10233d; font-weight: 600; line-height: 20px; }
#play-speed[hidden] { display: none; }
@media (max-width: 900px) { #play-banner > span:not(#play-speed) { display: none; } }

#play-note {
  position: fixed; left: 50%; top: 44px; transform: translateX(-50%); z-index: 2147483001; box-sizing: border-box;
  width: min(560px, calc(100vw - 32px)); padding: 12px 40px 12px 16px; border-radius: 10px;
  background: #fff; color: #111418; border: 1px solid rgba(15, 23, 42, .14); border-left: 4px solid #c77700;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#play-note[hidden] { display: none; }
#play-note b { display: block; font-weight: 650; margin-bottom: 2px; }
#play-note span { color: #4a5059; }
#play-note a { color: #1665d8; font-weight: 600; }
#play-note .play-note-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: #7a818c; cursor: pointer; padding: 4px; }

.pl-key-chip > span { display: none !important; }
.pl-key-chip::after { content: "Recorded run · no key needed"; }
#play-audio-note, #play-guide, #play-edit-note { color: #8a5300; }