treant 0.4.0

/* ---- 2048 Board ---- */
.boardContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.scoreRow {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.scoreBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #bbada0;
  color: #fff;
  border-radius: 6px;
  padding: 0.375rem 1rem;
  min-width: 5rem;
}

.scoreBadge span:first-child {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.scoreBadge span:last-child {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  background: #bbada0;
  border-radius: 8px;
  width: 280px;
  position: relative;
}

.tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: 4px;
  user-select: none;
  transition: background 0.12s, transform 0.12s;
  font-family: var(--ifm-font-family-monospace);
}

/* Tile colors by data-value */
.tile[data-value='0'] {
  background: #cdc1b4;
}

.tile[data-value='2'] {
  background: #eee4da;
  color: #776e65;
  font-size: 1.5rem;
}

.tile[data-value='4'] {
  background: #ede0c8;
  color: #776e65;
  font-size: 1.5rem;
}

.tile[data-value='8'] {
  background: #f2b179;
  color: #f9f6f2;
  font-size: 1.5rem;
}

.tile[data-value='16'] {
  background: #f59563;
  color: #f9f6f2;
  font-size: 1.375rem;
}

.tile[data-value='32'] {
  background: #f67c5f;
  color: #f9f6f2;
  font-size: 1.375rem;
}

.tile[data-value='64'] {
  background: #f65e3b;
  color: #f9f6f2;
  font-size: 1.375rem;
}

.tile[data-value='128'] {
  background: #edcf72;
  color: #f9f6f2;
  font-size: 1.25rem;
}

.tile[data-value='256'] {
  background: #edcc61;
  color: #f9f6f2;
  font-size: 1.25rem;
}

.tile[data-value='512'] {
  background: #edc850;
  color: #f9f6f2;
  font-size: 1.25rem;
}

.tile[data-value='1024'] {
  background: #edc53f;
  color: #f9f6f2;
  font-size: 1rem;
}

.tile[data-value='2048'] {
  background: #edc22e;
  color: #f9f6f2;
  font-size: 1rem;
}

/* 4096+ fallback */
.tile[data-value='4096'],
.tile[data-value='8192'],
.tile[data-value='16384'],
.tile[data-value='32768'],
.tile[data-value='65536'] {
  background: #3c3a32;
  color: #f9f6f2;
  font-size: 0.875rem;
}

/* ---- Game over overlay ---- */
.gameOverOverlay {
  position: absolute;
  inset: 0;
  background: rgba(238, 228, 218, 0.73);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  z-index: 2;
}

.gameOverOverlay p {
  font-size: 1.5rem;
  font-weight: 700;
  color: #776e65;
  margin: 0;
}

/* ---- Settings ---- */
.settingsRow {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.settingLabel {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--ifm-color-emphasis-700);
}

.settingLabel span {
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.select {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 4px;
  background: var(--ifm-background-surface-color);
  color: var(--ifm-font-color-base);
  cursor: pointer;
}

.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Controls ---- */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.controlRow {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.arrowBtn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  background: var(--ifm-background-surface-color);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, border-color 0.15s;
}

.arrowBtn:hover:not(:disabled) {
  background: var(--ifm-color-emphasis-100);
  border-color: var(--ifm-color-primary);
}

.arrowBtn:disabled {
  opacity: 0.4;
  cursor: default;
}

.arrowSpacer {
  width: 48px;
  height: 48px;
}

.actionBtns {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ---- MCTS suggestion ---- */
.suggestion {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--ifm-color-primary);
}

/* ---- Analysis table ---- */
.analysisTable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.analysisTable th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ifm-color-emphasis-600);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
}

.analysisTable td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--ifm-color-emphasis-100);
}

.analysisTable tbody tr:last-child td {
  border-bottom: none;
}

.bestRow td {
  background: rgba(34, 197, 94, 0.08);
  font-weight: 600;
}

/* ---- Keyboard hint ---- */
.keyHint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--ifm-color-emphasis-500);
  margin-top: 0.25rem;
}

/* ---- Dark mode ---- */
[data-theme='dark'] .gameOverOverlay {
  background: rgba(50, 48, 44, 0.8);
}

[data-theme='dark'] .gameOverOverlay p {
  color: #f9f6f2;
}

[data-theme='dark'] .arrowBtn {
  border-color: var(--ifm-color-emphasis-400);
}