.dd-game-container.history-sorter {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.history-sorter .info-bar {
  font-size: 1rem;
  display: flex;
  max-width: 1240px;
  margin: 0 auto;
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
}

.history-sorter .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  min-height: 500px;
  max-width: 1240px;
  margin: 0 auto;
  background-color: #000;
  padding: 100px 20px 20px;
  /* No overflow:hidden here - .items__background is already clamped to
     100% width/height of this box via object-fit:cover, so it can't
     overflow on its own. Clipping here would also cut off dragged .item
     elements that are pulled beyond this box's edge while being dropped
     onto a container below, making them invisible mid-drag. */
}

.history-sorter .items__background {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.history-sorter .items__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .history-sorter .items {
    min-height: 250px;
  }
}

.history-sorter .items-inner {
  padding: 30px;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
}

@media (max-width: 767px) {
  .history-sorter .items-inner {
    min-height: 250px;
  }
}

.history-sorter .item {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  position: absolute;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border: 5px solid #ccc;
}

@media (max-width: 767px) {
  .history-sorter .item {
    width: 70px;
    height: 70px;
  }
}

/* .item img {
  width: 48px;
  height: 48px;
} */

/* @media (max-width: 767px) {
  .item img {
    width: 38px;
    height: 38px;
  }
} */

.history-sorter .containers {
  display: flex;
  justify-content: space-evenly;
  margin: 30px 10px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 30px 50px;
  background-color: #55585a;
}

@media (max-width: 1199px) {
  .history-sorter .containers {
    flex-wrap: wrap;
    /* justify-content: center; */
  }
}

@media (max-width: 767px) {
  .history-sorter .containers {
    padding: 15px 20px 0;
  }
}

.history-sorter .container {
  width: 20%;
  min-height: 190px;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px dashed #c2c4c7;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0 10px;
}

@media (max-width: 1199px) {
  .history-sorter .container {
    margin: 0 5px 10px;
  }
}

@media (max-width: 991px) {
  .history-sorter .container {
    width: 40%;
    min-height: 150px;
  }
}

@media (max-width: 767px) {
  .history-sorter .container {
    width: 45%;
    min-height: 130px;
  }
}

.history-sorter .container.multiple-items:before {
  display: none;
}

.history-sorter .container img {
  width: 150px;
  height: auto;
  margin: auto 0;
}

@media (max-width: 991px) {
  .history-sorter .container img {
    width: 110px;
  }
}

@media (max-width: 767px) {
  .history-sorter .container img {
    width: 80px;
  }
}

/* Epochen-Kopfzeile: Label + Datumsspanne + Info-Button, oben im Container */
.history-sorter .container__header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 0.7em;
  text-align: left;
  /* No z-index here: .container is a flex container, so a z-index on this
     flex item (even without position set) creates its own stacking context
     per the flexbox spec - which put this header above the .plate
     correct/wrong feedback icon added later, even though the icon comes
     after it in the DOM. */
}

.history-sorter .container__date-range {
  flex: 1 1 auto;
  font-weight: 700;
  white-space: nowrap;
  color: #1C1F22;
}

@media (max-width: 767px) {
  .history-sorter .container__header {
    flex-wrap: wrap;
    font-size: 0.6em;
  }
}

.history-sorter .container__info-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.history-sorter .container__info-btn img {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Schließbare Tooltip-Bubble mit der Epochen-Beschreibung, öffnet oberhalb
   des jeweiligen Containers (siehe container__info-btn Klick-Handler). */
.history-sorter .epoch-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  max-width: 80vw;
  background: #fff;
  border: 1px solid #c2c4c7;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  padding: 12px 14px;
  text-align: left;
  z-index: 5;
}

@media (max-width: 767px) {
  .history-sorter .epoch-tooltip {
		position: absolute;
		bottom: calc(100% + 12px);
		left: 50%;
		transform: translateX(-50%);
		width: 200px;
		max-width: 80vw;
		background: #fff;
		border: 1px solid #c2c4c7;
		border-radius: 10px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
		padding: 12px 14px;
		text-align: left;
		z-index: 5;
	}
}

.history-sorter .epoch-tooltip[hidden] {
  display: none;
}

.history-sorter .epoch-tooltip__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.history-sorter .epoch-tooltip__title {
  font-weight: 700;
  font-size: 0.95em;
}

.history-sorter .epoch-tooltip__close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 0;
}

.history-sorter .epoch-tooltip__close img {
  width: 14px;
  height: 14px;
}

.history-sorter .epoch-tooltip__text {
  font-size: 0.85em;
  color: #1C1F22;
}

.history-sorter .epoch-tooltip__text p {
  margin: 0;
}

.is-dark-mode .history-sorter .epoch-tooltip {
  background: #1C1F22;
  color: #fff;
}

.is-dark-mode .history-sorter .epoch-tooltip__text {
  color: #fff;
}

.is-dark-mode .history-sorter .container__header {
  background: rgba(28, 31, 34, 0.9);
  color: #fff;
}

.is-dark-mode .history-sorter .container__date-range {
  color: #ccc;
}

/* info.svg/close.svg are referenced via <img src>, not inlined, and have
   their fill hardcoded to #1C1F22 - filter is the only way to recolor them
   for the dark backgrounds container__header/epoch-tooltip get above. */
.is-dark-mode .history-sorter .container__info-btn img,
.is-dark-mode .history-sorter .epoch-tooltip__close img {
  filter: brightness(0) invert(1);
}

.history-sorter .modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

