/* Thumb origins and reversible gestures occupy the existing control deck. */
.controls{overflow:hidden}
.utility-bar{position:relative;z-index:3}
.joystick-base{pointer-events:none;will-change:transform}
.action-pad{z-index:2}
.joystick-zone.active .joy-tip{opacity:.6}
#pass-btn.canceling{background:#5d6151;border-color:#e9cd94}
.radio-v22{background:#f7f1dc;border:2px solid var(--ink);box-shadow:4px 4px 0 #bdc8aa;padding:16px 14px}
.radio-v22 .now-playing{gap:14px;margin:17px 0 8px}
.radio-record{position:relative;display:grid;place-items:center;width:62px;height:62px;flex-shrink:0;background:#283e38;border:4px solid #d2b979;box-shadow:3px 3px 0 #a9b69a;clip-path:polygon(0 12px,12px 12px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px))}
.radio-record i{position:absolute;inset:8px;border:1px solid #92a584;box-shadow:inset 0 0 0 5px #283e38,inset 0 0 0 6px #647c65}
.radio-record span{display:grid;place-items:center;width:22px;height:22px;background:#d1a166;color:#253c33;font-size:16px;z-index:1}
.radio-record.spinning i{animation:radioSpin 3s steps(12) infinite}
@keyframes radioSpin{to{transform:rotate(360deg)}}
.radio-description{font-size:12px;color:#67735f;line-height:1.7;margin:9px 0}
.radio-status{min-height:42px;padding:9px;background:#e2e8cf;border-left:3px solid #789267;font-size:12px;line-height:1.6}
.radio-v22 .music-transport{margin:12px 0;gap:8px}
.radio-preview{width:100%;min-height:44px;border:1px solid #9eaa88;background:#e7dfbf;font-size:12px;margin-bottom:12px}
.radio-preview[aria-pressed=true]{background:#436b57;color:#fff1cd}
.radio-v22 input[type=range]{height:44px;width:100%;margin:0;touch-action:pan-y}
.radio-v22 .volume-label{font-size:12px;margin-top:10px}
.radio-mix,.radio-queue{padding:13px 0;border-bottom:1px dashed #bcc5a8}
.radio-mix>b,.radio-queue>b{display:block;font-size:13px;margin-bottom:8px;font-weight:400}
.radio-mix p,.radio-queue p{font-size:11px;color:var(--muted);margin:8px 0 0;line-height:1.7}
.radio-filter{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.radio-filter button{min-height:44px;min-width:44px;padding:6px 11px;background:#ecebd8;border:1px solid #a8b49a;font-size:12px}
.radio-filter button.on,.radio-v22 .choice-row button.on{background:var(--ink);color:var(--paper)}
.track-entry{display:flex;align-items:stretch;border:1px solid #b4c0a7;border-left:4px solid var(--track-color);margin:8px 0;background:#fbf6e7}
.radio-v22 .track-row{flex:1;min-width:0;margin:0;border:0;background:transparent;padding:8px 6px;gap:7px;min-height:66px}
.radio-v22 .track-row .track-number{font-size:11px;min-width:17px}
.radio-v22 .track-row>div{min-width:0;flex:1}
.radio-v22 .track-row b{font-size:14px}
.radio-v22 .track-row>div>span{font-size:9px;letter-spacing:0}
.radio-v22 .track-row>small{font-size:12px}
.radio-v22 .track-row i{min-width:14px;font-size:12px}
.radio-v22 .track-row.selected{background:#e7eacd}
.radio-v22 .track-row.playing{box-shadow:inset 0 -3px 0 #789267}
.favorite-track{min-width:44px;min-height:44px;border-left:1px dashed #c2c9ac;font-size:22px;background:#f0edd7;flex-shrink:0}
.favorite-track[aria-pressed=true]{color:#976a28;background:#eaddad}
.radio-empty{padding:18px 12px;font-size:13px;color:var(--muted);background:#ecebd8;line-height:1.8}
@media(max-width:360px){
 .radio-v22{padding:13px 10px}
 .radio-v22 .track-row{gap:5px;padding:8px 5px}
 .radio-v22 .track-row b{font-size:13px}
 .radio-v22 .track-row i{display:none}
 .radio-filter{gap:5px}
 .radio-filter button{padding:6px 9px}
}
@media(prefers-reduced-motion:reduce){.radio-record.spinning i{animation:none}}