/* OBS / overlay and support UI (Ko-fi) */

/* Hide various UI elements in OBS overlay modes */
body.obs-ua.obs-ui-hidden .settings-btn {
  display: none !important;
}

/* When the OBS \"Hide UI\" toggle is active, hide the entire header bar
   so any new header controls also respect this state. */
body.obs-ua.obs-ui-hidden .va-header {
  display: none !important;
}

body.obs-ua .kofi-link {
  display: none !important;
}

body.obs-overlay .va-header,
body.obs-overlay .main-col-left,
body.obs-overlay .main-col-right,
body.obs-overlay .site-footer {
  display: none !important;
}

body.obs-overlay {
  background: transparent !important;
}

body.obs-overlay .va-header {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* When running inside OBS Browser Source (user agent detection),
   also make the app and header fully transparent so only the wheel shows. */
body.obs-ua {
  background: transparent !important;
}

body.obs-ua .va-header {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide footer disclaimer in OBS browser sources */
body.obs-ua .site-footer {
  display: none !important;
}

/* In OBS browser source, keep role filter buttons visible but
   adjust layout/scale so they do not overlap the wheel. */
html.obs-ua,
body.obs-ua {
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
}

body.obs-ua.modal-open,
html.obs-ua.modal-open {
  overflow: visible !important;
}

body.obs-ua #appMain,
body.obs-ua .main-layout,
body.obs-ua .main-col {
  height: 100% !important;
}

body.obs-ua .main-col-left {
  width: 100% !important;
  align-items: center !important;
}

body.obs-ua #wheelContainer,
body.obs-ua canvas {
  width: 90vh;
  max-width: 90vh;
}

body.obs-overlay .main-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.obs-overlay #teamsModal {
  display: none !important;
}

body.obs-overlay #settingsModal {
  display: none !important;
}

body.obs-overlay #wheelContainer.blurred canvas {
  filter: none !important;
}

body.obs-overlay #winnerModal .modal-content {
  box-shadow: none !important;
  border: none !important;
}

body.obs-overlay #winnerModal .modal-content::before,
body.obs-overlay #winnerModal .modal-content::after {
  content: none !important;
}

body.obs-overlay #winnerModal .modal-button {
  box-shadow: none !important;
}


body.obs-overlay .site-faq {
  display: none !important;
}

body.obs-overlay #siteFooter,
body.obs-overlay .site-footer {
  display: none !important;
}

body.obs-overlay #siteFAQ {
  display: none !important;
}

body.obs-ua .site-faq,
body.obs-ua #siteFAQ {
  display: none !important;
}

/* Ko-fi support link */
.kofi-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.kofi-link:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.3);
}

.kofi-link:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.kofi-link:focus-visible {
  outline: none;
}

.kofi-link-icon {
  font-size: 1rem;
}

.kofi-link-label {
  display: inline-block;
}

/* In OBS, lift Ko-fi slightly so it sits above the OBS UI toggle on the right */
body.obs-ua .kofi-link {
  bottom: calc(16px + env(safe-area-inset-bottom) + 40px);
}

@media (max-width: 820px) {
  .kofi-link {
    padding-inline: 8px;
    gap: 0;
    justify-content: center;
  }

  .kofi-link-label {
    display: none;
  }
}

/* OBS interact UI toggle (only relevant in OBS) */
.obs-ui-toggle {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 11;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.obs-ui-toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}