/* ============================================================================
   Shinobi-Thema — die Anime-Ebene über dem Grundgerüst.

   Alles gezeichnet, keine Bilddateien: bleibt bei jeder Größe scharf, färbt
   sich mit den Variablen mit und lädt sofort.
   ========================================================================== */

/* ---------------- Sharingan als Score-Anzeige ---------------- */

.sharingan-ring {
  position: relative;
  flex: none;
}
.sharingan-ring .fortschritt {
  transition: stroke-dashoffset 1.2s cubic-bezier(.22, .8, .28, 1);
}

/* Die Tomoe kreisen langsam — das Auge „lebt", ohne abzulenken.
   Die Farbe setzt jedes Tomoe selbst (Score-Farbe), deshalb hier keine. */
.sharingan-dreh {
  animation: sharingan-kreisen 24s linear infinite;
}
@keyframes sharingan-kreisen { to { transform: rotate(360deg); } }

/* Erwachte Tomoe pulsieren dezent, versetzt zueinander */
.tomoe.erwacht {
  animation: tomoe-puls 3.4s ease-in-out infinite;
  animation-delay: var(--verzoegerung, 0s);
}
@keyframes tomoe-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}

.sharingan-mitte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sharingan-mitte .wert {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
  text-shadow: 0 0 18px currentColor;
}
.sharingan-mitte .label {
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-still);
  margin-top: 5px;
}

.mini-sharingan { position: relative; flex: none; }
.mini-sharingan .zahl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Stirnband als Rangabzeichen ---------------- */

.stirnband {
  flex: none;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .55));
}
.stirnband svg { display: block; }
.stirnband-fortschritt {
  height: 3px;
  background: var(--tinte);
  border-radius: 2px;
  margin: 7px 12px 0;
  overflow: hidden;
}
.stirnband-fortschritt i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b06f2e, var(--gold));
  transition: width 1s cubic-bezier(.22, .8, .28, 1);
  box-shadow: 0 0 8px rgba(244, 162, 97, .6);
}

/* ---------------- Siegelkreis als Deko ---------------- */

.siegelkreis {
  position: absolute;
  pointer-events: none;
  color: var(--chakra);
  opacity: .055;
  animation: siegel-drehen 90s linear infinite;
}
@keyframes siegel-drehen { to { transform: rotate(360deg); } }

.karte { position: relative; overflow: hidden; }
.karte > .siegelkreis {
  top: -70px;
  right: -70px;
}

/* ---------------- Shuriken & Kunai ---------------- */

.shuriken { color: var(--chakra); vertical-align: -2px; }
.shuriken.dreht { animation: shuriken-wirbel 1.1s linear infinite; }
@keyframes shuriken-wirbel { to { transform: rotate(360deg); } }

.kunai { color: var(--text-still); vertical-align: -2px; margin-right: 5px; }
.url-liste a:hover .kunai { color: var(--chakra); }

/* ---------------- Missionen als Schriftrollen ---------------- */

.mission {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .022) 0%, transparent 14%),
    var(--flaeche);
}

/* Rangzeichen im Abzeichen: japanisches Zeichen statt nur Buchstabe */
.rang-abzeichen {
  position: relative;
  font-family: var(--sans);
}
.rang-abzeichen::after {
  content: attr(data-zeichen);
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 9px;
  opacity: .5;
  line-height: 1;
}

/* S-Rang bekommt einen wandernden Schimmer — das ist die dringende Stufe */
.mission.s::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%,
              rgba(230, 57, 70, .085) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: schimmer 5.5s ease-in-out infinite;
}
@keyframes schimmer {
  0%, 100% { background-position: 180% 0; }
  50%      { background-position: -60% 0; }
}

/* ---------------- Chakra-Fluss im Hintergrund ---------------- */

.chakra-fluss {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.chakra-fluss i {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--chakra);
  opacity: 0;
  box-shadow: 0 0 6px var(--chakra);
  animation: chakra-steigen linear infinite;
}
@keyframes chakra-steigen {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  12%  { opacity: .55; }
  80%  { opacity: .3; }
  100% { transform: translateY(-100vh) scale(1.15); opacity: 0; }
}

/* ---------------- Rangaufstieg ---------------- */

.rang-leiste {
  position: relative;
  overflow: hidden;
}
.rang-leiste.aufgestiegen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(244, 162, 97, .22), transparent);
  background-size: 200% 100%;
  animation: aufstieg 1.6s ease-out;
}
@keyframes aufstieg {
  from { background-position: 200% 0; }
  to   { background-position: -80% 0; }
}

/* ---------------- Kopfzeile mit japanischem Beiwort ---------------- */

.kopf h1 {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
}
.kopf h1 .kanji {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-still);
  letter-spacing: 3px;
  opacity: .75;
}

/* ---------------- Marke in der Seitenleiste ---------------- */

.marke-siegel {
  position: relative;
}
/* Drei Tomoe um die Pupille — dasselbe Motiv wie bei den Score-Ringen */
.marke-siegel::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 18%, #12141c 0 15%, transparent 16%),
    radial-gradient(circle at 78% 68%, #12141c 0 15%, transparent 16%),
    radial-gradient(circle at 22% 68%, #12141c 0 15%, transparent 16%);
}

/* Auf schmalen Schirmen ist der Siegelkreis reine Deko, die über den
   Kartenrand ragt - dort lieber weglassen. */
@media (max-width: 900px) {
  .siegelkreis { display: none; }
  .rang-leiste { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sharingan-dreh, .tomoe.erwacht, .siegelkreis,
  .mission.s::before, .chakra-fluss i, .shuriken.dreht {
    animation: none !important;
  }
}

/* ---------------- Zweispaltige Bereiche im Lagebericht ----------------
   Vorher standen die Spaltenbreiten direkt im HTML. Ein Inline-Style
   überstimmt jede Media-Query - auf dem Handy lief die rechte Karte
   deshalb aus dem Bild. Als Klasse lässt es sich sauber umschalten. */
.zustand-reihe { grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.3fr); }
.aufgaben-reihe { grid-template-columns: 1.35fr 1fr; }

@media (max-width: 900px) {
  .zustand-reihe,
  .aufgaben-reihe { grid-template-columns: 1fr; }
}