@use 'normalize.css';

@use './mixins' as *;
@use './variables';

*,
*:after,
*:before {
  box-sizing: border-box;
}

* {
  font-family: var(--font--family);
}

html,
body {
  margin: 0 auto;
  padding: 0;
}

body {
  background-color: var(--color--background);
  color: var(--color--foreground);
  font-size: var(--font--size--m);
  line-height: var(--line-height);
}

a {
  @include focus-effect;

  color: inherit;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

h1,
h2,
h3,
h4 {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin: 0;
}

/* https://github.com/vercel/next.js/discussions/13387#discussioncomment-5694715 */
nextjs-portal {
  display: none;
}

/**
 * Added pre-paint by _document's inline script when the persisted game differs from the
 * prerendered default board; removed after hydration applies the persisted config.
 * The class name must match CONFIG_PENDING_CLASS in parameters/index.ts.
 */
html.config-pending main {
  visibility: hidden;
}