:root {
  --bg: #05060f;
  --panel: rgba(13, 16, 34, 0.88);
  --panel-border: rgba(120, 140, 255, 0.18);
  --text: #dfe4ff;
  --text-dim: #8b93c4;
  --accent: #7aa2ff;
  --gold: #ffd166;
  --win: #4ade80;
  --draw: #94a3b8;
  --loss: #f87171;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
}

#galaxy {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  cursor: grab;
  touch-action: none; /* Pan/Pinch übernimmt die Galaxie selbst */
}
#galaxy.dragging { cursor: grabbing; }

.hidden { display: none !important; }

/* ---------- Top bar ---------- */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(5,6,15,0.95), rgba(5,6,15,0.6) 80%, transparent);
  z-index: 10;
  flex-wrap: wrap;
}

#brand { display: flex; align-items: center; gap: 8px; }
#brand .logo {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.45));
}
#brand h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #cfd8ff, #7aa2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

#controls input, #controls select {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
#controls input { width: 150px; }
#controls input[type="number"] { width: 68px; }
#controls input:focus, #controls select:focus { border-color: var(--accent); }

#controls button {
  background: linear-gradient(135deg, #3b5bdb, #6d5dfc);
  color: #fff;
  border: none;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
}
#controls #insightsBtn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--accent);
  font-weight: 400;
}
#controls button:hover { filter: brightness(1.2); }
#controls button:disabled { filter: grayscale(0.7); cursor: wait; }
#controls #demoBtn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-weight: 400;
}
#controls a#feedbackLink {
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
}
#controls a#feedbackLink:hover { color: var(--text); border-color: var(--accent); }

#status {
  font-size: 13px;
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(122,162,255,0.08);
}
#status.error { color: var(--loss); background: rgba(248,113,113,0.1); }

/* ---------- Breadcrumb ---------- */
#breadcrumb {
  position: fixed;
  top: 58px; left: 16px;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 60vw;
  font-size: 13px;
}
#breadcrumb span.crumb {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--text-dim);
}
#breadcrumb span.crumb:hover { color: var(--text); border-color: var(--accent); }
#breadcrumb span.crumb.current { color: var(--gold); border-color: var(--gold); cursor: default; }

/* ---------- Analyse-Panel ---------- */
#insights {
  position: fixed;
  top: 118px; left: 16px;
  width: 320px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 16px;
  z-index: 9;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
#insights h2 { font-size: 17px; margin-bottom: 10px; }
#insights h3 {
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 14px 0 6px;
}
#closeInsights {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
}
#closeInsights:hover { color: var(--text); }
.insSection { font-size: 14px; margin-bottom: 4px; }
#insSearch {
  width: 100%;
  background: #0b0e20;
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  margin-bottom: 8px;
}
#insSearch:focus { border-color: var(--accent); }
#insSearchResults:not(:empty) { margin-bottom: 10px; }
.insEntry {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  background: rgba(122, 162, 255, 0.05);
}
.insEntry:hover { border-color: var(--accent); background: rgba(122, 162, 255, 0.12); }
.insEntry .insLine {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insEntry .insName { font-size: 12px; color: var(--accent); margin-top: 1px; }
.insEntry .insMeta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.insEmpty { font-size: 12px; color: #5b6392; font-style: italic; padding: 2px 0 4px; }

/* ---------- Sidebar ---------- */
#sidebar {
  position: fixed;
  top: 70px; right: 16px;
  width: 300px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 16px;
  z-index: 11;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
#closeSidebar {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
}
#closeSidebar:hover { color: var(--text); }

#sbMove { font-size: 22px; color: var(--gold); margin-bottom: 2px; }
#sbOpening { font-size: 13px; color: var(--accent); margin-bottom: 4px; min-height: 0; }
#sidebar h3#sbNextTitle {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 12px 0 6px;
}
.nextRow {
  display: grid;
  grid-template-columns: 52px 1fr 44px 44px;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.nextRow:hover { background: rgba(122, 162, 255, 0.12); }
.nextRow .nm { font-weight: 600; color: var(--text); }
.nextRow .nbar {
  height: 7px;
  border-radius: 4px;
  background: #1a1f38;
  overflow: hidden;
}
.nextRow .nbar div { height: 100%; border-radius: 4px; }
.nextRow .npct { text-align: right; color: var(--text-dim); }
.nextRow .nsc { text-align: right; font-weight: 600; }

#sidebar h3#sbEngineTitle {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 12px 0 6px;
}
.premium {
  background: linear-gradient(135deg, #b8860b, #ffd166);
  color: #1a1405;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}
.engRow {
  display: grid;
  grid-template-columns: 20px 1fr 60px;
  gap: 8px;
  align-items: center;
  padding: 3px 6px;
  font-size: 13px;
}
.engRow .engRank { color: var(--text-dim); }
.engRow .engMove { font-weight: 600; }
.engRow .engEval { text-align: right; font-variant-numeric: tabular-nums; }
.engRow .engEval.good { color: var(--win); }
.engRow .engEval.bad { color: var(--loss); }
.engInfo { font-size: 12px; color: #5b6392; font-style: italic; padding: 2px 6px; }
#sidebar .line {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.5;
  word-wrap: break-word;
}
#board {
  display: block;
  margin: 0 auto 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--panel-border);
  cursor: zoom-in;
}
.boardHint {
  text-align: center;
  font-size: 11px;
  color: #5b6392;
  margin-bottom: 6px;
}

