/* Cold Start - die Meldung "Neuer Erfolg". Siehe assets/erfolg.js.

   Derselbe Auftritt wie bei der Kiste: gross ueber das ganze Bild, nicht als
   Kaestchen in einer Ecke (Bastian, 2026-10-08: "soll wie mit der Kiste
   komplett ueber den Bildschirm erscheinen und den Erfolg zeigen").

   Eigene Klassen und nicht die der Kiste (.pk-*): zwei Fenster, die sich
   dieselben Regeln teilen, lassen sich nicht mehr einzeln aendern - und das
   eine zeigt eine Kiste zum Oeffnen, das andere eine Auszeichnung. */

.ne-ov {
  position: fixed; inset: 0; z-index: 61;
  background: rgba(8, 6, 4, .88);
  display: grid; place-items: safe center;
  overflow: auto; padding: 20px 0;
}
.ne-ov[hidden] { display: none; }

/* Huelle: Tafel und Knopfzeile untereinander, beide gleich breit - damit
   der Zaehler an der linken Kante der Tafel steht und der Hauptknopf an der
   rechten. Dieselbe Ordnung wie bei der Kiste (.pk-huelle in paket.css). */
.ne-huelle { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.ne-karte {
  /* Feste Breite, nicht nach Inhalt: die Erfolge kommen nacheinander, und
     eine Tafel, die bei jedem Schritt die Breite wechselt, macht die Reihe
     unruhig. Dasselbe Argument wie bei der Kiste. */
  width: min(440px, 92vw);
  text-align: center;
  background: linear-gradient(#211a13, #15100b);
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 22px 24px 20px;
  /* Goldener Schein nach aussen (Bastian, 2026-10-08: "die ganze Kachel
     einen goldenen Schein nach aussen") - zwei Lagen: eng und hell, weit
     und weich. */
  box-shadow: 0 0 14px rgba(232, 196, 90, .45), 0 0 48px rgba(232, 196, 90, .22);
  animation: ne-rein .32s cubic-bezier(.2, .7, .3, 1);
}
@keyframes ne-rein { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.ne-kopf {
  /* groesser (Bastian, 2026-10-08: "Neuer Erfolg soll bitte groesser"), vorher 12px */
  margin: 0 0 18px;
  font: 700 19px var(--font); letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold);
}

/* Das Abzeichen ist der Auftritt. Es kommt mit einem kurzen Schein herein -
   mehr Bewegung braucht es nicht, die Auszeichnung soll feierlich wirken und
   nicht zappeln. */
.ne-ab {
  display: grid; place-items: center;
  min-height: 140px; margin-bottom: 14px;
  animation: ne-ab-auf .5s cubic-bezier(.2, .8, .3, 1);
}
@keyframes ne-ab-auf {
  0%   { transform: scale(.6); opacity: 0; filter: drop-shadow(0 0 0 rgba(232,196,90,0)); }
  60%  { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 0 26px rgba(232,196,90,.75)); }
  100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
}

.ne-titel { margin: 0; font: 700 21px var(--font); color: var(--ink); }
.ne-bereich {
  margin: 3px 0 0;
  font: 600 11px var(--font); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-mute);
}
.ne-text {
  margin: 12px 0 0;
  font: 400 13.5px/1.5 var(--font); color: var(--ink-dim);
}
.ne-xp {
  margin: 14px 0 0;
  font: 700 17px var(--font); color: var(--gold);
}

/* Die Gaben kommen als fertige Reihe aus profile.js (CSProfile.gaben) und
   bringen ihre eigenen Regeln mit (.cs-gaben in profile.css). Hier steht nur
   der Abstand und die Linie darueber. */
.ne-gaben:not(:empty) {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #2a2219;
}

/* DIE KNOPFZEILE STEHT AUSSER DER TAFEL (Bastian, 18.10.2026: "Fuer die
   Erfolgsmeldungen machen wir das genau so, das die Buttons ausserhalb der
   Box stehen"). Zaehler links an der Kante, Knoepfe rechts - genau wie in
   der Kiste. */
.ne-knoepfe {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
}
.ne-knoepfe .btn { white-space: nowrap; }
/* Der Zaehler stand seit dem 2026-10-08 ausserhalb, aber absolut und rechts
   unter der Tafel. Jetzt steht er in der Knopfzeile ganz links - dieselbe
   Stelle wie in der Kiste; zwei Fenster nacheinander sollen den Zaehler
   nicht an zwei Stellen fuehren. */
.ne-n {
  margin-right: auto;
  font: 500 13px var(--font); color: var(--ink-mute); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ne-karte, .ne-ab { animation: none; }
}
@media (max-width: 620px) {
  .ne-karte { padding: 16px 16px 16px; }
  .ne-ab { min-height: 112px; }
}