/*
  Asgard Sprites, sprite.gamerscosmos.com

  Aufbau und Farbwelt wie ragnarok.animecosmos.com (Renés Vorgabe 11.10.2026:
  "das gleiche Farbschimmer, aber vom Artwork komplett unterschiedlich").
  Übernommen sind die Farben, die Schriften, die Kopfleiste und die Lage des
  Hauptbereichs rechts. Anders sind das Bild, die Inhalte und der Kasten: Er
  hat hier eine feste Größe und lässt sich nicht vergrößern.
*/

:root {
  /* Seitenverhältnis des Hintergrundbildes. Ändert sich das Bild, hier anpassen. */
  --stage-w: 1672;
  --stage-h: 941;

  /* EIN Randabstand für alles, was außen anliegt. */
  --edge: clamp(1rem, 3vw, 2.5rem);

  /*
    Breite und rechter Abstand des Hauptbereichs in Prozent der Fensterbreite,
    damit der Kasten fest am Bild hängt: linke Kante = 100 - 36 - 2 = 62 %.
    Im Bild reichen die Flügel des Dämons bis etwa 63 %, die Figuren selbst
    enden früher. Breiter darf der Kasten nicht werden, sonst steht er auf
    den Figuren.
  */
  --panel-width: 36vw;
  --panel-right: 2vw;
  --topbar-height: 4.75rem;
  --panel-head-height: 7rem;
  --panel-inner-x: 1.6rem;

  /* Farben, dieselben wie auf ragnarok.animecosmos.com: dunkel, leicht blau, Gold. */
  --night: #0b1420;
  --ink: #eaf2ff;
  --ink-dim: rgb(234 242 255 / 62%);
  --gold-bright: #fff6df;
  --gold: #e8c37a;
  --gold-deep: #b8893a;
  --hairline: rgb(232 195 122 / 34%);
  --line: rgb(255 255 255 / 14%);
  --glass-light: rgb(255 255 255 / 8%);
  --glass-top: rgb(6 10 18 / 52%);
  --glass-bottom: rgb(6 10 18 / 62%);
  --radius: 14px;

  /* Der dunkle Umriss für Schrift direkt auf dem Bild. */
  --outline:
    1px 1px 0 rgb(0 0 0 / 65%), -1px 1px 0 rgb(0 0 0 / 65%), 1px -1px 0 rgb(0 0 0 / 65%), -1px -1px 0 rgb(0 0 0 / 65%),
    0 0 5px rgb(0 0 0 / 85%), 0 2px 16px rgb(0 0 0 / 85%);

  /* Alles systemeigen, es muss nichts geladen werden. */
  --font-display: 'Palatino Linotype', 'Book Antiqua', palatino, georgia, serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  font-size: 16px;
}

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;

  /* Die Seite selbst rollt nicht, gerollt wird nur im Kasten. */
  overflow: hidden;
  height: 100dvh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Die Bühne
   --------------------------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--night);
  pointer-events: none;
}

.stage__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100dvh * var(--stage-w) / var(--stage-h)));
  height: max(100dvh, calc(100vw * var(--stage-h) / var(--stage-w)));
}

.stage__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.stage__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Die Licht-Ebene (Sonne, Strahlen) wird aufgehellt eingemischt, wie im Editor. */
.stage__layer--sky {
  mix-blend-mode: screen;
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(11 20 32 / 55%) 0%, rgb(11 20 32 / 0%) 16%),
    linear-gradient(to top, rgb(11 20 32 / 45%) 0%, rgb(11 20 32 / 0%) 22%);
}

/* ---------------------------------------------------------------------------
   Die Kopfleiste: Wortmarke, Navigation, rechte Gruppe
   --------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: var(--topbar-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0 var(--edge);
}

.topbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  min-width: 6rem;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  line-height: 1.1;
  color: var(--ink);
}

/* Goldschliff mit einem Schimmer, der alle zehn Sekunden einmal durchzieht. */
.brand__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4375rem;
  letter-spacing: 3px;

  /*
    Die Goldschrift wird per Hintergrund in die Buchstaben geschnitten
    (background-clip: text). Geschnitten wird nur innerhalb des Kastens, und
    Palatino ragt mit Unterlängen (g, p) über eine knappe Zeile hinaus. Bei
    "A.S.G.A.R.D." fiel das nie auf, hier schon: René am 11.10.2026, "das g
    und das p sind abgeschnitten". Deshalb Luft nach unten, und die Linie
    darunter rückt um denselben Betrag nach oben.
  */
  line-height: 1.15;
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
  background:
    linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 92%) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(176deg, var(--gold-bright) 8%, var(--gold) 48%, #a8742a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brand-shimmer 10s linear infinite;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 55%)) drop-shadow(0 2px 10px rgb(0 0 0 / 75%))
    drop-shadow(0 0 22px rgb(232 195 122 / 22%));
}