#boardNav {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
#boardNav button {
  background: rgba(122, 162, 255, 0.08);
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
#boardNav button:hover { border-color: var(--accent); background: rgba(122, 162, 255, 0.18); }
#boardNav button#arrowBtn.active {
  border-color: var(--gold);
  background: rgba(255, 209, 102, 0.15);
}

#lichessBtn {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: 7px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  margin-bottom: 4px;
}
#lichessBtn:hover { border-color: var(--accent); background: rgba(122, 162, 255, 0.1); }

/* großes Brett als Overlay */
#boardModal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(3, 4, 10, 0.92);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#boardModal.hidden { display: none; }
#modalInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: default;
}
#bigBoard {
  width: min(86vw, 78vh, 640px);
  height: min(86vw, 78vh, 640px);
  border-radius: 10px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--panel-border);
  cursor: pointer;
  touch-action: none; /* Züge per Fingertipp statt Seiten-Scroll */
}
.modalHint { font-size: 12px; color: var(--text-dim); }
#freeBar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--gold);
}
#freeBar.hidden { display: none; }
#freeBar button {
  background: linear-gradient(135deg, #3b5bdb, #6d5dfc);
  border: none;
  color: #fff;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#freeBar button:hover { filter: brightness(1.2); }

/* schwebender Zurück-Button */
#centerBtn {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 12;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #3b5bdb, #6d5dfc);
  box-shadow: 0 4px 24px rgba(59, 91, 219, 0.45);
}
#centerBtn:hover { filter: brightness(1.2); }

#sbStats { font-size: 14px; }
.statRow {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.statRow span { color: var(--text-dim); }

.wdlBar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin: 8px 0 4px;
  background: #1a1f38;
}
.wdlBar .w { background: var(--win); }
.wdlBar .d { background: var(--draw); }
.wdlBar .l { background: var(--loss); }
.wdlLegend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.wdlLegend span:first-child { color: var(--win); }
.wdlLegend span:last-child { color: var(--loss); }

#sidebar button#focusBtn, #sidebar button#rootBtn {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #3b5bdb, #6d5dfc);
  color: #fff;
}
#sidebar button.secondary {
  background: transparent !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--text-dim) !important;
  font-weight: 400 !important;
}
#sidebar button:hover { filter: brightness(1.2); }

/* ---------- Tooltip ---------- */
#tooltip {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  max-width: 300px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
#tooltip .tMove { font-size: 16px; color: var(--gold); font-weight: 600; }
#tooltip .tName { font-size: 12px; color: var(--accent); margin-top: 1px; }
#tooltip .tLine { color: var(--text-dim); margin: 3px 0; line-height: 1.4; }
#tooltip .tStats { margin-top: 4px; }
#tooltip .tHint { color: var(--accent); margin-top: 4px; font-style: italic; }
#tooltip .tOpp { color: var(--text-dim); margin-top: 3px; font-style: italic; }
#tooltip .tHole { color: #ff9a76; margin-top: 4px; font-weight: 600; }
#tooltip .tPulsar { color: #8fd6ff; margin-top: 4px; font-weight: 600; }
.oppTag {
  color: var(--text-dim);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  margin-left: 6px;
  vertical-align: 2px;
}
#tooltip .tw { color: var(--win); }
#tooltip .td { color: var(--draw); }
#tooltip .tl { color: var(--loss); }

