/* Pairing panel (start screen) and status chip (in game) for the phone controller. Small rectangles, no pills. */
.rp { position: absolute; right: 28px; bottom: 28px; width: 262px; padding: 10px 12px 12px; box-sizing: border-box; background: rgba(18,18,21,.9); border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  color: #f4f4f2; font: 600 12px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; z-index: 3; }
.rp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: rgba(244,244,242,.7); }
.rp-head b { font-weight: 700; }
.rp-led { display: block; width: 8px; height: 8px; border-radius: 2px; background: #5b5d63; flex: none; }
.rp.wait .rp-led, .rc.wait .rp-led { background: #ffc21a; box-shadow: 0 0 6px rgba(255,194,26,.7); }
.rp.on .rp-led, .rc.on .rp-led { background: #3ddc84; box-shadow: 0 0 6px rgba(61,220,132,.7); }
.rp.lost .rp-led, .rc.lost .rp-led { background: #ff4a3d; box-shadow: 0 0 6px rgba(255,74,61,.8); animation: rpblink .7s steps(2) infinite; }
.rp-body { display: flex; gap: 12px; align-items: flex-start; }
.rp-qr { width: 112px; height: 112px; flex: none; background: #fff; border-radius: 3px; overflow: hidden; }
.rp-qr svg { display: block; width: 100%; height: 100%; }
.rp-side { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-code { font: 800 30px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; margin-right: -.14em; }
.rp-url { font-size: 10px; color: rgba(244,244,242,.55); letter-spacing: .02em; word-break: break-all; }
.rp-stat { font-size: 11px; color: rgba(244,244,242,.85); letter-spacing: .04em; }
.rp.on .rp-qr { display: none; }
.rp.on .rp-body { align-items: center; }
.rp.on .rp-code { font-size: 24px; }
.rp.off .rp-qr { opacity: .35; }
.rc { position: fixed; left: 36px; bottom: 8px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(13,13,15,.55); border-radius: 4px; color: rgba(244,244,242,.8);
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; z-index: 4; }
.rc.off, .rc.wait { opacity: .55; }
body:has(#start:not(.fade)) .rc { display: none; }
#start.fade .rp { display: none; }
@keyframes rpblink { 50% { opacity: .3; } }
@media (max-height: 480px) { .rp { right: 16px; bottom: 14px; width: 232px; padding: 8px 10px 10px; } .rp-qr { width: 92px; height: 92px; } .rp-code { font-size: 26px; } .rp-head { margin-bottom: 8px; } }
@media (max-width: 760px) { .rp { right: 12px; } }