body {
  background-color: grey;
}

#game {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
}

.left-panel {
  width: 20%;
  padding: 72px 2px 2px;
}

.color-grid {
  display: grid;
  grid-template-rows: 1.4fr repeat(7, 1fr);
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  gap: 6px;
}

.color-box {
  border: 2px solid black;
  border-radius: 10px;
  cursor: pointer;
}

.color-box.selected {
  outline: 5px solid white;
  outline-offset: -8px;
  box-shadow: 0 0 0 3px black;
  transform: scale(1.06);
}

.span3 {
  grid-column: span 3;
  border: none;
  background: none;
  display: flex;
  align-items: center;
}

#clear {
  background-color: white;
  border: 2px solid black;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  font-size: 2.2rem;
}

#clear:active {
  background-color: #ddd;
}

.right-panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* cell size (--cell) is set from app.js so the cells stay square */
.canvas-grid {
  display: grid;
  grid-template-rows: repeat(16, var(--cell, 40px));
  grid-template-columns: repeat(20, var(--cell, 40px));
  touch-action: none;
  background-color: #fff;
  border: 2px solid #555;
}

.canvas-box {
  background-color: #ffffff;
  border: 1px solid lightgrey;
}

/* iPad en vertical: paleta arriba, lienzo debajo */
@media (orientation: portrait) {
  #game {
    flex-direction: column;
  }
  .left-panel {
    width: 100%;
    height: 17%;
    padding: 2px 2px 2px 72px;
  }
  .color-grid {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: 1.4fr repeat(11, 1fr);
  }
  .span3 {
    grid-column: 1;
    grid-row: span 2;
  }
  .right-panel {
    width: 100%;
  }
  /* same cells rotated 90°: landscape rows become portrait columns, right to left */
  .canvas-grid {
    grid-template-rows: repeat(20, var(--cell, 40px));
    grid-template-columns: repeat(16, var(--cell, 40px));
    grid-auto-flow: column;
    direction: rtl;
  }
}