/* Sharing controls for the operator landing pages. Uses each app's palette vars
 * (--pink, --panel2, --line, --text, --muted) with safe fallbacks. */

.share-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line, #40206a);
  background: var(--panel2, #2f1553); color: var(--text, #f5e9ff);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share-btn:hover { border-color: var(--pink, #ff2d95); }
.share-btn:active { transform: translateY(1px); }
.share-btn .i { font-size: 15px; line-height: 1; }

/* Player join = the primary sharing action. */
.share-btn.primary {
  background: linear-gradient(180deg, var(--pink2, #ff5db1), var(--pink, #ff2d95));
  border-color: transparent; color: #fff;
}
/* Cast, on the display link only — make it obvious. */
.share-btn.cast {
  border-color: var(--pink, #ff2d95); color: var(--pink2, #ff5db1);
}
.share-btn.cast:hover { background: var(--pink, #ff2d95); color: #fff; }

/* Private control-board card — very visible warning, minimal share affordance. */
.urlrow.private {
  border: 1px solid #a33; border-radius: 12px; padding: 12px;
  background: rgba(170, 51, 51, 0.08);
}
.private-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #ff9a9a; border: 1px solid #a33; border-radius: 999px; padding: 2px 10px; margin-bottom: 6px;
}
.private-note { font-size: 12px; color: #ff9a9a; margin-top: 8px; }
.share-btn.private { border-color: #6b2740; color: #ff9a9a; }
.share-btn.private:hover { border-color: #a33; background: rgba(170,51,51,0.15); }

/* Toast */
.qc-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px);
  background: #12071f; color: #f5e9ff; border: 1px solid var(--line, #40206a);
  padding: 11px 18px; border-radius: 12px; font-size: 14px; max-width: 90vw;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 9999; text-align: center;
}
.qc-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .share-btn { flex: 1 1 auto; justify-content: center; }
}