/**
 * assets/css/puzzle.css
 * Styles für Puzzle-Tab (Tafel-App)
 * ---------------------------------
 */

#puzzle .puz-wrap {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

/* --- Sidebar --- */
#puzzle .puz-sidebar {
  width: 240px;
  padding: .75rem;
  background: #0f172a; /* dunkles Blau */
  border-right: 1px solid #243247;
  font-size: .9rem;
  overflow-y: auto;
}

#puzzle .puz-sidebar h3 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

#puzzle .puz-sidebar .form-text {
  font-size: .75rem;
  color: #94a3b8;
}

#puzzle .puz-sidebar hr {
  border: 0;
  border-top: 1px solid #243247;
  margin: .75rem 0;
}

/* Galerie in Sidebar */
#puzzle .puz-rail {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

#puzzle .puz-thumb {
  position: relative;
  cursor: pointer;
}

#puzzle .puz-thumb img {
  max-width: 100px;
  border-radius: 4px;
  display: block;
}

#puzzle .puz-thumb .badge {
  position: absolute;
  bottom: 2px;
  right: 4px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .7rem;
  padding: 1px 4px;
  border-radius: 3px;
}

#puzzle .puz-thumb button.del {
  position: absolute;
  top: 2px;
  right: 2px;
  border: none;
  background: rgba(220,38,38,.9);
  color: #fff;
  font-size: .75rem;
  line-height: 1;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* --- Hauptbereich --- */
#puzzle .puz-main {
  flex: 1;
  position: relative;
  background: #0a0f1e;
  display: flex;
  flex-direction: column;
}

#puzzle .puz-status {
  padding: .5rem .75rem;
  margin-bottom: .25rem;
  color: #cbd5e1;
  font-size: .9rem;
  /* Linie hier entfernt */
}

#puzzle #puz-stage-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}

#puzzle #puz-stage {
  width: 100%;
  height: 100%;
}

/* --- Puzzle-Teile --- */
.konvajs-content {
  background: #0a0f1e;
}