/* Пульт «Бит-машины» на телефоне. */
#remote .rb { min-height: 100%; display: flex; flex-direction: column; padding: 12px 14px 28px; gap: 10px; color: #3b3328; }
.rb-top { display: flex; align-items: center; gap: 8px; }
.rb-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: #c9bb98; }
.rb-name { font-size: 18px; }
.rb-code { color: #7a6f5d; font-size: 13px; flex: 1; }
.rb-leave, .rb-back { font: inherit; font-size: 14px; background: transparent; border: 2px solid #b9ab88; border-radius: 10px; padding: 4px 10px; color: #3b3328; }
.rb-back { align-self: flex-start; margin-bottom: 8px; }
.rb-main { display: flex; flex-direction: column; gap: 10px; }
.rb-hero { text-align: center; padding: 10px 6px; }
.rb-title { font-size: 26px; font-weight: 900; line-height: 1.15; }
.rb-sub { color: #7a6f5d; margin-top: 4px; }
.rb-note { background: #f7e3cf; border-radius: 14px; padding: 12px 14px; }
.rb-note p { font-size: 14px; margin: 6px 0 10px; }
.rb-cards { display: flex; flex-direction: column; gap: 8px; }
.rb-card { font: inherit; color: #3b3328; text-align: left; background: #f4ecd8; border: 2px solid #d9cdae; border-left: 8px solid var(--tone, #c9784f); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.rb-card b { font-size: 20px; }
.rb-card small { color: #7a6f5d; font-style: italic; }
.rb-card span { font-size: 14px; font-weight: 700; color: #7a6f5d; }
.rb-card.st-ok { border-color: #8fb07f; }
.rb-card.st-ok span { color: #4f7f45; }
.rb-card.st-sent span { color: #b97a10; }
.rb-card.st-redo, .rb-card.st-error { border-color: #d9826a; }
.rb-card.st-redo span, .rb-card.st-error span { color: #b5523b; }
.rb-eq { display: flex; gap: 6px; justify-content: center; align-items: flex-end; height: 90px; }
.rb-eq i { width: 16px; height: 100%; border-radius: 8px; background: #c9784f; animation: rbEq 0.9s ease-in-out infinite; }
.rb-eq i:nth-child(2n) { animation-delay: -0.3s; background: #d9a23a; }
.rb-eq i:nth-child(3n) { animation-delay: -0.6s; background: #8fbf7f; }
@keyframes rbEq { 50% { transform: scaleY(0.3); } }
.rb-vote { background: #f4ecd8; border-radius: 16px; padding: 12px; }
.rb-vote h3 { margin: 0 0 8px; }
.rb-opt { display: block; width: 100%; text-align: left; font: inherit; font-weight: 700; color: #3b3328; background: #ebe1c7; border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.rb-opt.on { border-color: #3b3328; background: #f2dfa6; }
.rb-board { list-style: none; padding: 0; margin: 0; }
.rb-board li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #ebe1c7; margin-bottom: 6px; font-weight: 700; }
.rb-board i { width: 12px; height: 12px; border-radius: 50%; }
.rb-board span { flex: 1; }
.rb-award { background: #f2dfa6; border-radius: 12px; padding: 10px 12px; font-weight: 700; text-align: center; }