.history-sorter .modal-content {
  background: rgba(255,255,255,0.9);
  padding: 30px;
  border-radius: 10px;
  max-height: 400px;
  max-width: 495px;
  width: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.is-dark-mode .history-sorter .modal-content {
	background: rgba(0,0,0,0.9);
	color: #fff;
}

.history-sorter .dragging {
  opacity: 0.7;
  cursor: grabbing;
  transform: scale(1.1);
  /* Without this, .item (position: absolute, painted earlier in the DOM)
     sits BELOW .container (position: relative, painted later) once their
     z-index:auto stacking falls back to DOM order - invisible on desktop
     because native HTML5 drag shows its own floating ghost image above
     everything regardless of page stacking, but touch dragging moves the
     real element, exposing the real underlying order. */
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.history-sorter .start-modal {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding: 20px;
}

.history-sorter .start-modal-content {
  background: rgba(255,255,255,0.9);
  padding: 30px;
  border-radius: 10px;
  max-width: 495px;
  text-align: left;
}

.is-dark-mode .history-sorter .start-modal-content {
	background: rgba(0,0,0,0.9);
	color: #fff;
}

.history-sorter .start-modal-content h2 {
  font-size: 30px;
  margin-bottom: 20px;
	font-weight: 700;
}

.history-sorter .start-modal-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.history-sorter .modal-text {
  font-size: 18px;
}

.history-sorter .modal-text h3 {
  font-size: 24px;
  margin-bottom: 10px;
	font-weight: 700;
}

.history-sorter .restart-btn {
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  background-color: #1C1F22;
  color: white;
  border: none;
  border-radius: 22px;
  transition: all 0.3s;
}

.history-sorter .start-game-btn {
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  background-color: #1C1F22;
  color: white;
  border: none;
  border-radius: 22px;
  float: right;
  transition: all 0.3s
}

.history-sorter .start-game-btn:hover,
.history-sorter .restart-btn:hover {
  background-color: #55585a;
}

.history-sorter .history-container {
  margin: 20px auto;
  max-width: 1240px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  text-align: left;
  display: none;
  width: 100%;
}

.is-dark-mode .history-sorter .history-container h3 {
	color: #000;
}

.history-sorter .history-container.game-ended {
  display: block;
}

.history-sorter .history-container h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0px;
}

.history-sorter .history-container p {
	font-size: 1rem;
	margin: 0 0 20px;
}

.history-sorter .history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-sorter .history-list li:last-child {
  border-bottom: none;
}

.history-sorter .container.highlight {
  outline: 3px solid #4CAF50;
  background-color: rgba(76, 175, 80, 0.2);
  transition: background-color 0.3s ease, outline 0.3s ease;
}

.history-sorter .plate {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  color: white;
  font-size: 0.8em;
  line-height: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  display: flex;
}

@media (max-width: 767px) {
  .history-sorter .plate {
    width: 25px;
    height: 25px;
  }
}

.history-sorter .plate img {
  margin: 0 auto;
  display: block;
  max-width: 20px;
}

.history-sorter .info-bar__clock {
  background: url('clock.svg') no-repeat center center;
  background-size: contain;
  width: 90px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 15px;
}

.is-dark-mode .history-sorter .info-bar__clock {
	color: #000;
}

@media (max-width: 767px) {
  .history-sorter .info-bar__clock {
    font-size: 12px;
		padding-right: 10px;
  }
}

.history-sorter .info-bar__score {
  background: url('score.svg') no-repeat center center;
  background-size: contain;
  width: 110px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding-right: 10px;
}

.is-dark-mode .history-sorter .info-bar__score {
	color: #000;
}

@media (max-width: 767px) {
  .history-sorter .info-bar__score {
    font-size: 12px;
  }
}

.history-sorter .info-bar__score span {
  display: inline-block;
  margin-left: 5px;
}

.history-sorter .info-bar__left,
.history-sorter .info-bar__right {
  width: 50%;
  display: flex;
}

.history-sorter .info-bar__left {
  padding-left: 20px;
}

.history-sorter .info-bar__right {
  justify-content: flex-end;
  padding-right: 20px;
}

.history-sorter .info-bar__right img {
  display: block;
  max-width: 100%;
  height: auto;
}

.history-sorter .music-btn {
  background: none;
  border: none;
  max-width: 60px;
  cursor: pointer;
}

.history-sorter .accordion-item {
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.history-sorter .accordion-header {
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  padding: 15px;
  cursor: pointer;
  text-align: left;
  border: none;
  width: 100%;
  font-size: 1em;
}

.history-sorter .accordion-header.correct {
  background-color: #d4edda;
  color: #155724;
}

.history-sorter .accordion-header.wrong {
  background-color: #f8d7da;
  color: #721c24;
}

/* Guarded behind (hover: hover) so a tap on touch devices doesn't leave
   the row stuck in this gray state - without a real pointing device to
   move away again, :hover otherwise persists after the tap that expands
   the accordion, masking the correct/wrong color underneath. */
@media (hover: hover) {
  .history-sorter .accordion-header:hover {
    filter: brightness(0.95);
  }
}

.history-sorter .history-thumb {
  width: 50px;
  height: 50px;
  margin-right: 12px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
}

.history-sorter .history-label {
  /* flex items default to min-width:auto, which refuses to shrink below
     the text's content width - without this, a single long word like
     "Reichstagskuppel" overflows the row instead of wrapping. */
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  /* Prefer a proper syllable break (hyphens) over a raw mid-word split;
     overflow-wrap only kicks in as a fallback for the rare word hyphens
     can't break cleanly, instead of breaking every wrapped word. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.history-sorter .accordion-content {
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.is-dark-mode .history-sorter .accordion-content {
	color: #000;
}