/* speicher.css — Speicherplaetze (sp-) und Bestenliste (bl-).
   Nur eigene Klassen, keine Aenderung an bestehenden. Farben ausschliesslich
   ueber die Variablen aus style.css, damit Neon, Pergament und Nacht ohne
   Zusatzarbeit stimmen. */

/* ============================================================
   SPEICHERPLAETZE
   ============================================================ */
.sp-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:8px; border-bottom:1px solid var(--glasrand);
}
.sp-schalter{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--txt); cursor:pointer}
.sp-schalter input{accent-color:var(--cyan); width:14px; height:14px; cursor:pointer}
.sp-belegt{
  font-family:ui-monospace,Menlo,monospace; font-size:10px; color:var(--mut);
  white-space:nowrap; cursor:help;
}

.sp-liste{display:flex; flex-direction:column; gap:6px}

.sp-slot{
  background:var(--tief); border:1px solid var(--line); border-radius:8px; padding:7px 9px;
}
.sp-slot.leer{opacity:.72; border-style:dashed}
.sp-slot.auto{border-color:color-mix(in srgb, var(--cyan) 45%, var(--line))}

.sp-zeile{display:flex; align-items:center; gap:8px; margin-bottom:3px}
.sp-titel{font-size:12px; color:var(--cyan); letter-spacing:1px; flex:1}
.sp-name{
  flex:1; min-width:0; font-family:inherit; font-size:12px; color:var(--txt);
  background:transparent; border:none; border-bottom:1px dashed var(--line);
  padding:2px 1px; border-radius:0;
}
.sp-name:focus{outline:none; border-bottom-color:var(--gelb); color:var(--gelb)}
.sp-name::placeholder{color:var(--dim)}
.sp-ver{
  flex:none; font-family:ui-monospace,Menlo,monospace; font-size:9px; letter-spacing:1px;
  color:var(--mut); border:1px solid var(--line); border-radius:4px; padding:1px 5px; cursor:help;
}

.sp-zahlen{font-size:11px; color:var(--les); line-height:1.45}
.sp-datum{font-size:10px; color:var(--mut); margin-top:1px; font-family:ui-monospace,Menlo,monospace}

