/* ============================================================
   TikTok Game Hub – Ingame-Menue
   Wird in jedes Spiel eingesetzt. Eigene Tokens, damit es in jedem
   Spiel gleich aussieht, egal welche Variablen dort definiert sind.
   ============================================================ */

.tghm{
  --tghm-accent:#2E2BEE;
  --tghm-card:#FFFFFF;
  --tghm-ink:#141519;
  --tghm-ink-60:#5C5E64;
  --tghm-ink-35:#9A9CA1;
  --tghm-fill:rgba(20,21,26,.04);
  --tghm-fill-2:rgba(20,21,26,.07);
  --tghm-line:rgba(20,21,26,.09);
  --tghm-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tghm-head:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;
}
.tghm *,.tghm *::before,.tghm *::after{box-sizing:border-box}

/* ---------- Ersatz-Button, falls das Spiel keinen eigenen hat ---------- */
/* Traegt sich selbst: liest sich auf hellem wie dunklem Spielhintergrund. */
.tghm-trigger{
  position:fixed;top:12px;left:12px;z-index:2147483000;
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;
  border:none;border-radius:10px;background:var(--tghm-card);color:var(--tghm-ink);
  box-shadow:0 2px 10px rgba(0,0,0,.22),0 0 0 1px rgba(20,21,26,.10);
  font-family:var(--tghm-head);font-weight:700;font-size:14px;letter-spacing:-.1px;
  cursor:pointer;transition:box-shadow .16s,transform .16s;
}
.tghm-trigger:hover{box-shadow:0 4px 16px rgba(0,0,0,.28),0 0 0 1px rgba(20,21,26,.16)}
.tghm-trigger:active{transform:translateY(1px)}
.tghm-trigger .tghm-chev{
  width:7px;height:7px;border-right:2px solid var(--tghm-ink-35);
  border-bottom:2px solid var(--tghm-ink-35);transform:rotate(45deg) translate(-1px,-1px);
}

/* ---------- Logo in der Werkzeugleiste ---------- */
.tghm-logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;pointer-events:none;z-index:5;
}
.tghm-logo img{
  height:var(--tghm-logo-h,30px);width:auto;display:block;
  max-width:min(340px,32vw);object-fit:contain;
}
/* Auf schmalen Leisten waere kein Platz zwischen Knopf und Reitern. */
@media (max-width:899px){
  .tghm-logo{display:none}
}

/* ---------- Ueberlagerung ---------- */
.tghm-scrimlayer{position:fixed;inset:0;z-index:2147483001;background:transparent}

/* ============================================================
   Klappmenue (schmale Fassung, z. B. Handy)
   ============================================================ */
.tghm-menu{
  position:fixed;z-index:2147483002;width:320px;max-width:calc(100vw - 24px);
  background:var(--tghm-card);border:1px solid var(--tghm-line);border-radius:16px;
  box-shadow:0 18px 48px rgba(20,21,26,.18),0 2px 6px rgba(20,21,26,.06);
  font-family:var(--tghm-sans);color:var(--tghm-ink);font-size:14px;line-height:1.4;
  padding:6px;overflow:hidden;animation:tghm-in .14s ease-out;
}
@keyframes tghm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tghm-menu{animation:none}}

