:root {
  --bs-border-radius: 0.375rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  letter-spacing: 0;
}

main {
  flex: 1;
}
.container {
  max-width: 1100px;
}
.navbar-brand {
  font-weight: 700;
}
.site-header .navbar {
  padding-inline: 12px;
}
.navbar .nav-link.active {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.site-footer {
  font-size: 0.875rem;
}
.nav-tabs .nav-link {
  min-height: 48px;
}
li + li {
  margin-top: 0.25rem;
}
.navbar li + li,
.nav-tabs li + li {
  margin-top: 0;
}
p,
li,
td,
a {
  overflow-wrap: anywhere;
}
.project-link {
  text-underline-offset: 0.2em;
}
.profile-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

#board {
  width: min(100%, 380px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  margin: 1.5rem auto;
  border-radius: 6px;
  background: var(--bs-secondary-bg);
  touch-action: none;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 4px;
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
}

.cell-2 {
  background: #dbeafe;
  color: #172554;
}
.cell-4 {
  background: #a7d9ee;
  color: #163447;
}
.cell-8 {
  background: #8ce0cf;
  color: #123f36;
}
.cell-16 {
  background: #46bfa8;
  color: #12332a;
}
.cell-32 {
  background: #147c66;
  color: #fff;
}
.cell-64 {
  background: #165fab;
  color: #fff;
}
.cell-128 {
  background: #f9db72;
  color: #383015;
}
.cell-256 {
  background: #f2bf4f;
  color: #383015;
}
.cell-512 {
  background: #f49cac;
  color: #481b29;
}
.cell-1024 {
  background: #bc3c5b;
  color: #fff;
}
.cell-2048 {
  background: #862541;
  color: #fff;
}
.game-toolbar {
  max-width: 380px;
  margin: auto;
}
.game-score {
  min-width: 7rem;
  font-variant-numeric: tabular-nums;
}
.game-controls {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 6px;
  justify-content: center;
}
.game-controls button {
  width: 48px;
  height: 48px;
  color: var(--bs-body-color);
  border-color: var(--bs-secondary-color);
}

@media print {
  .site-header,
  .site-footer,
  .nav-tabs {
    display: none !important;
  }
  .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    margin-bottom: 2rem;
  }
  body {
    background: white !important;
    color: black !important;
  }
}