/* =====================================================================
   tipps.css — QN.tipps · DAS SPALIER (Bauteil, siehe tipps.js)

   Alle Maße kommen als Pixel aus der Rechnung in tipps.js (dort aus cqmin
   der Bühne gemessen); die Schrift der Lage ist --tf, alles hier hängt in
   em daran. Bewegt wird nur transform und opacity.
   ===================================================================== */

.qt-wirt { position:relative; }
/* Die Messlatte: 100 cqmin der Bühne in Pixeln (ein div — fremde Regeln für i/span im Wirt treffen es nicht). */
.qt-wirt > .qt-mass { position:absolute; left:0; top:0; width:100cqmin !important; height:0 !important; margin:0; padding:0; border:0;
  visibility:hidden; pointer-events:none; }

.qt-lage { position:absolute; z-index:3; pointer-events:none; font-size:var(--tf); }

/* ---- die Linie: vom Platz der Figur zum Punkt ---- */
.qt-linie { position:absolute; height:var(--ld); margin-top:calc(var(--ld) / -2); border-radius:9em;
  background:var(--pf); box-shadow:0 0 0 max(1px, .07em) rgba(10,4,10,.6);
  transform-origin:0 50%; transform:rotate(var(--w)) scaleX(0); opacity:0;
  transition:transform var(--qt-zug, 220ms) cubic-bezier(.3, .7, .2, 1), opacity 120ms linear; }
.qt-linie.da { transform:rotate(var(--w)) scaleX(1); opacity:1; }
.qt-linie.ich { background:var(--du); height:calc(var(--ld) * 1.7); margin-top:calc(var(--ld) * -.85); z-index:1; }

/* ---- der Punkt im Raum ---- */
.qt-punkt { position:absolute; width:var(--pd); height:var(--pd); margin:calc(var(--pd) / -2) 0 0 calc(var(--pd) / -2);
  border-radius:50%; background:var(--f); z-index:2;
  box-shadow:0 0 0 max(1px, .1em) rgba(12,5,10,.82), 0 .1em .3em rgba(0,0,0,.5);
  opacity:0; transform:scale(.3); transition:transform var(--d-mittel) var(--k-schnapp), opacity var(--d-kurz) linear; }
.qt-punkt.da { opacity:1; transform:none; }
.qt-punkt.best { box-shadow:0 0 0 max(1.5px, .15em) var(--ok), 0 .1em .3em rgba(0,0,0,.5); }
.qt-punkt.ich { box-shadow:0 0 0 max(1.5px, .17em) var(--du), 0 .1em .3em rgba(0,0,0,.5); z-index:3; }
/* Der Punkt ist im Haufen ein Stück gerückt: Ein feiner Faden hält ihn an seiner wahren Lage. */
.qt-anker { position:absolute; height:max(1px, .07em); border-radius:9em; background:rgba(255,248,244,.82);
  box-shadow:0 0 0 max(.5px, .04em) rgba(10,4,10,.5); z-index:1;
  transform-origin:0 50%; transform:rotate(var(--w)); opacity:0; transition:opacity var(--d-mittel) linear; }
.qt-anker.da { opacity:1; }

/* ---- die Marke: eine Figur, darunter oder daneben ihr Schild ---- */
.qt-m { position:absolute; width:var(--m); height:var(--m); margin:calc(var(--m) / -2) 0 0 calc(var(--m) / -2); z-index:4;
  opacity:0; transform:scale(.4); transition:transform var(--d-mittel) var(--k-schnapp), opacity var(--d-kurz) linear; }
.qt-m.da { opacity:1; transform:none; }
/* Kein Schlagschatten per filter: Er ließe jede Figur bei ihrem Auftritt Bild für Bild neu zeichnen. */
.qt-m > .qn-av { position:relative; z-index:1; }
.qt-m.ohne > .qn-av { filter:grayscale(.75); opacity:.42; }
/* Während des Auftritts liegen die Teile als eigene Ebenen bereit; danach gibt das Bauteil sie wieder frei. */
.qt-lage.tritt .qt-m, .qt-lage.tritt .qt-punkt, .qt-lage.tritt .qt-linie { will-change:transform, opacity; }

.qt-schild { position:absolute; z-index:2; display:grid; justify-items:center; gap:.12em; white-space:nowrap; line-height:1.05; }
.qt-schild b { font-family:var(--f-display); font-weight:800; font-size:1em; color:var(--t0); text-shadow:0 .1em .3em rgba(0,0,0,.8);
  max-width:5.6em; overflow:hidden; text-overflow:ellipsis; }
.qt-schild i { display:flex; align-items:center; gap:.34em; font-style:normal; font-family:var(--f-mono); font-weight:700; font-size:.94em;
  color:var(--ok); padding:.16em .5em; border-radius:9em; background:rgba(12,6,14,.8);
  box-shadow:inset 0 0 0 .1em color-mix(in srgb, var(--pf) 62%, transparent); font-variant-numeric:tabular-nums; }
.qt-schild i u { width:.86em; height:.86em; border-radius:.26em; background:var(--f); text-decoration:none; flex:none;
  box-shadow:0 0 0 .08em rgba(255,255,255,.55); }
.qt-schild i em { font-style:normal; font-family:var(--f-display); font-weight:800; }
.qt-m.null .qt-schild i { color:var(--t1); }
.qt-m.ohne .qt-schild i { color:var(--t2); box-shadow:inset 0 0 0 .1em rgba(255,255,255,.12); }
.qt-m.ohne .qt-schild b { color:var(--t2); }
.qt-m.best .qt-schild i { background:color-mix(in srgb, var(--ok) 26%, #0c060e); box-shadow:inset 0 0 0 .12em var(--ok); color:#eafff1; }
.qt-m.ich .qt-schild i { background:color-mix(in srgb, var(--du) 30%, #0c060e); box-shadow:inset 0 0 0 .14em var(--du); color:#fff; }
.qt-m.ich .qt-schild b { color:var(--du); }
.qt-m.unten .qt-schild { left:50%; top:100%; transform:translateX(-50%); margin-top:.1em; }
.qt-m.unten.knapp .qt-schild { margin-top:-.5em; }   /* ohne Namen greift das Schild ein halbes em in die Figur */
.qt-m.links .qt-schild { right:100%; top:50%; transform:translateY(-50%); margin-right:.3em; justify-items:end; }
.qt-m.rechts .qt-schild { left:100%; top:50%; transform:translateY(-50%); margin-left:.3em; justify-items:start; }

/* ---- Zeigen (nur am eigenen Schirm): eine Figur tritt hervor, die anderen zurück ---- */
.qt-lage.zeigbar .qt-m, .qt-lage.zeigbar .qt-punkt { pointer-events:auto; }
.qt-lage.zeigt .qt-m.da:not(.an), .qt-lage.zeigt .qt-punkt.da:not(.an), .qt-lage.zeigt .qt-linie.da:not(.an),
.qt-lage.zeigt .qt-anker.da:not(.an) { opacity:.2; }
.qt-lage.zeigt .qt-linie.an { height:calc(var(--ld) * 1.9); margin-top:calc(var(--ld) * -.95); z-index:5; }
.qt-lage.zeigt .qt-punkt.an { transform:scale(1.5); z-index:6; }
.qt-lage.zeigt .qt-m.an { z-index:6; }

@media (prefers-reduced-motion: reduce) {
  .qt-lage .qt-m, .qt-lage .qt-punkt, .qt-lage .qt-linie, .qt-lage .qt-anker { transition:none !important; }
}