/* LOBBY */
#ppspeed-lobby { max-width:600px; margin:20px auto; font-family: Inter, sans-serif; }
.ppspeed-lobby-card { background:#fff; border-radius:24px; padding:32px; box-shadow:0 12px 40px rgba(0,0,0,0.08); text-align:center; border:1px solid #f3f4f6; }
.ppspeed-badge { background:#fee2e2; color:#dc2626; display:inline-block; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:800; letter-spacing:.5px; margin-bottom:12px; animation: blink 1.5s infinite; }
.ppspeed-lobby-card h2 { font-size:28px; margin:0 0 8px; font-weight:900; }
.ppspeed-lobby-card .subtitle { color:#6b7280; margin-bottom:24px; }
.ppspeed-stats { display:flex; justify-content:center; gap:24px; margin:20px 0; }
.ppspeed-stats .stat { background:#f9fafb; padding:14px 18px; border-radius:16px; min-width:80px; }
.ppspeed-stats .stat span { display:block; font-size:20px; font-weight:800; }
.ppspeed-stats .stat small { color:#9ca3af; font-size:11px; text-transform:uppercase; }
.ppspeed-btn { border:none; border-radius:30px; padding:12px 22px; cursor:pointer; font-weight:700; transition:.2s; text-decoration:none; display:inline-block; }
.ppspeed-btn.primary { background:#111827; color:#fff; }
.ppspeed-btn.primary.large, .ppspeed-btn.large { padding:16px 32px; font-size:16px; }
.ppspeed-btn.secondary { background:#f3f4f6; color:#374151; }
.ppspeed-btn.like { background:#ec4899; color:#fff; }
.ppspeed-btn.pass { background:#f3f4f6; color:#6b7280; }
.ppspeed-btn.extend { background:#fef3c7; color:#92400e; font-size:13px; }
.ppspeed-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.1); }
#pp-speed-join-area .hint { color:#9ca3af; font-size:13px; margin-top:10px; }

.ppspeed-searching { position:relative; width:100px; height:100px; margin:20px auto; display:flex; align-items:center; justify-content:center; }
.pulse-ring { position:absolute; width:100%; height:100%; border:2px solid #ec4899; border-radius:50%; animation: pulse-ring 2s infinite; }
.pulse-ring.delay { animation-delay:1s; }
@keyframes pulse-ring { 0%{transform:scale(.8); opacity:1} 100%{transform:scale(1.4); opacity:0} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.6} }

.ppspeed-how { margin-top:28px; background:#f9fafb; border-radius:16px; padding:18px; text-align:left; }
.ppspeed-how h4 { margin:0 0 12px; font-size:14px; }
.ppspeed-how .steps { display:flex; gap:10px; flex-wrap:wrap; }
.ppspeed-how .steps div { flex:1; min-width:100px; background:#fff; padding:10px; border-radius:12px; font-size:13px; text-align:center; border:1px solid #f3f4f6; }
.ppspeed-how .steps span { background:#111827; color:#fff; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:11px; margin-right:6px; }

/* ROOM */
#ppspeed-room { max-width:900px; margin:0 auto; background:#0f0f0f; border-radius:24px; overflow:hidden; color:#fff; }
.ppspeed-room-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background:#1f1f1f; }
.timer-wrap { text-align:center; }
#pp-speed-timer, #ppspeed-timer { font-size:28px; font-weight:900; font-family:monospace; color:#f87171; display:block; line-height:1; }
.timer-wrap small { color:#9ca3af; font-size:11px; text-transform:uppercase; }
.partner-info { display:flex; align-items:center; gap:10px; }
.partner-info img { width:40px; height:40px; border-radius:50%; }
.partner-info strong { display:block; font-size:14px; }
.partner-info small { color:#9ca3af; font-size:11px; }

.ppspeed-videos { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#000; aspect-ratio:16/9; position:relative; }
.video-box { position:relative; background:#111; overflow:hidden; }
.video-box video { width:100%; height:100%; object-fit:cover; }
.video-box .label { position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,0.6); padding:4px 10px; border-radius:20px; font-size:12px; }
.video-box .placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#1a1a1a; text-align:center; padding:20px; }
.video-box .placeholder img { width:80px; height:80px; border-radius:50%; margin-bottom:12px; }
.video-box.me { border-left:2px solid #000; }

.ppspeed-controls { display:flex; gap:10px; justify-content:center; padding:20px; background:#1f1f1f; flex-wrap:wrap; }
.ctrl-btn { width:48px; height:48px; border-radius:50%; border:none; background:#2a2a2a; color:#fff; font-size:20px; cursor:pointer; }
.ctrl-btn.off { background:#ef4444; }

.result-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.result-card { background:#fff; color:#111; border-radius:24px; padding:32px; max-width:400px; width:100%; text-align:center; }
.result-actions { display:flex; gap:12px; justify-content:center; margin-top:20px; }