:root {
  --bg: #0e1216;
  --panel: rgba(14, 18, 22, 0.82);
  --line: rgba(255, 255, 255, 0.12);
  --text: #e8eef4;
  --muted: #93a3b1;
  --accent: #ff9d3c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

#view {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: crosshair;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

#categories-wrap { max-height: 32vh; overflow: auto; }
#collectibles-wrap { max-height: 30vh; overflow: auto; }

.panel {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  backdrop-filter: blur(8px);
  width: max-content;
  max-width: min(520px, 46vw);
}

.panel h1 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
}

dt { color: var(--muted); }
dd { margin: 0; font-variant-numeric: tabular-nums; }

#status {
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}

#status.done { border-color: #4ec27a; color: var(--text); }

kbd {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font: 11px/1.4 ui-monospace, monospace;
}

.help dt { color: var(--text); }
.bottom { display: flex; gap: 12px; align-items: flex-end; }

/* ------------------------------------------------------------- Konto --- */
#konto {
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(380px, 60vw);
}

#konto[hidden] { display: none; }

#konto .konto-avatar {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

#konto .konto-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#konto a,
#konto button {
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

#konto a:hover,
#konto button:hover { border-color: var(--accent); }

#konto a:focus-visible,
#konto button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#konto button:disabled { opacity: 0.6; cursor: progress; }

#konto .konto-fehler { color: #ff8a7a; }

/* ---------------------------------------------------------- Inventar --- */
#inventory {
  position: fixed;
  inset: 6vh 8vw;
  background: rgba(12, 16, 20, 0.94);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  z-index: 10;
}

#inventory[hidden] { display: none; }

#inventory header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

#inventory h2 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

#inventory input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font: inherit;
}

#inventory .hint { color: var(--muted); }

.inv-list {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
  align-content: start;
}

.inv-list h3 {
  grid-column: 1 / -1;
  margin: 12px 0 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.inv-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inv-item:hover { background: rgba(255, 157, 60, 0.16); border-color: var(--accent); }
.inv-meta { color: var(--muted); font-variant-numeric: tabular-nums; }

#inventory footer {
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* ------------------------------------------------------- Kategorien --- */
.cat-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  cursor: pointer;
}

.cat-row.busy { opacity: 0.5; }
.cat-row.alle { border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 4px; margin-bottom: 2px; }
.cat-row.alle .cat-name { font-weight: 600; }
.cat-name { text-transform: capitalize; }
.cat-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.cat-row input { accent-color: var(--accent); }

/* ── Ladebildschirm ──────────────────────────────────────────────────────
   Das Titelbild wird eingepasst und bleibt oben links bündig: dort steht die
   eingebackene Titelzeile. Auf Breite skaliert fehlten bei 21:9 unten 24 %
   und bei 32:9 50 % des Bildes, samt Fortschrittsliste. Was das eingepasste
   Bild nicht abdeckt, füllt dasselbe Bild unscharf und abgedunkelt.
   Der Fortschritt sitzt in Bildkoordinaten (Prozent und cqh) unter dem Titel.
   Gemessen im Bild (1376 × 768): Titel beginnt bei x 53, Zeile 1 reicht bis
   x 746, Zeile 2 endet bei y 225, der Zeilenabstand beträgt 32 px. */
#laden {
  /* Farbton 34° der Geländer im Bild, für weiße Umgebung aufgehellt */
  --laden-orange: #e8983c;
  --laden-stahl: rgb(16 22 24);
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--laden-stahl);
  color: #fff;
  transition: opacity 0.45s ease;
}
#laden.weg { opacity: 0; pointer-events: none; }
#laden[hidden] { display: none; }

/* Grund: dasselbe Bild, unscharf. Über den Rand hinaus gezogen, sonst zieht
   die Unschärfe an den Kanten Transparenz herein. Mit Helligkeit 0,45 wirkte
   der Übergang bei 21:9 wie ein dunkler Vorhang neben dem hellen Himmel;
   0,78 setzt das Bild fort, statt es abzuschneiden. */
#laden::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: url('../img/ladebild.webp') center / cover no-repeat;
  filter: blur(34px) brightness(0.78) saturate(1.08);
}

.laden-buehne {
  position: absolute;
  left: 0;
  top: 0;
  width: min(100vw, calc(100vh * 1376 / 768));
  aspect-ratio: 1376 / 768;
  container-type: size;
  background: url('../img/ladebild.webp') left top / 100% 100% no-repeat;
}

