/* =====================================================================
   Quiznight 2 · DER SET-WECHSEL — „Durch den Punkt" (laden/set-wechsel.js, am Handy laden/set-wechsel-handy.js).
   Das Portal liegt als eigene Ebene genau über der Bühne (am Handy: ein Abbild des Geräts, darin schnurrt die Karte zum Punkt). Bewegt wird
   transform und opacity; die Iris läuft über clip-path und die Maske des Halbdunkels. Was hier steht, ist der Stand — die Bewegung machen
   die Skripte (Web Animations). Beschreibung, Zeiten, Filme: design/handy/laden/LADEN.md.
   ===================================================================== */
.sw-portal {
  position: fixed; z-index: 2147482000; transform-origin: 0 0; overflow: hidden; pointer-events: none;
  contain: layout paint; isolation: isolate;
}
.sw-portal > * { position: absolute; }
/* VORGESPANNT (Akt 3, vor dem Tipp): jede Ebene auf 0,01 — der Browser rastert nur, was er für sichtbar hält; unter 1/255 übersprang er
   es, und das Rastern fiel in den Tipp. 0,01 sieht niemand. */
.sw-portal.sw-gespannt > * { opacity: .01 !important; }

/* Das Halbdunkel, in das das Finale zurücktritt (es bleibt sichtbar) — erst als Fläche, ab dem Punkt als Maske mit dem Loch der Iris. */
.sw-halb { inset: 0; opacity: 0; will-change: opacity; background: radial-gradient(75% 75% at 50% 46%, rgba(9, 7, 18, .58), rgba(5, 4, 11, .86)); }
.sw-dunkel { left: 0; top: 0; opacity: 0; will-change: opacity; overflow: visible; }

/* Das Abbild der gewählten Karte: ihr Bild und ihre Hülle, deckungsgleich auf ihr. */
.sw-karte {
  overflow: hidden; will-change: transform, opacity; background: #0b0a12;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.sw-karte-bild { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.sw-karte-glanz { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 38%, rgba(0, 0, 0, .25)); }
.sw-karte-kasten { position: absolute; left: 0; top: 0; pointer-events: none; }
.sw-portal .sw-karte-huelle {
  position: absolute; left: 0; top: 0; inset: auto; transform-origin: 0 0; margin: 0; opacity: 1; animation: none; transition: none;
  background: none; box-shadow: none; pointer-events: none;
}
.sw-portal .sw-karte-huelle .sk-buehne { background: none; }
.sw-portal .sw-karte-huelle .sk-buehne > :not(.sk-schleier) { display: none; }
/* Der Strich der Röhre leuchtet: ein helles Blatt in der Karte, warm-weiß mit einem Hauch der Marke. */
.sw-hell { position: absolute; inset: 0; opacity: 0; border-radius: inherit; background: linear-gradient(90deg, #f8d6ff, #fff 30%, #fff 70%, #e6d8ff); }

/* Der Punkt, sein Lichthof (Licht, kein Ding) und der Ring, den er ausschickt, solange es dauert. */
.sw-punkt { border-radius: 50%; will-change: transform, opacity; opacity: 0; pointer-events: none; }
.sw-punkt-kern {
  position: absolute; inset: 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 38% 34%, #fff 0, #fff2fe 22%, #f0a8fb 52%, #c26cf7 100%);
  box-shadow: 0 0 18px 2px rgba(240, 168, 251, .85), 0 0 4px rgba(255, 255, 255, .8);
}
.sw-hof {
  opacity: 0; will-change: transform, opacity; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(250, 210, 255, .42), rgba(214, 120, 248, .16) 42%, rgba(140, 90, 240, 0) 100%);
}
.sw-ring { border-radius: 50%; border: 2px solid rgba(232, 121, 249, .85); will-change: transform, opacity; opacity: 0; pointer-events: none; }
/* Das leere Fach, aus dem die Karte sich zieht: dunkles Glas mit einer feinen Kante (kein Loch, keine Leerfläche — ein Fach). */
.sw-fach {
  opacity: 0; will-change: opacity;
  background: linear-gradient(180deg, rgba(14, 11, 26, .92), rgba(8, 6, 16, .96));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset, 0 10px 30px rgba(0, 0, 0, .35) inset;
}

/* AM HANDY (set-wechsel-handy.js): das Abbild des alten Geräts und die Sperre darüber (fängt Tipps ab, solange darunter die Lobby
   entsteht). Punkt und Lichthof liegen dort fest über dem Abbild. */
.sw-abbild { z-index: 2147481000; pointer-events: none; }
.sw-sperre { position: fixed; z-index: 2147482700; background: transparent; pointer-events: auto; touch-action: none; }
.sw-hand { position: fixed; z-index: 2147482400; pointer-events: none; }