/* change character (training pause menu) */
.overlay { overflow: auto; }
#change-panel { display: none; flex-direction: column; align-items: center; gap: 8px; }
#change-pickers { display: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 6px; }
#change-pickers.open { display: flex; }
.cp-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cp-side h3 { margin: 0; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; opacity: .8; }
#change-pickers .picker { gap: 10px; }
#change-pickers .card { width: 118px; padding: 6px; background: rgba(255, 255, 255, .1); }
#change-pickers .card img { height: 150px; }
#change-pickers .card span { font-size: 14px; }
#change-pickers .card { border: 3px solid rgba(255, 255, 255, .25); border-radius: 14px; }
#change-pickers .card:hover { background: rgba(255, 255, 255, .2); }
#change-pickers .card.selected { border-color: var(--accent); background: rgba(224, 24, 45, .35); box-shadow: 0 4px 18px rgba(224, 24, 45, .5); }
#btn-fs-pause, #pause .toggle { border: 2px solid #fff; border-radius: 12px; background: transparent; color: #fff; font-weight: 800; padding: 8px 22px; }

/* sensitivity slider (pause menu) */
.sens-group { display: flex; flex-direction: column; gap: 10px; }
.sens-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; width: 240px; font-weight: 800; }
.sens-box span { grid-area: 1 / 1; }
.sens-box b { grid-area: 1 / 2; }
.sens-box input { grid-area: 2 / 1 / 3 / 3; width: 100%; margin: 0; accent-color: var(--accent); }

/* pause menu spacing */
#pause { gap: 22px; padding: 24px 0; }
#pause h2 { margin-bottom: 0; }
#pause button { min-width: 230px; }
#pause .primary { margin-top: 4px; }
#change-panel { gap: 14px; }

/* touch-only items of the pause menu */
body:not(.touch) .touch-only { display: none; }
.touch #btn-fs-pause { display: none; }   /* resuming already goes fullscreen */
@media (max-height: 520px) {
  #pause { gap: 10px; padding: 8px 0; justify-content: safe center; }
  .sens-group { gap: 6px; }
  #pause h2 { font-size: 28px; }
  #pause button { min-width: 200px; padding: 5px 18px; }
}