/* Shared ink-line icons inherit each site's paper, ink and vermilion palette. */
.dse-icon {
  display: inline-block;
  width: 1.16em;
  height: 1.16em;
  vertical-align: -.19em;
  flex-shrink: 0;
  color: inherit;
  pointer-events: none;
}
[data-icon] { display: inline-flex; align-items: center; vertical-align: -.19em; }
[data-icon] > .dse-icon { vertical-align: 0; }
.dse-icon-loading { animation: dse-icon-turn 1.4s linear infinite; }
@keyframes dse-icon-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dse-icon-loading { animation: none; } }

@media (max-width: 420px) {
  #topbar:has(button[data-restart-game]) { flex-direction: column-reverse; align-items: stretch; }
  #topbar:has(button[data-restart-game]) #objective { width: 100%; }
  #tools:has(> button[data-restart-game]) {
    align-self: flex-end;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}