/* ============================================================
   BLUNA RAINBOW FRAME v3 – Gemini-Stil animierter Regenbogen-Rand
   Galerie-3000-Karten + Detailseiten-Modal
   (25.08.2026 – Wunsch des Schöpfers, Google-KI-Eingabebox-Stil)
   v3-FIX: inset:0 statt -1.5px – die Karten haben overflow:hidden,
   ein nach außen ragender Rand wurde komplett abgeschnitten.
   Der Rahmen liegt jetzt INNEN auf der Kartenkante.
   ============================================================ */

/* Animierbarer Winkel (moderne Browser) */
@property --bluna-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes bluna-regenbogen-spin {
  to { --bluna-angle: 360deg; }
}

/* ===== GEMEINSAMER RAHMEN (Rand + Glow) ===== */
.bluna-rainbow,
.bluna-rainbow-modal {
  position: relative;
  isolation: isolate;              /* eigener Stacking-Context, ohne Kinder zu zwingen */
}

/* --- Der animierte Regenbogen-Rand (liegt INNEN auf der Kante) --- */
.bluna-rainbow::before,
.bluna-rainbow-modal::before {
  content: '';
  position: absolute;
  inset: 0;                        /* innen – wird von overflow:hidden nicht abgeschnitten */
  border-radius: inherit;
  padding: 2px;                    /* Dicke des Regenbogen-Rands */
  background: conic-gradient(
    from var(--bluna-angle),
    #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b983ff, #ff6bd6, #ff6b6b
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: bluna-regenbogen-spin 3.2s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* --- Weicher Regenbogen-Schimmer (innerer Glow entlang des Rands) --- */
.bluna-rainbow::after,
.bluna-rainbow-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--bluna-angle),
    rgba(255,107,107,.3), rgba(255,217,61,.3), rgba(107,203,119,.3),
    rgba(77,150,255,.3), rgba(185,131,255,.3), rgba(255,107,214,.3),
    rgba(255,107,107,.3)
  );
  filter: blur(10px);
  opacity: .35;
  animation: bluna-regenbogen-spin 3.2s linear infinite;
  z-index: 0;
  pointer-events: none;
}

/* Inhalte, die EXPLIZIT über dem Rahmen liegen sollen (haben bereits
   relative z-10/z-20 in der App) – keine generische Kinder-Regel mehr. */
.bluna-rainbow > [class*="z-10"],
.bluna-rainbow > [class*="z-20"],
.bluna-rainbow-modal > [class*="z-10"],
.bluna-rainbow-modal > [class*="z-20"] {
  position: relative;
}

/* ===== Respekt vor reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .bluna-rainbow::before, .bluna-rainbow::after,
  .bluna-rainbow-modal::before, .bluna-rainbow-modal::after {
    animation: none;
  }
}

/* ============================================================
   TREASURE-GLOW – MAGIC PEARL (Universalschlüssel)
   „Es werde Licht": goldener Puls für LEVEL TREASURE-Badges.
   Die Pearl ist KEIN Level – sie ist der unendliche Schlüssel.
   (26.08.2026 – Wunsch des Schöpfers)
   ============================================================ */
@keyframes bluna-treasure-puls {
  0%, 100% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.55),
                0 0 16px rgba(255, 215, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.95),
                0 0 32px rgba(255, 215, 0, 0.6);
  }
}

.bluna-treasure-glow {
  background: #000 !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  color: #ffd700 !important;
  animation: bluna-treasure-puls 2.4s ease-in-out infinite;
  will-change: box-shadow;
}