@keyframes brand-shimmer {
  0%,
  85% {
    background-position:
      100% 0,
      0 0;
  }

  100% {
    background-position:
      -100% 0,
      0 0;
  }
}

.brand__line {
  align-self: stretch;
  height: 1px;
  margin: 8px 0 7px;
  background: linear-gradient(to right, var(--gold), rgb(232 195 122 / 2%));
}

.brand__sub {
  font-family: var(--font-body);
  font-size: 0.5938rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: var(--outline);
}

.mainnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.mainnav__link {
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgb(234 242 255 / 86%);
  border-radius: 8px;
  text-shadow: var(--outline);
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.mainnav__link:hover,
.mainnav__link:focus-visible {
  color: #fff;
  background: rgb(255 255 255 / 6%);
}

.mainnav__link.is-active {
  color: var(--gold);
  background: rgb(232 195 122 / 9%);
  box-shadow: inset 0 -2px 0 var(--gold);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.nav-toggle {
  display: none;
}

/* ---------------------------------------------------------------------------
   Knöpfe
   --------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: linear-gradient(to bottom, var(--glass-light), rgb(255 255 255 / 2%));
  cursor: pointer;
  white-space: nowrap;
  text-shadow: none;
  transition:
    transform 0.12s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.btn:hover {
  border-color: var(--hairline);
  transform: translateY(-1px);
}

.btn--primary {
  padding: 11px 26px;
  font-size: 0.9375rem;
  letter-spacing: 2px;
  color: #2b1c06;
  border-color: var(--gold-deep);
  background: linear-gradient(to bottom, #fbeac2 0%, var(--gold) 46%, #c9993f 100%);
  box-shadow:
    0 10px 24px rgb(184 137 58 / 30%),
    inset 0 1px 0 rgb(255 255 255 / 65%),
    inset 0 -1px 0 rgb(110 74 18 / 45%);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 1.2rem;
}

/* ---------------------------------------------------------------------------
   Der Hauptbereich rechts
   --------------------------------------------------------------------------- */
.panel {
  position: fixed;
  top: var(--topbar-height);
  right: var(--panel-right);
  bottom: 0;
  z-index: 2;
  width: var(--panel-width);
  padding: clamp(0.4rem, 1.5vh, 2rem) 0 clamp(0.6rem, 1.8vh, 2rem);
  display: flex;
  align-items: stretch;
  pointer-events: none;
}

/* Die Startseite: der Schriftzug ohne Kasten, mittig im rechten Bereich. */
.hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0 6% 6vh;
  text-align: center;
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
  pointer-events: none;
}

.panel.is-start .hero {
  visibility: visible;
  transition: visibility 0s;
  pointer-events: auto;
}

/* Jede Zeile blendet für sich ein und schwebt dabei leicht von unten herein. */
.hero > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.panel.is-start .hero > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.1s ease var(--delay, 0s),
    transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0s);
}

.hero__kicker {
  --delay: 0.1s;

  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.65vw, 1.8rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow:
    0 0 2px rgb(0 0 0 / 95%),
    0 1px 3px rgb(0 0 0 / 95%),
    0 3px 14px rgb(0 0 0 / 75%),
    0 0 18px rgb(232 195 122 / 20%);
}

.hero__title {
  --delay: 0.5s;

  margin: 0;
  background: linear-gradient(176deg, var(--gold-bright) 8%, var(--gold) 50%, #a8742a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 5.2rem);
  font-weight: 400;
  letter-spacing: 0.08em;

  /* Dieselbe Falle wie bei der Wortmarke: Unterlängen brauchen Luft, sonst schneidet der Goldverlauf sie ab. */
  line-height: 1.1;
  padding-bottom: 0.25em;
  margin-bottom: -0.25em;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 85%)) drop-shadow(0 10px 28px rgb(0 0 0 / 65%))
    drop-shadow(0 0 30px rgb(232 195 122 / 25%));
}

