/* GP Games - Local multiplayer / phone-as-controller: desktop overlay, TV invite panel, join-page pad. */

.gp-lmp-overlay {
  position: fixed; inset: 0; z-index: 99990; background: rgba(8, 9, 16, .82);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  backdrop-filter: blur(3px);
}
.gp-lmp-card {
  width: 100%; max-width: 420px; background: #15172a; border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 28px 24px; text-align: center; color: #f1f1f8;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.gp-lmp-card h2 { margin: 4px 0 6px; font-size: 1.3rem; }
.gp-lmp-card p { margin: 0 0 18px; color: #a9abc4; font-size: .92rem; }
.gp-lmp-icons { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.gp-lmp-icons svg { width: 40px; height: 40px; color: #8b7bff; }
.gp-lmp-icons .gp-lmp-ico-pad { color: #27d9a0; }

.gp-lmp-choice-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gp-lmp-btn {
  flex: 1 1 140px; min-width: 120px; padding: 14px 10px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 1rem; font-weight: 700; color: #fff; background: #2a2d47; transition: transform .12s, background .15s;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none;
}
.gp-lmp-btn:hover { transform: translateY(-1px); }
.gp-lmp-btn small { font-weight: 500; font-size: .78rem; opacity: .85; }
.gp-lmp-btn.gp-lmp-try { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.gp-lmp-btn.gp-lmp-skip { background: #30324a; }
.gp-lmp-btn.gp-lmp-player { background: #22243a; }
.gp-lmp-btn.gp-lmp-player:hover { background: #2d2f4a; }

.gp-lmp-qr { margin: 4px auto 14px; display: flex; justify-content: center; }
.gp-lmp-qr svg { border-radius: 10px; background: #fff; padding: 8px; }
.gp-lmp-wait { color: #cfd0e6; font-size: .95rem; margin-bottom: 16px; }
.gp-lmp-loading { color: #a9abc4; }

/* ---- "invite other players" panel on the TV's own controller page ---- */
.gp-lmp-invite { position: fixed; left: 14px; bottom: 90px; z-index: 40; max-width: 260px; }
.gp-lmp-invite-toggle {
  background: rgba(20,21,36,.92); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 8px 14px; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.gp-lmp-invite-body {
  margin-top: 8px; background: #15172a; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 12px; color: #d6d7ea; font-size: .82rem; text-align: center;
}
.gp-lmp-invite-qr svg { background: #fff; border-radius: 8px; padding: 6px; }

/* ---- the control pad on the join page (/lmp/<room>/), used by players 2-4 ---- */
.gp-lmp-join .gptv-panel { text-align: center; }
.gp-lmp-slot-pill {
  display: inline-block; margin: 2px auto 14px; padding: 5px 12px; border-radius: 999px;
  background: rgba(124,58,237,.18); color: #c9b6ff; font-size: .82rem; font-weight: 600;
}
.gp-lmp-dpad, .gp-lmp-face { position: relative; width: 150px; height: 150px; margin: 10px auto; }
.gp-lmp-dpad button, .gp-lmp-face button {
  position: absolute; width: 50px; height: 50px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
  background: #22243a; color: #fff; font-size: 1.1rem; touch-action: none; user-select: none;
}
.gp-lmp-dpad button.on, .gp-lmp-face button.on, .gp-lmp-shoulders button.on { background: #7c3aed; }
.gp-lmp-dpad .u { top: 0; left: 50px; } .gp-lmp-dpad .d { top: 100px; left: 50px; }
.gp-lmp-dpad .l { top: 50px; left: 0; } .gp-lmp-dpad .r { top: 50px; left: 100px; }
.gp-lmp-face button:nth-child(1) { top: 0; left: 50px; } .gp-lmp-face button:nth-child(2) { top: 50px; left: 0; }
.gp-lmp-face button:nth-child(3) { top: 50px; left: 100px; } .gp-lmp-face button:nth-child(4) { top: 100px; left: 50px; }
.gp-lmp-shoulders { display: flex; gap: 14px; justify-content: center; margin-top: 16px; }
.gp-lmp-shoulders button {
  width: 90px; height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: #22243a; color: #fff; font-weight: 700; touch-action: none; user-select: none;
}

@media (max-width: 420px) {
  .gp-lmp-card { padding: 22px 16px; }
  .gp-lmp-btn { min-width: 100px; }
}