/* Standard Game UI v1: dial.css. The shared rotary knob (window.SHPDial), from Synth's knob: swept 7:00 to 5:00.
   All rules are under .shp-dial. The pointer uses --accent (inherited from a parent, or data-accent on the dial; orange if unset). */
.shp-dial { display: grid; justify-items: center; align-content: start; gap: 2px; width: 74px; font-family: inherit; }
.shp-dial[data-accent="orange"] { --accent: var(--sgu-orange); }
.shp-dial[data-accent="green"] { --accent: var(--sgu-green); }
.shp-dial[data-accent="purple"] { --accent: var(--sgu-purple); }
.shp-dial-label { min-height: 2.1em; display: flex; align-items: flex-end; text-align: center; font-size: .56rem; font-weight: 700; letter-spacing: .05em; line-height: 1.05; text-transform: uppercase; color: var(--sgu-gray-300); }
.shp-dial[data-accent] .shp-dial-label { color: color-mix(in srgb, var(--accent, var(--sgu-orange)) 70%, color-mix(in srgb, var(--sgu-gray-100) 70%, var(--sgu-gray-300))); }
.shp-dial-knob { width: 44px; height: 44px; border-radius: 50%; position: relative; border: 2px solid color-mix(in srgb, var(--sgu-gray-500) 65%, var(--sgu-gray-700));
  background: repeating-conic-gradient(color-mix(in srgb, var(--sgu-gray-700) 75%, var(--sgu-gray-900)) 0deg 8deg, color-mix(in srgb, var(--sgu-gray-700) 25%, var(--sgu-gray-900)) 8deg 16deg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sgu-gray-900) 60%, var(--sgu-black)), 0 0 0 4px color-mix(in srgb, var(--sgu-gray-500) 15%, var(--sgu-gray-700)), 0 3px 8px var(--sgu-black); touch-action: none; cursor: ns-resize; user-select: none; -webkit-user-select: none; }
.shp-dial-knob::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: linear-gradient(130deg, color-mix(in srgb, var(--sgu-gray-500) 15%, var(--sgu-gray-700)), color-mix(in srgb, var(--sgu-gray-700) 20%, var(--sgu-gray-900))); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--sgu-purple) 15%, var(--sgu-gray-500)); }
.shp-dial-knob i { position: absolute; inset: 0; transform: rotate(var(--angle, -150deg)); pointer-events: none; }
.shp-dial-knob i::after { content: ""; position: absolute; width: 3px; height: 14px; border-radius: 3px; background: var(--accent, var(--sgu-orange)); top: 3px; left: calc(50% - 1.5px); box-shadow: 0 0 7px var(--accent, var(--sgu-orange)); }
.shp-dial-knob:focus-visible { outline: 2px solid color-mix(in srgb, var(--sgu-purple) 45%, var(--sgu-white)); outline-offset: 5px; }
.shp-dial-knob.dragging { border-color: var(--accent, var(--sgu-orange)); }
.shp-dial-value { min-width: 44px; min-height: 26px; display: inline-flex; justify-content: center; align-items: center; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--sgu-gray-500) 15%, var(--sgu-gray-700)); border-radius: 6px; background: color-mix(in srgb, var(--sgu-gray-700) 5%, var(--sgu-gray-900));
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sgu-gray-100); cursor: text; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.shp-dial-value[hidden] { display: none; }
.shp-dial-sub { min-height: 1.1em; font-size: .56rem; color: color-mix(in srgb, var(--sgu-gray-300) 30%, var(--sgu-gray-500)); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.shp-dial-editor { width: 60px; height: 26px; padding: 1px; font: 16px var(--sgu-font); text-align: center; color: var(--sgu-white); background: color-mix(in srgb, var(--sgu-purple) 20%, var(--sgu-black)); border: 2px solid color-mix(in srgb, var(--sgu-purple) 75%, var(--sgu-gray-500)); border-radius: 6px; }
@media (max-width: 380px) { .shp-dial { width: 68px; } }