/* ===========================
   GLNDL.IO – Clean Stylesheet
   =========================== */

/* ---------- Base / Background / Fonts ---------- */
:root{
  --ui-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --accent:  #bb86ff;
  --text:    #f5f2ff;
  --border:  rgba(255,255,255,.16);
}

html{
  background: url(img.jpg) no-repeat center center fixed;
  background-size: cover;
  font-family: var(--ui-font);
  -moz-user-select: none; user-select: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ---------- Hero link (center) & subtext ---------- */
a{
  text-decoration: none;
}
a:link{
  font-family: var(--ui-font);
  text-align: center;
  font-size: 90px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  max-width: 100%; z-index: 3;
  animation: text-flicker-in-glow 6s linear both;
}
txt{
  font-family: var(--ui-font);
  text-align: center;
  font-size: 20px; color: #fff;
  position: absolute; top: 55%; left: 50%; transform: translate(-55%,-50%);
  animation: text-focus-in 1.2s cubic-bezier(.55,.085,.68,.53) 6s both;
}

/* ---------- TS Floating Action Button (bottom-right) ---------- */
.ts-fab{ position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 10010; }
.ts-fab__btn{
  font: inherit; font-weight: 900; letter-spacing: .04em;
  padding: .48rem .9rem; line-height: 1; min-width: 3.2rem;
  border-radius: .8rem; cursor: pointer; color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 28%, transparent);
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ts-fab__btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.28), 0 0 18px var(--accent); }

/* ---------- TS Panel ---------- */
#ts-panel.ts-panel--fab{
  position: fixed; right: 1.25rem; bottom: calc(1.25rem + 52px);
  width: 320px; max-width: calc(100vw - 2rem);
  color: var(--text);
  background: linear-gradient(180deg, rgba(8,8,12,.70), rgba(8,8,12,.55));
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 24px color-mix(in oklab, var(--accent) 24%, transparent);
  overflow: hidden; z-index: 10000;
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
}
.ts-panel__header{
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem .9rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.12); font-weight: 800;
}
/* Entfernt fremde Pseudo-Icons vorm "online" */
#ts-meta::before, .ts-panel__header > span::before{ content:none; display:none; }

.ts-panel__list{ padding:.65rem .9rem .9rem; display:flex; flex-direction:column; gap:.45rem; }
.ts-row{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.ts-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ts-flags{ display:flex; align-items:center; gap:.35rem; }
.ts-badge{ font-size:.72rem; padding:.12rem .35rem; border-radius:.4rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.ts-dot{ width:.5rem; height:.5rem; border-radius:999px; background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* hübscher Punkt als Separator vor "online" */
.ts-sep{
  display:inline-block; width:.35rem; height:.35rem; border-radius:999px;
  background: var(--accent); box-shadow: 0 0 6px var(--accent);
  margin: 0 .4rem -0.06rem .25rem;
}

/* ---------- Countries (bottom-center) ---------- */
#country-stats{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 1rem; z-index: 10005;
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  max-width: min(780px, calc(100vw - 2rem)); justify-content: center;
  font-family: var(--ui-font);
}
#country-stats .vc-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .5rem; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid var(--border); color: var(--text);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 14px color-mix(in oklab, var(--accent) 24%, transparent);
  font-weight:700; font-size:.92rem;
}
#country-stats .vc-chip__flag{ font-size:1rem; line-height:1; }
#country-stats .vc-chip__txt{ opacity:.95; white-space:nowrap; }
#country-stats .vc-chip__num{
  margin-left:.2rem; padding:.04rem .35rem; border-radius:.5rem;
  background: rgba(0,0,0,.25); font-variant-numeric: tabular-nums;
}

/* ---------- Mini-Privacy (bottom-left) ---------- */
.legal-mini{
  position: fixed; left: .9rem; bottom: .9rem; z-index: 100;
  font-size: .86rem; line-height: 1.35; color: var(--text); opacity: .55;
}
.legal-mini:hover{ opacity: .9; }
.legal-mini > summary{
  list-style: none; cursor: pointer; user-select: none;
  padding: .35rem .6rem; border-radius: .6rem;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.legal-mini > summary::-webkit-details-marker{ display:none; }
.legal-mini[open] .legal-mini__panel{
  margin-top:.5rem; max-width:460px; padding:.7rem .8rem; border-radius:12px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(8,8,12,.70), rgba(8,8,12,.55));
  box-shadow: 0 16px 28px rgba(0,0,0,.45), 0 0 16px color-mix(in oklab, var(--accent) 24%, transparent);
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
}
.legal-mini__panel p{ margin:.35rem 0; }
.legal-mini__panel a{ color: var(--accent); text-decoration: underline; }
.legal-mini__meta{ opacity:.75; font-size:.8rem; }

/* ---------- Animations ---------- */
@keyframes text-focus-in{
  0% { filter: blur(12px); opacity: 0; }
  100%{ filter: blur(0);    opacity: 1; }
}
@keyframes text-flicker-in-glow{
  0%,10%,20%,30%,45%,60%,65%,75%,85% { opacity: 0; text-shadow: none; }
  10.1%,30.1%,45.1%,55%,57.1%,60%,65.1%,77.1%,86.1%,100% {
    opacity: 1;
    text-shadow:
      0 0 30px rgba(255,255,255,.45),
      0 0 60px rgba(255,255,255,.25),
      0 0 110px rgba(255,255,255,.1);
  }
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 640px){
  .ts-fab{ right: .9rem; bottom: .9rem; }
  #ts-panel.ts-panel--fab{ right: .9rem; bottom: calc(.9rem + 52px); width: calc(100vw - 1.8rem); }
  #country-stats{ bottom: .9rem; max-width: calc(100vw - 1.8rem); }
  a:link{ font-size: 64px; } /* Hero-Text etwas kleiner auf Handy */
}