@media (prefers-reduced-motion: reduce) {
  .bluna-treasure-glow {
    animation: none;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
}

/* LEVEL-Label (1–10): nur tief schwarzer Hintergrund – Schrift und
   Rahmen behalten ihre Theme-Farben. (26.08.2026) */
.bluna-level-black {
  background: #000 !important;
}

/* TREASURE-Label: goldener Text auf tief schwarzer Box für maximalen
   Kontrast – auf Karte UND Detailseite. (26.08.2026) */

/* ============================================================
   BLUNA UTILITY BOX – Detailseite (SFT-Karte)
   Animierter RGB-Rand für die Besonderheiten, die nur in
   BLUNA-Systemen gelten (z.B. MAGIC PEARL als Universalschlüssel).
   Gleiche Technik wie bluna-rainbow, aber eigenständige Box.
   (26.08.2026 – Wunsch des Schöpfers)
   ============================================================ */
@keyframes bluna-utility-spin {
  to { --bluna-angle: 360deg; }
}

.bluna-utility-box {
  position: relative;
  isolation: isolate;
  z-index: 2;
  border: 2px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(
      from var(--bluna-angle),
      #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b983ff, #ff6bd6, #ff6b6b
    ) border-box;
  animation: bluna-utility-spin 3.2s linear infinite;
}

/* RGB-Effekt NUR am Rand – die alten mask-basierten Pseudo-Elemente
   (Rand + innerer Glow) werden deaktiviert: Sie haben den Farbverlauf
   über die ganze Fläche gelegt und den schwarzen Kontrast zerstört. */
.bluna-utility-box::before,
.bluna-utility-box::after {
  display: none;
}

.bluna-utility-box > *:not(.bluna-utility-bg) {
  position: relative;
  z-index: 2;
}

.bluna-utility-bg {
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  background: #000;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bluna-utility-box::before, .bluna-utility-box::after {
    animation: none;
  }
}

/* ============================================================
   BLUNA UTILITY INFO – Tooltip (ⓘ) unterhalb der Box
   Außerhalb der Box, unten mittig zentriert. Klick öffnet die
   genaue Erklärung: BLUNA-Verwaltung, Ozean & Quelle,
   zusätzliche Geschenke für Halter.
   (26.08.2026 – Wunsch des Schöpfers)
   ============================================================ */
.bluna-utility-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 1.5rem;
}

.bluna-utility-info summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  border: 1px solid rgba(34, 211, 238, 0.4);
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  font-family: ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(34, 211, 238, 0);
}

.bluna-utility-info summary::-webkit-details-marker {
  display: none;
}

.bluna-utility-info summary:hover {
  color: #fff;
  border-color: rgba(34, 211, 238, 0.8);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.35);
  transform: scale(1.06);
}

.bluna-utility-info-tip {
  max-width: 420px;
  width: 100%;
  margin-top: 0.65rem;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: #000;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(34, 211, 238, 0.12);
  text-align: center;
  animation: bluna-info-in 0.3s ease;
}

.bluna-utility-info-tip .bluna-utility-info-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fcd34d;
}

.bluna-utility-info-tip .bluna-utility-info-text {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@keyframes bluna-info-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bluna-utility-info-tip {
    animation: none;
  }
  .bluna-utility-info summary {
    transition: none;
  }
}

/* ============================================================
   PERFORMANCE: Karten zeigen nur das ERSTE FRAME (statisch).
   Volle Animations-Pracht erst bei Interaktion (Hover/Touch/Fokus)
   mit DIESER einen Karte – alle anderen bleiben ruhig.
   ============================================================ */
.bluna-rainbow::before,
.bluna-rainbow::after,
.bluna-rainbow .bluna-treasure-glow {
  animation-play-state: paused;
}

.bluna-rainbow:hover::before,
.bluna-rainbow:hover::after,
.bluna-rainbow:active::before,
.bluna-rainbow:active::after,
.bluna-rainbow:focus-within::before,
.bluna-rainbow:focus-within::after,
.bluna-rainbow:hover .bluna-treasure-glow,
.bluna-rainbow:active .bluna-treasure-glow,
.bluna-rainbow:focus-within .bluna-treasure-glow {
  animation-play-state: running;
}

/* Modal (Fokus-Ebene, nur 1 Instanz) bleibt animiert */

/* ============================================================
   PERFORMANCE 2 (27.08.2026): Nur sichtbare Karten rendern.
   Browser überspringt Layout+Paint für Karten außerhalb des
   Sichtfelds – 197 von 201 Karten werden beim Scrollen nicht
   mehr berechnet. 0 Qualitätsverlust: beim Scrollen sofort
   gerendert, 446px reserviert (kein Springen).
   ============================================================ */
.bluna-rainbow {
  content-visibility: auto;
  contain-intrinsic-size: auto 446px;
}