/* Breiter als das Bild (21:9, 32:9): rechte Bildkante weich in den Grund. */
@media (min-aspect-ratio: 1377 / 768) {
  .laden-buehne {
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
    mask-image: linear-gradient(to right, #000 90%, transparent);
  }
}
/* Schmaler als das Bild (16:9, 16:10): untere Bildkante weich in den Grund. */
@media (max-aspect-ratio: 1375 / 768) {
  .laden-buehne {
    -webkit-mask-image: linear-gradient(to bottom, #000 97.5%, transparent);
    mask-image: linear-gradient(to bottom, #000 97.5%, transparent);
  }
}

/* Abdunklung nur unter dem Titel: dort ist das Bild hell (Luminanz 140 von
   255), weiße Schrift wäre schlecht lesbar. Sie beginnt erst unter der
   Titelzeile (Unterkante y 225 = 29,3 %) und ist nach oben weich ausgeblendet –
   über dem Titel graute sie die eingebackenen Buchstaben sichtbar ein. */
.laden-buehne::before {
  content: '';
  position: absolute;
  top: 29.5%;
  right: 34%;
  bottom: 0;
  left: 0;
  background: radial-gradient(ellipse 95% 85% at 30% 40%,
    rgb(16 22 24 / 0.84) 0%, rgb(16 22 24 / 0.62) 52%, rgb(16 22 24 / 0) 100%);
  /* Beide Ränder ausblenden: der Verlauf reicht über den Kasten hinaus und
     zeichnete an dessen rechter Kante eine sichtbare senkrechte Linie. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 6%),
    linear-gradient(to right, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 6%),
    linear-gradient(to right, #000 62%, transparent 100%);
  mask-composite: intersect;
}

.laden-block {
  position: absolute;
  left: 3.85%;
  top: 33.5%;
  width: 50.4%;
  font-size: 2.35cqh;
  line-height: 1.4;
  text-shadow: 0 0.15cqh 0.8cqh rgb(0 0 0 / 0.6);
}

.laden-schritt {
  margin: 0 0 1.3cqh;
  min-height: 1.4em;
  font-size: 3.1cqh;
  font-weight: 500;
}

.laden-leiste {
  height: 1.05cqh;
  background: rgb(255 255 255 / 0.2);
  box-shadow: 0 0.3cqh 1.2cqh rgb(0 0 0 / 0.45);
}
.laden-leiste > div {
  width: 0;
  height: 100%;
  background: var(--laden-orange);
  transition: width 0.25s linear;
}

.laden-zahlen {
  display: flex;
  justify-content: space-between;
  margin: 0.9cqh 0 0;
  font-variant-numeric: tabular-nums;
}
.laden-cache {
  margin: 0.2cqh 0 0;
  min-height: 1.4em;
  color: rgb(255 255 255 / 0.72);
}

.laden-phasen {
  margin: 2.4cqh 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 3.2cqh;
  font-size: 1.95cqh;
}
.laden-phasen li {
  display: grid;
  grid-template-columns: 1fr auto 5.4em;
  gap: 1cqh;
  padding: 0.25cqh 0;
  break-inside: avoid;
  color: rgb(255 255 255 / 0.62);
  font-variant-numeric: tabular-nums;
}
.laden-phasen .groesse,
.laden-phasen .zustand { text-align: right; }
.laden-phasen li.laedt { color: #fff; }
.laden-phasen li.laedt .zustand { color: var(--laden-orange); }
.laden-phasen li.fertig .zustand { color: #a4d8ab; }

.laden-block.fehler .laden-schritt { color: #ffab9e; }

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hochformat und schmale Fenster: das Bild wird seitlich stark beschnitten,
   der Block wandert deshalb an den unteren Rand. Ohne Größen-Container
   beziehen sich cqh-Werte auf das Fenster, und fixed auf den Bildschirm. */
@media (max-aspect-ratio: 5 / 4) {
  .laden-buehne {
    container-type: normal;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .laden-buehne::before {
    inset: 0;
    background: linear-gradient(to top, rgb(16 22 24 / 0.92) 0%, rgb(16 22 24 / 0) 70%);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .laden-block {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 20px;
    width: auto;
    font-size: 2.1cqh;
  }
  .laden-phasen { columns: 1; max-height: 34vh; overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #laden,
  .laden-leiste > div { transition: none; }
}