/* ESAPP HUB — WorkAdventure play fork tema katmanı */

:root {
  --esapp-accent: #67B79B;
  --esapp-accent-dark: #37715d;
  --esapp-bg: #141414;
  --esapp-surface: #1e1e1e;
}

html,
body {
  background-color: var(--esapp-bg) !important;
}

#app,
.cowebsite-manager,
.loading-screen,
.loader,
.progress-loader {
  font-family: Inter, system-ui, sans-serif !important;
}

/* WA native loader — ESAPP overlay gösterilirken gizle */
.loading-screen,
.loader,
.progress-loader,
[class*="loading-screen" i],
[class*="LoadingScreen" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

button.primary,
.btn-primary,
.bg-contrast,
.text-contrast,
[class*="bg-primary"],
a[href].text-primary {
  background-color: var(--esapp-accent) !important;
  border-color: var(--esapp-accent) !important;
  color: #0a0a0a !important;
}

nav,
aside,
.menu-container,
.actionbar,
#menu,
.header-action {
  background-color: rgba(20, 20, 20, 0.92) !important;
}

img[alt*="WorkAdventure" i],
img[src*="workadventure" i],
a[href*="workadventu.re" i] img {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

#esapp-hub-loading {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: radial-gradient(circle at top, #1e2a24 0%, #141414 55%);
  color: #f5f5f5;
  font-family: Inter, system-ui, sans-serif;
  transition: opacity 0.35s ease;
}

#esapp-hub-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

#esapp-hub-loading img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(103, 183, 155, 0.25);
}

#esapp-hub-loading h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--esapp-accent);
  margin: 0;
}

#esapp-hub-loading p {
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
}

#esapp-hub-loading p.status {
  font-size: 11px;
  color: #6b7280;
}

#esapp-hub-loading .bar {
  width: 220px;
  height: 4px;
  background: #2a2a2a;
  border-radius: 999px;
  overflow: hidden;
}

#esapp-hub-loading .bar > span {
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, var(--esapp-accent), #4ade80);
  animation: esapp-load 1.4s ease-in-out infinite;
}

@keyframes esapp-load {
  0%,
  100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(180%);
  }
}

#esapp-hub-badge {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999998;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(20, 20, 20, 0.88);
  border: 1px solid rgba(103, 183, 155, 0.35);
  color: #f5f5f5;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  pointer-events: none;
}

#esapp-hub-badge img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

/* Login / Share — inject.js data-esapp-hidden ile tamamlanır */
button[data-esapp-hidden="1"],
a[data-esapp-hidden="1"] {
  display: none !important;
}