/* Standard Game UI v1: recorder.css. SHPRecorderUI, the shared Record button + length dropdown (Synth, Polyrhythm, Portal). Every rule is scoped under .shp-rec
   and sets its own font, colours and sizes, so game CSS (global button or select rules) cannot change the look. Colours come from tokens.css (load it first). */
.shp-rec { --shp-rec-text: var(--sgu-gray-100); --shp-rec-soft: var(--sgu-gray-300); --shp-rec-red: var(--sgu-rec-red);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0; min-height: 34px;
  font-family: inherit; color: var(--shp-rec-text); line-height: 1.2; box-sizing: border-box; }
.shp-rec *, .shp-rec *::before, .shp-rec *::after { box-sizing: border-box; }
.shp-rec .shp-rec-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: inherit; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: .78rem; line-height: 1.2; min-height: 34px; min-width: 0; width: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--sgu-rec-red) 90%, var(--sgu-white)) 55%, transparent);
  background: color-mix(in srgb, var(--sgu-rec-red) 12%, transparent); color: var(--shp-rec-text); cursor: pointer; box-shadow: none; text-shadow: none; -webkit-appearance: none; appearance: none; }
.shp-rec .shp-rec-btn:hover { border-color: color-mix(in srgb, color-mix(in srgb, var(--sgu-rec-red) 75%, var(--sgu-white)) 80%, transparent); }
.shp-rec .shp-rec-btn:focus-visible, .shp-rec .shp-rec-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--sgu-rec-red) 40%, var(--sgu-white)); outline-offset: 2px; }
.shp-rec .shp-rec-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--shp-rec-red); box-shadow: 0 0 8px color-mix(in srgb, var(--sgu-rec-red) 80%, transparent); }
.shp-rec.is-recording .shp-rec-btn, .shp-rec.is-encoding .shp-rec-btn { border-color: color-mix(in srgb, var(--sgu-rec-red) 85%, var(--sgu-white)); background: color-mix(in srgb, var(--sgu-rec-red) 22%, transparent); animation: shp-rec-pulse 1.2s ease-in-out infinite; }
@keyframes shp-rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sgu-rec-red) 18%, transparent); } }
.shp-rec .shp-rec-len { display: inline-flex; align-items: center; gap: 5px; margin: 0; white-space: nowrap; }
.shp-rec .shp-rec-len-label { font-size: .68rem; font-weight: 600; color: var(--shp-rec-soft); letter-spacing: normal; text-transform: none; }
.shp-rec .shp-rec-select { min-width: 54px; width: auto; min-height: 34px; margin: 0; padding: 5px 6px; font: inherit; font-size: .78rem; color: var(--shp-rec-text);
  background: var(--sgu-gray-900); border: 1px solid color-mix(in srgb, var(--sgu-gray-500) 15%, var(--sgu-gray-700)); border-radius: 8px; }
.shp-rec .shp-rec-progress { display: inline-flex; align-items: center; gap: 8px; min-width: 140px; }
.shp-rec .shp-rec-progress[hidden], .shp-rec [hidden] { display: none; }
.shp-rec .shp-rec-left { font-size: .72rem; font-weight: 700; color: color-mix(in srgb, var(--sgu-rec-red) 40%, var(--sgu-white)); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.shp-rec .shp-rec-bar { flex: 1; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--sgu-white) 12%, transparent); overflow: hidden; min-width: 72px; }
.shp-rec .shp-rec-bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--sgu-rec-red), var(--sgu-orange)); border-radius: 999px; }
.shp-rec .shp-rec-btn:disabled, .shp-rec .shp-rec-select:disabled { cursor: not-allowed; opacity: .45; }
.shp-rec.is-encoding .shp-rec-btn:disabled { animation: none; }
@media (pointer: coarse), (max-width: 480px) { .shp-rec { gap: 6px; } .shp-rec .shp-rec-btn, .shp-rec .shp-rec-select { min-height: 44px; } }