/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
}

.meowdoku-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.meowdoku-win-banner {
  font-weight: bold;
  color: #2e7d32;
}

.meowdoku-grid {
  display: grid;
  grid-template-columns: repeat(var(--meowdoku-size), 1fr);
  grid-template-rows: repeat(var(--meowdoku-size), 1fr);
  gap: 2px;
  width: min(92vw, 32rem);
  aspect-ratio: 1 / 1;
  border: 2px solid #333;
  background: #333;
  /* Without this, a finger drag across cells scrolls/pans the page on mobile instead
     of reaching the pointermove handler that paints marks across the drag. */
  touch-action: none;
}

.meowdoku-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.85rem, calc(3.5vw), 1.5rem);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  color: #fff;
}

.meowdoku-cell.meowdoku-conflict {
  box-shadow: inset 0 0 0 3px #d32f2f;
}

.meowdoku-controls {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

.meowdoku-region-0 { background-color: #e46894; }
.meowdoku-region-1 { background-color: #cd5535; }
.meowdoku-region-2 { background-color: #d38400; }
.meowdoku-region-3 { background-color: #8b8500; }
.meowdoku-region-4 { background-color: #51b153; }
.meowdoku-region-5 { background-color: #009d84; }
.meowdoku-region-6 { background-color: #00aed6; }
.meowdoku-region-7 { background-color: #2582dc; }
.meowdoku-region-8 { background-color: #9585f4; }
.meowdoku-region-9 { background-color: #ad5ab5; }