/* Пульт «33» на телефоне — ванильная палитра. */
#remote { position: fixed; inset: 0; z-index: 20; background: #f4ecd8; color: #3b3328; font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; overflow: auto; }
.r33 { min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: 14px 16px 24px; gap: 10px; user-select: none; -webkit-user-select: none; }
.r33-top { width: 100%; display: flex; align-items: center; gap: 8px; }
.r33-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.r33-name { font-size: 18px; }
.r33-code { color: #7a6f5d; font-size: 13px; flex: 1; }
.r33-leave { font: inherit; font-size: 14px; background: transparent; border: 2px solid #b9ab88; border-radius: 10px; padding: 4px 10px; color: #3b3328; }
.r33-status { margin-top: 8px; font-size: 26px; font-weight: 850; text-align: center; }
.r33-sub { color: #7a6f5d; text-align: center; min-height: 2.8em; max-width: 340px; }
.r33-btn { width: min(72vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 0; margin: 6px 0; background: #d9cdae; color: #8f816a; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 900 30px system-ui, sans-serif; touch-action: none; -webkit-touch-callout: none; transition: transform 0.12s, box-shadow 0.12s, background 0.2s; box-shadow: 0 10px 0 #bfb08c; }
.r33-btn small { font-size: 15px; font-weight: 650; margin-top: 2px; }
.r33-btn.active { background: #e8662c; color: #fff8ec; box-shadow: 0 10px 0 #b04a1c, 0 0 0 10px rgba(232, 102, 44, 0.18); }
.r33-btn.down { transform: translateY(8px) scale(0.97); box-shadow: 0 2px 0 #b04a1c; }
.r33-btn:disabled { cursor: default; }
.r33-me { font-weight: 700; text-align: center; }
.r33-toast { min-height: 1.6em; font-size: 22px; font-weight: 850; opacity: 0; transition: opacity 0.2s; }
.r33-toast.show { opacity: 1; }
.r33-toast.good { color: #4f7f45; }
.r33-toast.bad { color: #b04a1c; }
.r33-board { list-style: none; padding: 0; margin: 4px 0 0; width: min(100%, 360px); }
.r33-board li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #ebe1c7; margin-bottom: 6px; }
.r33-board li.cur { outline: 2px solid #3b3328; }
.r33-board i { width: 10px; height: 10px; border-radius: 50%; }
.r33-board span { flex: 1; }