/* Progress is only built when the player pauses, never over the driving view. */
#race:not(.paused) .pause-unlocks { display: none; }
body:has(#race.paused) .unlock-preview { display: none; }
.pause-unlocks, #race.paused .rc-stage { --unlock-text: "Outfit", system-ui, sans-serif; font-family: var(--unlock-text); }
#race.paused .rc-stage :is(.cta-primary, .skip) { font-family: var(--unlock-text); }
#race.paused { touch-action: pan-y; }
#race.on.paused .rc-stage { bottom: max(16px,var(--safe-b)); max-height: calc(100dvh - 86px - var(--safe-t) - var(--safe-b)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; padding: 5px 1px; }
.pause-unlocks { margin: 12px 0; padding: 10px; border: 1px solid #8fa4bd55; border-radius: 12px; background: #100b20ed; text-align: left; }
.pause-unlocks .unlock-title { margin: 0 0 8px; font: 600 12px/1.3 var(--unlock-text); letter-spacing: .08em; color: #d8eaff; }
.unlock-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.unlock-card { min-width: 0; padding: 8px; border: 1px solid #73678666; border-radius: 7px; background: #07040f9c; }
.unlock-heading { display: grid; place-items: center; min-height: 64px; }
.unlock-heading img { display: block; width: 100%; max-width: 152px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 8px color-mix(in srgb,var(--unlock-color) 18%,transparent)); }
.unlock-steps { display: grid; gap: 3px; margin: 7px 0 0; font: 10px/1.2 var(--unlock-text); }
.unlock-steps > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.unlock-steps dt { min-width: 0; color: #d5cce5; }
.unlock-steps dd { flex: 0 0 auto; margin: 0; color: #fff; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.unlock-steps [data-done="true"] dt, .unlock-steps [data-done="true"] dd { color: #a2ffd0; }
.unlock-meter { height: 2px; margin: 6px 0; background: #ffffff1a; border-radius: 2px; overflow: hidden; }
.unlock-meter i { display: block; height: 100%; background: var(--unlock-color); }
.unlock-state { display: block; color: var(--unlock-color); text-align: center; font: 9px/1.3 var(--unlock-text); }
.unlock-card:is([data-state="active"], [data-state="locked"]) .unlock-state { font-family: var(--mono); }
.unlock-card[data-state="ready"] { border-color: var(--unlock-color); }
.unlock-card[data-state="earned"] { border-color: #81b79b88; }
.pause-unlocks .oncoming-help, .pause-unlocks .unlock-note { margin: 9px 0 0; max-width: none; color: #d5cce5; font: 11px/1.4 var(--unlock-text); letter-spacing: 0; }
.pause-unlocks .oncoming-help strong { color: #fff; }
.pause-unlocks .unlock-note { font-size: 10px; color: #bbb0cd; }
/* Reserve the complete phone viewport for the grid and two rows of actions. */
@media (max-width:640px) and (orientation:portrait), (max-height:520px) and (orientation:landscape) {
  #race.on.paused .rc-stage { top: calc(60px + var(--safe-t)); bottom: max(12px,var(--safe-b)); max-height: none; overflow: visible; padding: 0 1px 5px; gap: 8px; }
  #race.on.paused .rc-stage-body { display: flex; flex-direction: column; min-height: 0; overflow: visible; padding: 0; }
  #race.on.paused .rc-stage-body > .eyebrow { display: none; }
  #race.on.paused h2 { flex: none; margin: 0 0 6px; font-size: 18px; }
  #race.on.paused .pause-unlocks { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; padding: 7px; }
  .pause-unlocks .unlock-title { flex: none; margin-bottom: 5px; font-size: 11px; }
  .unlock-grid { flex: 1; min-height: 0; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 5px; }
  .unlock-card { display: flex; flex-direction: column; min-height: 0; padding: 6px; }
  .unlock-heading { flex: 1; min-height: 30px; }
  .unlock-heading img { height: clamp(30px,7dvh,60px); max-height: 100%; }
  .unlock-steps { flex: none; gap: 2px; margin-top: 4px; }
  .unlock-meter { flex: none; margin-block: 4px; }
  .unlock-state { flex: none; }
  .pause-unlocks .oncoming-help, .pause-unlocks .unlock-note { flex: none; margin-top: 5px; font-size: 10px; line-height: 1.3; }
  #race.on.paused .rc-stage-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #race.on.paused .rc-stage-actions > :is(.cta-primary,.skip) { width: 100%; min-height: 44px; margin: 0; padding: 6px 10px; gap: 6px; }
  #race.on.paused .rc-stage-actions > .cta-primary { grid-column: 1 / -1; }
  #race.on.paused .cta-primary .control-icon { width: 26px; height: 26px; padding: 4px; }
}
@media (max-width:640px) and (orientation:portrait) {
  #race.on.paused .rc-stage { max-height: min(560px,calc(100dvh - 72px - var(--safe-t) - var(--safe-b))); }
}
@media (max-height:520px) and (orientation:landscape) {
  #race.on.paused .rc-stage { left: max(16px,var(--safe-l)); right: max(16px,var(--safe-r)); top: calc(54px + var(--safe-t)); width: auto; display: grid; grid-template-columns: minmax(0,1fr) 140px; align-items: stretch; gap: 10px; }
  #race.on.paused .rc-stage-actions { grid-template-columns: 1fr; align-content: center; }
  .unlock-grid { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); }
  .unlock-heading img { height: clamp(30px,12dvh,52px); }
  .unlock-steps { font-size: 9px; }
}
@media (max-height:360px) and (orientation:landscape) {
  .pause-unlocks .unlock-title, .pause-unlocks .unlock-note { display: none; }
}
@media (max-height:580px) and (orientation:portrait) {
  #race.on.paused .rc-stage { top: calc(50px + var(--safe-t)); }
  .pause-unlocks .unlock-note { display: none; }
  .unlock-heading img { height: clamp(30px,8dvh,44px); }
}
@media (max-height:500px) and (orientation:portrait) {
  #race.on.paused .rc-stage-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #race.on.paused .rc-stage-actions > .cta-primary { grid-column: auto; font-size: 11px; }
  #race.on.paused .rc-stage-actions .control-icon { display: none; }
}