/* ============================================================
   gdti-frame.css · Universal-Rahmen für ALLE g--d-Seiten
   Über-Navi (Welten-Ring) oben + Control-Panel unten.
   Setzt auf gdti.css (Tokens) auf. Lädt zusätzlich gdti-nav.css.
   v0.1 · 2026-06-04 · Agi
   ============================================================ */

:root{
  --gf-overnav-h: 64px;
  --gf-world-gap: 0px;             /* Dock-Vergrößerung übernimmt Abstand */
  --gf-ring-bg: linear-gradient(180deg,#2a2622,#1b1815);
}

/* Seite bekommt oben Platz für die Über-Navi */
body.gf-has-frame{ padding-top: var(--gf-overnav-h); }

/* ========== ÜBER-NAVI (oben, volle Breite) ========== */
.gf-overnav{
  position:fixed; top:0; left:0; right:0; height:var(--gf-overnav-h); z-index:90;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 26px; gap:14px;
  background:var(--gf-bar, var(--gf-ring-bg));
  border-bottom:2px solid var(--gf-bar-edge, rgba(0,0,0,.35));
  background-size:cover, 200px 100%;
  box-shadow:0 2px 14px rgba(0,0,0,.25);
  font-family:var(--gdti-font);
}

/* —— LINKS: Breadcrumbs (oben) + Titel (darunter) —— */
.gf-left{ justify-self:start; display:flex; flex-direction:column; gap:3px; min-width:0; padding-left:8px; }
.gf-crumbs{ display:flex; align-items:center; gap:5px; font-size:10px; letter-spacing:.04em;
  color:var(--gf-crumb-ink,rgba(255,255,255,.55)); text-transform:uppercase; }
.gf-crumbs a{ color:var(--gf-crumb-ink,rgba(255,255,255,.6)); text-decoration:none; padding:1px 5px; border-radius:8px; transition:.15s; }
.gf-crumbs a:hover{ background:var(--gdti-orange); color:#fff; }
.gf-crumbs .sep{ opacity:.4; }
.gf-title{ font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--gf-bar-ink,#fff); line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* —— MITTE: Welten-Ring im VU-Meter-Display hinter Glas —— */
.gf-display{
  justify-self:center; position:relative;
  width:172px; height:52px; border-radius:var(--gf-display-radius,11px); overflow:hidden;
  background:var(--gf-display-bg, radial-gradient(120% 140% at 50% 0%, #14110e 0%, #0b0907 100%));
  border:2px solid var(--gf-display-edge,#000); box-shadow:inset 3px -3px 9px rgba(255,166,90,.22), inset -3px 3px 9px rgba(0,0,0,.30);
  cursor:pointer; user-select:none; touch-action:pan-y;
}
/* seitlicher Verlauf entfernt (Jens 7.6.) — harte Kante, kein Fade L/R */
.gf-display{ -webkit-mask:none; mask:none; }
.gf-display.gf-holding{ cursor:grabbing; overflow:visible; z-index:95;
  -webkit-mask:none; mask:none; }
.gf-display.gf-holding .gf-ring{ overflow:visible; }
/* Glasscheibe-Reflex */
.gf-display::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:10px;
  background:
    radial-gradient(90% 90% at 92% 100%, rgba(255,180,110,.22) 0%, transparent 50%),
    linear-gradient(315deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 28%, transparent 52%);
}
/* ganz leichter oranger Glow an den Highlight-Seiten (Lichtquelle = oK rechts-unten) */
.gf-display{ box-shadow:inset 3px -3px 9px rgba(255,166,90,.22), inset -3px 3px 9px rgba(0,0,0,.30),
  0 0 0 1px rgba(255,106,0,.10), 4px 6px 16px -6px rgba(255,106,0,.28); }
/* dunkler Schatten links-oben, dezent */
.gf-display::before{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(95% 95% at 8% 0%, rgba(0,0,0,.26), transparent 58%); }

.gf-ring{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.gf-world{
  position:absolute; top:50%; left:50%; transform-origin:center;
  font-weight:800; letter-spacing:-.02em; white-space:nowrap;
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .28s, color .2s, filter .28s;
  color:#fff;
}
.gf-world .wsub{ display:block; font-size:7px; letter-spacing:.35em; text-transform:uppercase;
  color:rgba(255,255,255,.45); text-align:center; margin-top:1px; font-weight:600; }
.gf-world.center .wsub{ color:var(--gdti-orange); }
/* Welten-Logo: FESTE Font, theme-unabhängig (Jens 7.6. — Logo bleibt immer gleich) */
.gf-world .wlogo{ font-family:'Inter Tight','Inter',system-ui,sans-serif !important; }
/* Welt-Tierchen-Dots im Logo (g ··· d) */
.gf-world .wlogo .dot{ display:inline-block; width:.34em; height:.34em; border-radius:50%; }
.gf-world.center{ color:var(--gf-world-ink,#fff)!important; filter:drop-shadow(0 0 8px rgba(244,124,32,.5))!important; }
.gf-world.dim{ color:var(--gf-world-dim-ink,rgba(255,255,255,.42))!important; text-shadow:none!important; filter:none!important; }
.gf-world.dim .wsub{ color:var(--gf-world-dim-ink,rgba(255,255,255,.28))!important; opacity:.7; }
.gf-overnav{ color:var(--gf-bar-ink,#f3ece0); transition:background .5s, border-color .5s; }

/* —— RECHTS: Tierchen-Reihe (Spirit-Animals, bunt rund) + eigenes + Inneres —— */
.gf-right{ justify-self:end; display:flex; align-items:center; gap:10px; }
.gf-critters{ display:flex; align-items:center; gap:-4px; }
/* Spirit-Animal-Token: runder Farbkreis, kein Glow. Weiße Augen via .eyes-Overlay */
.gf-critter{ width:27px; height:27px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  cursor:pointer; position:relative; transition:transform .18s ease, opacity .25s; border:none;
  overflow:visible; }
/* AI-Tierchen (Ra & Co): flat quadratisch statt rund */
.gf-critter.ai{ border-radius:5px; }
/* weiße Augen-Paar (zwei Punkte) */
.gf-critter .eyes{ position:absolute; top:8px; left:0; right:0; display:flex; justify-content:center; gap:5px; pointer-events:none; }
.gf-critter .eyes i{ width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.gf-critter .eyes i::after{ content:''; display:block; width:2px; height:2px; border-radius:50%; background:#222; margin:1.5px auto 0; }
.gf-critter:hover{ filter:brightness(1.12); opacity:1!important; z-index:6!important; }
.gf-critter{ transition:transform .15s, opacity .15s, filter .15s; }
/* blass = nicht aktiv */
/* Hover-Tooltip: weiter weg, dunkler HG, klarer Kontrast + kleiner Pfeil */
.gf-critter[data-name]:hover::after{ content:attr(data-name); position:absolute; top:40px; left:50%;
  transform:translateX(-50%); background:#1a1714; color:#fff; font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:10px; white-space:nowrap; z-index:60; letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); }
.gf-critter[data-name]:hover::before{ content:''; position:absolute; top:33px; left:50%;
  transform:translateX(-50%); border:5px solid transparent; border-bottom-color:#1a1714; z-index:60; }
/* eigenes Tierchen: etwas größer, orange Ring */
.gf-mine{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; transition:.15s; position:relative; border:2px solid var(--gdti-orange); }
.gf-mine:hover{ transform:scale(1.1); }
/* Inneres: Name-Pill mit ▾ wie im gdti-SS "Je ▾" */
.gf-inner{ display:flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--gdti-radius-pill,22px);
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.22); color:#fff;
  font-weight:700; font-size:13px; cursor:pointer; transition:.15s; }
.gf-inner .av{ width:22px; height:22px; border-radius:50%; background:var(--gdti-orange); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.gf-inner:hover{ background:var(--gdti-orange); border-color:var(--gdti-orange); }

@media(max-width:820px){
  .gf-display{ width:200px; }
  .gf-critters .gf-critter:nth-child(n+4){ display:none; }
  .gf-title{ font-size:17px; }
}
@media(max-width:560px){
  .gf-display{ width:150px; height:42px; }
  .gf-crumbs{ display:none; }
}

/* —— Je-Dropdown (Inneres-Menü) stylish —— */
.gf-inner{ position:relative; }
.gf-menu{ position:absolute; top:46px; right:0; min-width:208px;
  background:var(--gf-panel,#1c1814); border:2px solid var(--gdti-orange,#FF6A00); border-radius:14px;
  box-shadow:0 12px 40px rgba(40,20,5,.28);
  padding:10px; z-index:120; opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none;
  transition:opacity .18s, transform .18s; font-family:var(--gdti-font); }
.gf-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.gf-menu .head{ display:flex; align-items:center; gap:9px; padding:6px 6px 10px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:6px; }
.gf-menu .head .big{ width:38px; height:38px; border-radius:50%; background:var(--gdti-orange); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
.gf-menu .head b{ font-size:14px; color:var(--gf-ink,#f3ece0)!important; display:block; }
.gf-menu .head small{ font-size:11px; color:var(--gf-ink-soft,#b8b2a6); }
.gf-menu .gf-mi, .gf-menu a.gf-mi{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; cursor:pointer;
  font-size:13px; color:var(--gf-ink,#f2efe9)!important; text-decoration:none; transition:background .13s, color .13s; }
.gf-mi .ic{ width:20px; text-align:center; font-size:15px; }
.gf-mi:hover{ background:var(--gdti-orange)!important; color:#fff!important; }
.gf-menu .sep{ height:1px; background:rgba(255,255,255,.14); margin:5px 4px; }

/* —— g--d Logo-Augen: orange oo hinter den -- (gdti-Move) —— */
/* g--d Logo-Augen: oo orange (innen gefüllt) GENAU unter den -- */
.gf-world .wlogo .gd-eyes{ position:relative; display:inline-block; letter-spacing:.04em; }
/* orange Augen-"oo" — gefüllt, leicht runder Eindruck */
.gf-world .wlogo .gd-eyes .gd-oo{ color:var(--gdti-orange,#FF6A00); -webkit-text-fill-color:var(--gdti-orange,#FF6A00); font-weight:inherit; letter-spacing:-.04em; }
/* die "--" = zugekniffene Augenstriche: vertikal MITTIG über die oo, in Display-Tinte, schmal */
.gf-world .wlogo .gd-eyes .gd-dd{ position:absolute; left:0; right:0; top:50%; transform:translateY(-52%);
  text-align:center; letter-spacing:-.02em; color:var(--gf-world-ink,#fff); pointer-events:none;
  font-weight:700; font-size:.82em; }
.gf-world .wlogo .gd-d{ margin-left:.02em; }