/* Reset / base */
body {
  margin: 0;
  font-family: sans-serif;
  text-align: center;
  background: #111;
  color: white;
}

h2 {
  margin: 10px 0;
}

/* Wrapper keeps board centered + fully visible */
#board-wrapper {
  width: 100vw;
  height: calc(100vh - 60px); /* space for title */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive square board */
#board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr); /* ensure square cells */
  gap: 5px;

  width: min(95vw, 95vh);
  height: min(95vw, 95vh);
}

/* Tiles */
.tile {
  width: 100%;
  height: 100%;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: clamp(6px, 2vw, 14px);
  text-align: center;
  padding: 2px;

  color: white;
  user-select: none;

  transition: transform 0.1s, opacity 0.2s;
}

/* Tap feedback (mobile friendly) */
.tile:active {
  transform: scale(0.95);
}

/* Difficulty colors (mapped from type) */
.green { background: #2ecc71; }   /* easy */
.orange { background: #e67e22; }  /* medium */
.red { background: #e74c3c; }     /* hard */
.purple { background: #8e44ad; }  /* elite */
.blue { background: #3498db; }    /* team */

/* Completed state */
.completed {
  opacity: 0.25;
  text-decoration: line-through;
}

/* Modal overlay */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.7);

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hidden helper */
.hidden {
  display: none;
}

/* Modal content */
.modal-content {
  background: #222;
  padding: 15px;
  border-radius: 10px;
  width: 85%;
  max-width: 400px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Textarea */
textarea {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  border: none;
  padding: 8px;
  resize: none;
  font-size: 14px;
}

/* Buttons */
button {
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #444;
  color: white;
  font-size: 14px;
}

button:active {
  background: #666;
}

.tile-id {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.7em;
    color: black;
}

.tile-note-icon img {
    width: 0.8em; /* relative to tile font size */
    height: 0.8em;
}
.tile-note-icon {
    position: absolute;
    top: 0px;
    left: 1px;
}