/* ---------- Legend ---------- */
/* Legende: minimalistisch eingeklappt, klappt beim Hover auf */
#legend {
  position: fixed;
  left: 16px; bottom: 14px;
  z-index: 9;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(13,16,34,0.6);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1.7;
  backdrop-filter: blur(4px);
  /* eingeklappt: genau Titelzeile + Padding (border-box!) */
  max-height: 37px;
  overflow: hidden;
  opacity: 0.75;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
#legend:hover {
  max-height: 220px;
  opacity: 1;
}
#legend .legendTitle {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
#legend .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}
#legend .dot.sun { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
#legend .dot.planet { background: #9aa7ff; width: 6px; height: 6px; }
#legend .dot.oppsun {
  background: #b79dff;
  box-shadow: 0 0 8px #b79dff;
}
#legend .dot.hole {
  background: #04030a;
  border: 2px solid #ff8c5a;
  width: 10px; height: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 7px rgba(255, 120, 60, 0.8);
}
#legend .dot.pulsar {
  background: #e8f8ff;
  box-shadow: 0 0 8px #7fd4ff;
}
#legend .grad {
  display: inline-block;
  width: 34px; height: 8px;
  border-radius: 4px;
  margin-right: 5px;
  background: linear-gradient(90deg, #f87171, #facc15, #4ade80);
  vertical-align: 0;
}
#legend .hint { color: #5b6392; margin-top: 2px; }

/* ---------- Setup-Screen ---------- */
body.setup #controls,
body.setup #legend,
body.setup #status { display: none !important; }
body.setup #galaxy { filter: blur(10px) brightness(0.7); }

#setup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(5,6,15,0.25), rgba(3,4,10,0.75));
}
#setup.hidden { display: none; }

#setupCard {
  width: min(440px, 92vw);
  background: rgba(13, 16, 34, 0.92);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 34px 36px 28px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(109, 93, 252, 0.12);
}
#setupCard .logoBig {
  width: 82px;
  height: 82px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.35));
}
#setupCard h2 {
  font-size: 28px;
  letter-spacing: 3px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #ffd166, #7aa2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#setupCard .tagline {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.platToggle {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
}
.platBtn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
}
.platBtn.active {
  background: linear-gradient(135deg, #3b5bdb, #6d5dfc);
  color: #fff;
  font-weight: 600;
}

#setupCard input, #setupCard select {
  background: #0b0e20;
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  width: 100%;
}
#setupCard input:focus, #setupCard select:focus { border-color: var(--accent); }
#suUsername { margin-bottom: 12px; font-size: 16px !important; text-align: center; }
#suUsername.err { border-color: var(--loss); }

.setupRow {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.setupRow > * { flex: 1; min-width: 0; }

#suGo {
  width: 100%;
  padding: 13px;
  margin-top: 6px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #3b5bdb, #6d5dfc);
  box-shadow: 0 6px 30px rgba(90, 80, 250, 0.4);
}
#suGo:hover { filter: brightness(1.15); }
.linkBtn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.linkBtn:hover { color: var(--text); }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  #topbar { padding: 8px 10px; gap: 8px; flex-wrap: nowrap; }
  #brand h1 { display: none; } /* das Logo reicht */

  /* Toolbar: eine horizontal scrollbare Zeile statt Umbruch-Chaos */
  #controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: calc(100vw - 58px);
    padding-bottom: 2px;
  }
  #controls::-webkit-scrollbar { display: none; }
  #controls input, #controls select, #controls button, #controls a { flex: 0 0 auto; }
  #controls input { width: 120px; }

  #status {
    position: fixed;
    top: 52px; left: 10px;
    z-index: 8;
    max-width: 70vw;
  }
  #breadcrumb { top: 82px; left: 8px; max-width: 92vw; }

  /* Analyse-Panel: volle Breite */
  #insights {
    top: 110px; left: 8px; right: 8px;
    width: auto;
    max-height: calc(100vh - 180px);
  }

  /* Sidebar wird zum Bottom-Sheet, die Galaxie bleibt darüber sichtbar */
  #sidebar {
    top: auto;
    bottom: 0;
    left: 0; right: 0;
    width: auto;
    max-height: 60vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  #board { width: 180px; height: 180px; }

  /* Zurück-Button nach oben rechts, damit das Bottom-Sheet ihn nicht verdeckt */
  #centerBtn {
    bottom: auto;
    top: 52px;
    right: 10px;
    padding: 8px 12px;
    font-size: 13px;
  }

  #legend { display: none; }
  .setupRow { flex-wrap: wrap; }
  #setupCard { padding: 26px 22px 22px; }
  .modalHint { padding: 0 12px; text-align: center; }
}