.hero__text {
  --delay: 0.9s;

  max-width: 31rem;
  margin: 0.4rem 0 0;
  color: rgb(246 238 222 / 92%);
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  line-height: 1.6;
  text-shadow:
    0 0 2px rgb(0 0 0 / 95%),
    0 1px 3px rgb(0 0 0 / 95%),
    0 0 10px rgb(0 0 0 / 70%),
    0 2px 16px rgb(0 0 0 / 60%);
}

.hero .actions {
  --delay: 0.9s;

  justify-content: center;
  margin-top: 0.6rem;
}

.hero .btn:not(.btn--primary) {
  background: rgb(8 12 20 / 55%);
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
}

/*
  Der Kasten: feste Größe, volle Höhe, lässt sich nicht vergrößern. Nur sein
  Inhalt wechselt, der Kasten selbst bleibt stehen. Nach oben fadet er aus,
  damit es keine harte Kante unter der Kopfleiste gibt.
*/
.panel__box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(
    to bottom,
    rgb(6 10 18 / 4%) 0,
    rgb(6 10 18 / 30%) 2.5rem,
    var(--glass-top) var(--panel-head-height),
    var(--glass-bottom) calc(100% - 2.5rem),
    rgb(6 10 18 / 24%) 100%
  );
  box-shadow: 0 22px 52px rgb(0 0 0 / 45%);
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.6s ease 0.15s;
}

.panel.is-start .panel__box {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.panel__box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--hairline);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--panel-head-height));
  pointer-events: none;
}

.panel__head {
  flex: 0 0 var(--panel-head-height);
  height: var(--panel-head-height);
  padding: 1.4rem var(--panel-inner-x) 0.9rem;
}

.title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: 3px;
  line-height: 1.2;
  color: var(--gold-bright);
  text-shadow: var(--outline);
}

.panel__sub {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.875rem;
  text-shadow: var(--outline);
}

.panel__scroll {
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem var(--panel-inner-x) 1.6rem;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 90%),
    0 1px 10px rgb(0 0 0 / 70%);
  scrollbar-width: thin;
  scrollbar-color: rgb(232 195 122 / 45%) transparent;
}

.section p {
  margin: 0 0 0.9rem;
}

.section__muted,
.section__empty {
  color: var(--ink-dim);
}

/* ---------------------------------------------------------------------------
   Die Ausstellung: ein Raster aus Karten, je Sprite eine
   --------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.9rem;
}

.sprite-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(to bottom, var(--glass-light), rgb(255 255 255 / 2%));
  transition:
    border-color 0.15s ease,
    transform 0.12s ease;
}

.sprite-card:hover {
  border-color: var(--hairline);
  transform: translateY(-2px);
}

/* Das Bild steht auf einem Schachbrett, wie in jedem Sprite-Werkzeug: so sieht man die Transparenz. */
.sprite-card__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 7px;
  background-color: #1a2435;
  background-image:
    linear-gradient(45deg, #202b3e 25%, transparent 25%, transparent 75%, #202b3e 75%),
    linear-gradient(45deg, #202b3e 25%, transparent 25%, transparent 75%, #202b3e 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    8px 8px;
  overflow: hidden;
}

.sprite-card__image img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}

.sprite-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: var(--gold-bright);
}

.sprite-card__kind {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------------------------------------------------------------------------
   Handy und schmale Fenster: der Bereich sitzt unten über die volle Breite
   --------------------------------------------------------------------------- */
@media (width <= 1023px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .topbar__right {
    display: none;
  }

  .panel {
    left: 0;
    right: 0;
    width: 100%;
    top: auto;
    height: 62dvh;
    padding-left: var(--edge);
    padding-right: var(--edge);
  }

  .hero {
    padding: 0 var(--edge) 4vh;
  }

  .mainnav {
    position: fixed;
    top: var(--topbar-height);
    right: var(--edge);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 4px;
    background: linear-gradient(to bottom, var(--glass-top), var(--glass-bottom));
    border: 1px solid rgb(214 176 106 / 35%);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 55%);
  }

  .mainnav[hidden] {
    display: none;
  }

  .mainnav__link {
    padding: 8px 12px;
    text-shadow: none;
  }

  .mainnav__link.is-active {
    border-radius: 5px;
    box-shadow: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(to bottom, var(--glass-light), rgb(255 255 255 / 2%));
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
  }

  .nav-toggle__bar {
    width: 16px;
    height: 2px;
    background: currentcolor;
    box-shadow:
      0 -5px 0 currentcolor,
      0 5px 0 currentcolor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand__mark {
    animation: none;
  }

  .hero > *,
  .panel.is-start .hero > *,
  .panel__box,
  .panel.is-start .panel__box {
    transition: none;
  }
}