.sp-knoepfe{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.sp-b{
  font-family:inherit; font-size:10px; cursor:pointer; padding:3px 8px; border-radius:6px;
  background:var(--panel2); border:1px solid var(--line); color:var(--les);
  transition:border-color .15s, background .15s, color .15s;
}
.sp-b:hover{border-color:var(--cyan); color:var(--txt); background:var(--panel3)}
.sp-b.prim{border-color:var(--gelb); color:var(--gelb)}
.sp-b.prim:hover{background:var(--gelb); color:#141a10}

/* Rueckmeldung nach dem Sichern, Laden oder wenn der Speicher voll ist.
   [hidden] muss gewinnen: display wird hier gesetzt, und die Kurzform
   verliert sonst gegen das Attribut. */
.sp-befund{
  font-size:11px; line-height:1.5; border-radius:8px; padding:8px 10px; display:block;
  border:1px solid var(--line); background:var(--tief); color:var(--les);
}
.sp-befund[hidden]{display:none}
.sp-befund.gut{border-color:var(--gruen); color:var(--gutTxt)}
.sp-befund.warn{border-color:var(--rot); color:var(--schlechtTxt)}
.sp-befund p{margin:0 0 6px}
.sp-befund .sp-b{margin-right:4px}

.sp-werkzeug{display:flex; gap:6px}
.sp-werkzeug .b{flex:1; text-align:center; font-size:11px}

/* ---- Analyse eines Standes, ohne ihn zu laden ---- */
.sp-analyse{margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.sp-akopf{
  font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan);
  margin:8px 0 5px;
}
.sp-akopf:first-child{margin-top:0}

/* Bevoelkerungskurve aus Balken. Kein Canvas: das soll zeigen wann es
   gekippt ist, nicht schoen animiert sein. */
.sp-kurve{
  display:flex; align-items:flex-end; gap:1px; height:46px;
  background:var(--tief); border:1px solid var(--glasrand); border-radius:6px;
  padding:3px; overflow:hidden;
}
.sp-kurve i{
  flex:1; min-width:1px; background:var(--gelb); border-radius:1px 1px 0 0;
  opacity:.85; cursor:help;
}
.sp-kurve i:hover{background:var(--cyan); opacity:1}

.sp-marken{margin-top:5px; display:flex; flex-direction:column; gap:2px}
.sp-marken div{
  font-size:10px; color:var(--les); padding-left:7px;
  border-left:2px solid var(--cyan); line-height:1.4;
}

.sp-chronik{
  max-height:190px; overflow-y:auto; display:flex; flex-direction:column; gap:3px;
}
.sp-chronik::-webkit-scrollbar{width:5px}
.sp-chronik::-webkit-scrollbar-thumb{background:var(--glasrand); border-radius:3px}

/* ============================================================
   BESTENLISTE
   ============================================================ */
.bl-reiter{display:flex; gap:5px; margin-bottom:8px}
.bl-tab{
  flex:1; cursor:pointer; font-family:inherit; font-size:11px; padding:6px 4px;
  background:var(--tief); border:1px solid var(--line); color:var(--mut); border-radius:8px;
}
.bl-tab:hover{border-color:var(--cyan); color:var(--txt)}
.bl-tab.an{background:var(--gelb); color:#141a10; border-color:var(--gelb); font-weight:600}

.bl-stand{font-size:11px; color:var(--les); line-height:1.5; margin-bottom:8px}
.bl-stand:empty{display:none}
.bl-stand b{color:var(--gelb); font-family:ui-monospace,Menlo,monospace}
.bl-stand.warn{
  color:var(--schlechtTxt); border-left:2px solid var(--rot); padding-left:8px;
}

.bl-liste{display:flex; flex-direction:column; gap:3px}

.bl-zeile{
  display:flex; align-items:baseline; gap:8px; cursor:pointer;
  background:var(--tief); border:1px solid var(--line); border-radius:8px; padding:6px 9px;
  transition:border-color .15s, background .15s;
}
.bl-zeile:hover{border-color:var(--gelb); background:var(--panel3)}
.bl-zeile.auf{border-color:var(--cyan); border-bottom-left-radius:0; border-bottom-right-radius:0}
/* Der eigene Lauf faellt auf, sonst sucht man sich in fuenfzig Zeilen tot. */
.bl-zeile.ich{box-shadow:inset 3px 0 0 var(--gelb)}
.bl-rang{
  flex:none; width:24px; font-family:ui-monospace,Menlo,monospace; font-size:11px;
  color:var(--mut); text-align:right;
}
.bl-name{flex:1; min-width:0; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bl-name i{font-style:normal; font-size:9px; letter-spacing:1px; color:var(--gelb); text-transform:uppercase}
.bl-punkte{
  flex:none; font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--cyan);
}
.bl-datum{flex:none; font-size:9px; color:var(--dim); font-family:ui-monospace,Menlo,monospace}

/* ---- Aufgeklappte Statistik eines fremden Laufs ---- */
.bl-stat{
  background:var(--tief); border:1px solid var(--cyan); border-top:none;
  border-radius:0 0 8px 8px; padding:9px 10px 10px; margin-bottom:3px;
}
.bl-akopf{
  font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); margin:9px 0 5px;
}
.bl-akopf:first-child{margin-top:0}
.bl-gitter{display:grid; grid-template-columns:1fr 1fr; gap:3px 12px}
.bl-gitter div{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:10px}
.bl-gitter span{color:var(--mut); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bl-gitter b{color:var(--txt); font-family:ui-monospace,Menlo,monospace; flex:none}

.bl-rlegende{font-size:10px; color:var(--mut); line-height:1.45; margin-bottom:6px}
.bl-vergleich{
  font-size:10px; color:var(--gelb); line-height:1.45; margin-bottom:6px;
  padding-left:7px; border-left:2px solid var(--gelb);
}

.bl-regler{display:grid; grid-template-columns:1fr 1fr; gap:2px 12px}
.bl-r{display:flex; align-items:baseline; gap:6px; font-size:10px}
.bl-r span{flex:1; min-width:0; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bl-r b{flex:none; width:26px; text-align:right; font-family:ui-monospace,Menlo,monospace; color:var(--txt)}
.bl-r i{
  flex:none; width:32px; text-align:right; font-style:normal;
  font-family:ui-monospace,Menlo,monospace; color:var(--dim);
}
.bl-r i.plus{color:var(--gruen)}
.bl-r i.minus{color:var(--rot)}
.bl-r i.gleich{color:var(--dim)}
/* Was weit auseinanderliegt, ist die eigentliche Antwort auf „wie haben die das gemacht". */
.bl-r.weit span{color:var(--les)}
.bl-r.weit i{font-weight:700}

/* ---- Eigenes Abschlussblatt ----
   Die Schubladen liegen unter dem Abschlussbild des Spiels (z-index 60), darum
   bringt die Bestenliste ihr eigenes Blatt mit und legt sich darueber. */
.bl-overlay{
  position:fixed; inset:0; z-index:80; background:var(--schleier);
  display:flex; align-items:center; justify-content:center; padding:20px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.bl-overlay[hidden]{display:none}
.bl-karte{
  background:var(--glas2); border:1px solid var(--cyan); border-radius:18px;
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  box-shadow:0 20px 70px rgba(0,0,0,.6), inset 0 1px 0 var(--glanz);
  padding:18px 20px 20px; max-width:520px; width:100%;
  max-height:92vh; overflow-y:auto; color:var(--txt);
}
.bl-karte::-webkit-scrollbar{width:6px}
.bl-karte::-webkit-scrollbar-thumb{background:var(--glasrand); border-radius:3px}
.bl-okopf{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding-bottom:9px; border-bottom:1px solid var(--glasrand);
}
.bl-okopf b{flex:1; font-size:12px; letter-spacing:4px; color:var(--cyan)}
.bl-zu{
  background:none; border:1px solid var(--glasrand); color:var(--cyan);
  width:24px; height:24px; border-radius:6px; cursor:pointer; font-family:inherit; font-size:12px;
}
.bl-zu:hover{background:var(--glasrand)}

.bl-meins{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
  padding:8px 12px; border-radius:12px;
  background:var(--tief); border:1px solid var(--gelb);
}
.bl-meins span{font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--mut)}
.bl-meins b{
  font-size:26px; font-family:ui-monospace,Menlo,monospace; color:var(--gelb);
  text-shadow:0 0 20px color-mix(in srgb, var(--gelb) 45%, transparent);
}
.bl-meins i{font-style:normal; font-size:11px; color:var(--les); margin-left:auto}

/* Auf schmalen Schirmen wird aus zwei Spalten eine. Sonst steht in der
   aufgeklappten Statistik jede Zahl im Umbruch. */
@media (max-width: 560px){
  .bl-gitter, .bl-regler{grid-template-columns:1fr}
  .bl-datum{display:none}
}