.tghm-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 12px 8px}
.tghm-head__title{
  font-family:var(--tghm-head);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tghm-ink-35);
}
.tghm-head__meta{font-size:12px;color:var(--tghm-ink-60);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.tghm-list{max-height:46vh;overflow-y:auto;overscroll-behavior:contain;padding:0 2px;margin:0;list-style:none}
.tghm-list::-webkit-scrollbar{width:8px}
.tghm-list::-webkit-scrollbar-thumb{background:var(--tghm-fill-2);border-radius:99px}

.tghm-item{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 10px;border:none;border-radius:10px;background:none;text-align:left;
  color:inherit;font:inherit;text-decoration:none;cursor:pointer;transition:background .12s;
}
.tghm-item:hover,.tghm-item:focus-visible{background:var(--tghm-fill);outline:none}
.tghm-item:focus-visible{box-shadow:inset 0 0 0 2px var(--tghm-accent)}
.tghm-item[aria-current="true"]{background:var(--tghm-fill-2)}

.tghm-thumb{
  flex:0 0 auto;width:27px;height:39px;border-radius:6px;background:var(--tghm-fill-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--tghm-head);font-weight:800;font-size:11px;color:var(--tghm-ink-35);
}
.tghm-thumb img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.tghm-item.is-locked .tghm-thumb img{filter:grayscale(1);opacity:.55}
.tghm-scrim{display:none}

.tghm-text{min-width:0;flex:1 1 auto}
.tghm-name{
  display:block;font-family:var(--tghm-head);font-weight:700;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tghm-sub{display:block;font-size:11.5px;color:var(--tghm-ink-60);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tghm-item.is-locked .tghm-name{color:var(--tghm-ink-60)}

.tghm-flag{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;
  font-family:var(--tghm-head);font-weight:700;font-size:10px;letter-spacing:.02em;
}
.tghm-flag--badge{background:var(--tghm-accent);color:#fff}
.tghm-flag--lock{background:var(--tghm-fill-2);color:var(--tghm-ink-60)}
.tghm-flag--lock svg{width:11px;height:11px;fill:currentColor}
.tghm-check{flex:0 0 auto;width:16px;height:16px;fill:var(--tghm-accent)}

/* Konto-Aktionen: schmal im Menue, breit in der Werkzeugleiste */
.tghm-actions{display:flex;flex-direction:column;gap:2px;padding:6px 2px 2px;
  margin-top:6px;border-top:1px solid var(--tghm-line)}
.tghm-action{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--tghm-ink);font-family:var(--tghm-sans);font-size:13px;font-weight:600;
  text-decoration:none;transition:background .12s;
}
.tghm-action:hover{background:var(--tghm-fill)}
.tghm-ico{flex:0 0 auto;width:16px;height:16px;fill:var(--tghm-ink-35)}
.tghm-action:hover .tghm-ico{fill:var(--tghm-ink)}

/* ============================================================
   Breite Fassung: Schublade des Rahmens
   Gleiche Flaeche wie die Werkzeugleiste, ohne Schatten, volle Breite.
   ============================================================ */
.tghm-menu--wide{
  width:auto;max-width:none;left:0;right:0;
  padding:6px 12px 14px;border:none;border-radius:0;box-shadow:none;
  background:var(--tghm-bg,#F2F2EF);
  animation:tghm-drop .16s ease-out;
}
@keyframes tghm-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tghm-menu--wide{animation:none}}

.tghm-menu--wide .tghm-head{padding:2px 4px 10px}

/* Genau eine Reihe – bei vielen Spielen laesst sie sich seitlich schieben. */
.tghm-menu--wide .tghm-list{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,190px);
  gap:12px;max-height:none;padding:6px 4px 10px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.tghm-menu--wide .tghm-list > li{scroll-snap-align:start}
.tghm-menu--wide .tghm-list::-webkit-scrollbar{height:8px;width:8px}
.tghm-menu--wide .tghm-list::-webkit-scrollbar-thumb{background:var(--tghm-fill-2);border-radius:99px}
.tghm-menu--wide .tghm-list::-webkit-scrollbar-thumb:hover{background:rgba(20,21,26,.16)}
.tghm-menu--wide .tghm-item{
  position:relative;display:block;aspect-ratio:9/13;padding:0;overflow:hidden;
  border-radius:14px;background:#141519;color:#fff;
  transition:box-shadow .18s;
}
/* Kein Anheben: der waagerechte Scrollbereich wuerde die Kachel oben abschneiden.
   Stattdessen zoomt das Cover leicht. */
.tghm-menu--wide .tghm-item:hover{box-shadow:0 0 0 2px rgba(20,21,26,.14)}
.tghm-menu--wide .tghm-item .tghm-thumb img{transition:transform .35s ease}
.tghm-menu--wide .tghm-item:hover .tghm-thumb img{transform:scale(1.06)}
.tghm-menu--wide .tghm-item:hover .tghm-scrim{
  background:linear-gradient(to top,rgba(10,11,15,.92) 0%,rgba(10,11,15,.55) 45%,rgba(10,11,15,.2) 100%);
}
.tghm-menu--wide .tghm-item[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--tghm-accent)}
.tghm-menu--wide .tghm-item:focus-visible{box-shadow:inset 0 0 0 3px var(--tghm-accent)}

.tghm-menu--wide .tghm-thumb{
  position:absolute;inset:0;width:100%;height:100%;border-radius:0;
  font-size:26px;color:rgba(255,255,255,.3);background:none;
}
.tghm-menu--wide .tghm-item.is-locked .tghm-thumb img{filter:grayscale(1) brightness(.7);opacity:1}

.tghm-menu--wide .tghm-scrim{
  display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,11,15,.9) 0%,rgba(10,11,15,.4) 34%,rgba(10,11,15,0) 64%);
}

