body {
  margin: 0;
  /*background: radial-gradient(circle at center, #f5e1b5, #d9b682);*/
  background:radial-gradient(circle at top, #0d2c2c 0%, #041414 100%);

  font-family: 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

#startScreen {
  text-align: center;
  background: #fff7e0;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

#startScreen h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

#startScreen select,
#startScreen button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  font-size: 1.1rem;
}

#startScreen button {
  background: #f0b85d;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

#startScreen button:hover {
  background: #e5a03d;
}

#gameScreen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}


#topbar {
  display: flex;
  flex-wrap: wrap; /* erlaubt Zeilenumbruch auf kleinen Geräten */
  justify-content: space-between;
  align-items: center;
  background: #e6c79c;
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  gap: 0.5rem;
}

#topbar .left-controls,
#topbar .right-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap; /* Buttons umbrechen bei wenig Platz */
}

#topbar button,
#topbar select {
  background: #f0b85d;
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}

#topbar button:hover,
#topbar select:hover {
  background: #e5a03d;
}

#topbar label {
  font-weight: bold;
}

/* Responsiv für kleine Bildschirme */
@media (max-width: 480px) {
  #topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  #topbar .left-controls,
  #topbar .right-controls {
    justify-content: center;
    gap: 0.3rem;
  }

  #topbar button,
  #topbar select {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }
}




#board {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  perspective: 800px; /* für 3D-Effekt */
}




.tile {
  display: flex;
  align-items: center;
  justify-content: center;

  width: calc(var(--tile-size) * 0.8);
  height: var(--tile-size);

  background: #efdab2;
  border-radius: 0.1em;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);

  position: absolute;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;

  font-size: var(--tile-font-size, calc(var(--tile-size) * 0.6));
  /*
  border-left: 2px solid #cfba92;
  border-bottom: 2px solid #bfaa82;
  */
}

/* Icon innerhalb der Tile nach oben verschieben */
.tile-icon {
  display: inline-block;
  line-height: 1;
  transform: translateY(var(--tile-font-adjust, 0));
}



.layer-0 { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.layer-1 { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4)); }
.layer-2 { filter: drop-shadow(0 3px 3px rgba(0,0,0,0.4)); }
.layer-3 { filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4)); }


.layer-1 { transform: translate(2px, -2px);}
.layer-2 { transform: translate(4px, -4px);}
.layer-3 { transform: translate(6px, -6px);}


/*.tile.free-left { border-left: 4px solid #cfba92; }*/
/*.tile.free-right { border-right: 4px solid #cfba92; }*/
/*.tile.free-top { border-top: 4px solid green; }*/
/*.tile.free-bottom { border-bottom: 4px solid #bfaa82; }*/


.tile.free {
  background: #ffeac2;
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 6px rgba(0,0,0,0.25),
    6px 8px 14px rgba(0,0,0,0.3);
}

.tile.free:hover {
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 8px rgba(0,0,0,0.3),
    8px 10px 18px rgba(0,0,0,0.4),
    0 0 10px 2px rgba(102,204,255,0.6);
}

.tile:hover {
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 6px rgba(0,0,0,0.25),
    6px 8px 14px rgba(0,0,0,0.3);
}


.tile.selected {
  outline: 3px solid #ffb347;
}

.tile.hint {
  outline: 3px dashed #66ccff;
  transform: scale(1.1);
}

.tile.removed {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}















.center-info {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-weight: bold;
  color: #3e2f1c;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
  z-index: 99999999;
}

.modal-content {
  background: #fff7e0;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  text-align: center;
  max-width: 400px;
}

.modal-content h2 {
  margin-bottom: 1rem;
}

#leaderboardList {
  max-height: 300px;
  overflow-y: auto;
  text-align: left;
}

#leaderboardList table {
  width: 100%;
  border-collapse: collapse;
}

#leaderboardList th, #leaderboardList td {
  padding: 0.4rem;
  border-bottom: 1px solid #ccc;
}


/*
.tile.layer-0 {
  background: #f90;
}
.tile.layer-1 {
  background: #f00;
}
.tile.layer-2 {
  background: #0f0;
}
.tile.layer-3 {
  background: #55f;
}
*/


/*
.tile[data-icon="🀇"] { color: red; }
.tile[data-icon="🀈"] { color: green; }
.tile[data-icon="🀉"] { color: blue; }
*/