/* Legacy layout and paint share one cascade layer. Theme recipes own opt-in appearance. */
@layer legacy {
  /* A fixed badge on an existing control never changes the arena's layout. */
  #race-pause[data-journey-unsaved='true'],
  #coop-pause[data-journey-unsaved='true'] {
    position: relative;
    box-shadow: inset 0 0 0 2px #f3c84b;
  }
  #race-pause[data-journey-unsaved='true']::before,
  #coop-pause[data-journey-unsaved='true']::before {
    content: '!';
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    color: #080d1c;
    background: #f3c84b;
    pointer-events: none;
  }
  /* The existing ::after belongs to the compact music caption. Keep it intact. */
  body.field-kit.race-focus #race-pause[data-journey-unsaved='true']::before,
  body.field-kit.playing:has(#coop-overlay[hidden])
    #coop-pause[data-journey-unsaved='true']::before {
    display: grid;
  }
  #race-journey-save-options,
  #coop-journey-save-options {
    grid-column: 1 / -1;
    color: #f3c84b;
    border-color: #f3c84b;
  }
  .journey-save-announcement {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