.tghm-menu--wide .tghm-text{position:absolute;left:0;right:0;bottom:0;padding:11px 12px;z-index:2}
.tghm-menu--wide .tghm-name{
  font-size:13.5px;color:#fff;white-space:normal;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.tghm-menu--wide .tghm-item.is-locked .tghm-name{color:#fff}
.tghm-menu--wide .tghm-sub{font-size:11px;color:rgba(255,255,255,.72);margin-top:2px}

.tghm-menu--wide .tghm-flag{
  position:absolute;top:9px;left:9px;z-index:2;
  background:rgba(10,11,15,.72);color:#fff;backdrop-filter:blur(6px);
}
.tghm-menu--wide .tghm-flag--badge{background:var(--tghm-accent)}
.tghm-menu--wide .tghm-flag--lock svg{fill:#fff}
.tghm-menu--wide .tghm-check{
  position:absolute;top:9px;right:9px;z-index:2;width:22px;height:22px;padding:4px;
  background:var(--tghm-accent);fill:#fff;border-radius:50%;
}

/* Aktionen in der Werkzeugleiste – verdecken die Reiter des Spiels */
.tghm-actions--bar{
  position:fixed;z-index:2147483003;flex-direction:row;align-items:center;justify-content:flex-end;
  gap:4px;margin:0;padding:0 12px;border-top:none;background:var(--tghm-bg,#F2F2EF);
}
.tghm-actions--bar .tghm-action{
  height:42px;padding:0 14px;border-radius:8px;background:var(--tghm-fill-2);
  font-family:var(--tghm-head);font-weight:700;font-size:13.5px;white-space:nowrap;
}
.tghm-actions--bar .tghm-action:hover{background:rgba(20,21,26,.11)}

@media (max-width:899px){
  .tghm-actions--bar{position:static}
}

/* ---------- Demo-Modus ---------- */
.tghm-demo{
  display:block;margin:0 0 10px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(135deg,rgba(46,43,238,.10),rgba(46,43,238,.04));
  box-shadow:inset 0 0 0 1px rgba(46,43,238,.18);
  font-family:var(--tghm-sans);color:var(--tghm-ink);
}
.tghm-demo__title{
  display:block;font-family:var(--tghm-head);font-weight:800;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tghm-accent);margin-bottom:4px;
}
.tghm-demo__text{display:block;font-size:12.5px;line-height:1.45;color:var(--tghm-ink-60)}
.tghm-demo__cta{
  display:inline-flex;align-items:center;justify-content:center;margin-top:10px;
  height:36px;padding:0 16px;border-radius:9px;background:var(--tghm-accent);color:#fff;
  font-family:var(--tghm-head);font-weight:700;font-size:13px;text-decoration:none;
  transition:opacity .16s;
}
.tghm-demo__cta:hover{opacity:.9}
.tghm-demo--floating{
  position:fixed;left:12px;bottom:12px;z-index:2147483000;max-width:300px;
  background:var(--tghm-card);box-shadow:0 12px 32px rgba(0,0,0,.24),0 0 0 1px rgba(20,21,26,.10);
}

/* Gesperrte Einstellungsgruppen */
details.tghm-locked-group > .bd{opacity:.45;pointer-events:none;filter:grayscale(.6)}
details.tghm-locked-group > summary{opacity:.75}
.tghm-locked-pane{opacity:.45;pointer-events:none;filter:grayscale(.6)}
.tghm-grouplock{
  display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 7px;
  border-radius:6px;background:var(--tghm-fill-2);color:var(--tghm-ink-60);
  font-family:var(--tghm-head);font-weight:700;font-size:10px;letter-spacing:.02em;
}
.tghm-grouplock svg{width:10px;height:10px;fill:currentColor}


/* ============================================================
   Werkzeugleiste der Spiele auf schmalen Bildschirmen
   Standardmaessig quetschen sich Umschalter und Reiter in eine Zeile.
   Hier bekommen die Reiter eine eigene Zeile ueber die volle Breite.
   ============================================================ */
@media (max-width:720px){
  #toolbar{
    height:auto;flex:0 0 auto;flex-wrap:wrap;align-items:center;
    gap:8px;padding:8px 10px;overflow:visible;
  }
  #toolbar .spacer{display:none}

  #gamePicker{flex:1 1 auto;min-width:0;height:40px}
  #gamePicker #gameName{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  #toolbar #tabs{
    flex:1 1 100%;width:100%;display:flex;gap:4px;overflow:visible;
  }
  #toolbar #tabs button{
    flex:1 1 0;min-width:0;height:38px;padding:0 8px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

/* Sehr schmal: Vorschau-Flaggen im Umschalter weglassen. */
@media (max-width:400px){
  #gamePicker .flagpair{display:none}
}