/* Remote artwork follows the supplied handset layout, with a collapsible dock. */
#remoteBar { width: min(100%, 420px); background: var(--surface); padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
#remoteBar .remoteBarContent { max-height: calc(100vh - 145px); max-height: min(570px, calc(100dvh - 145px)); overflow-y: auto; overscroll-behavior: contain; }
#remoteBar #nowTitle { color: var(--text3); font-size: 11px; margin: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remoteDpad { position: relative; width: 206px; height: 206px; margin: 24px auto 28px; border-radius: 50%; background: linear-gradient(135deg, var(--panel2), var(--panel)); }
.remoteDpad button { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; }
.remoteDpad img { width: 24px; height: 24px; }
.remoteDpad .up { top: 0; left: 74px; }
.remoteDpad .down { bottom: 0; left: 74px; }
.remoteDpad .left { left: 0; top: 74px; }
.remoteDpad .right { right: 0; top: 74px; }
.remoteDpad .ok { left: 60px; top: 60px; width: 86px; height: 86px; color: var(--primary); background: var(--panel2); box-shadow: 0 -2px 3px rgba(0,0,0,.3); font-size: 22px; font-weight: 500; }
.remoteKeyGrid { display: grid; width: 254px; margin: 0 auto 8px; grid-template-columns: repeat(3, 62px); justify-content: space-between; gap: 16px 0; }
.remoteKeyGrid button { display: flex; align-items: center; justify-content: center; width: 62px; height: 42px; border: 0; border-radius: 11px; background: linear-gradient(var(--panel2), var(--panel)); color: #fff; padding: 0; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,.3); }
.remoteKeyGrid img { width: 20px; height: 20px; }
.remoteKeyGrid .uiIcon { width: 18px; height: 18px; }
.remoteKeyGrid button[hidden] { display: block; visibility: hidden; pointer-events: none; }
/* Keys the current cast cannot use stay visible but dimmed; a tap shows a toast. */
.remoteKeyGrid button.isDisabled { opacity: .35; }
.remoteKeyGrid button.isDisabled:active { background: linear-gradient(var(--panel2), var(--panel)); }
.remoteDpad button.isDisabled { opacity: .35; }
.remoteDpad button.isDisabled:active { background: transparent; }
.remoteDpad .ok.isDisabled:active { background: var(--panel2); }
.remoteDpad button:focus-visible, .remoteKeyGrid button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.remoteDpad button:active, .remoteKeyGrid button:active { background: var(--active); }
@media (max-height: 600px) { .remoteDpad { margin-top: 12px; margin-bottom: 16px; } }