@font-face {
  font-family: "_nunito";
  font-weight: 900;
  src: url("./Nunito-Shavian-Black.woff2");
}
@font-face {
  font-family: "_inter_alia";
  font-weight: 400;
  src: local("Inter Alia"), url("./InterAlia-Regular.ttf");
}
@font-face {
  font-family: "_inter_alia";
  font-weight: 700;
  src: local("Inter Alia Bold"), url("./InterAlia-Bold.ttf");
}

:root {
  --font-display: "_nunito", "Nunito", sans-serif;
  --font-body: "_inter_alia", "Segoe UI Historic", sans-serif;
  font-family: var(--font-body);
  
  --col-bg: white;
  --col-fg: black;
  --col-dim-bg: #f7f5f0;
  --col-dim: #dfdcd2;
  --col-accent: #d09404;
  --col-wrong-bg: #ef4141;
  --col-wrong-fg: #b32010;
  --col-right-bg: #91f653;
  --col-right-fg: #449e23;

  background: var(--col-bg);
  color: var(--col-fg);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --col-bg: black;
    --col-fg: white;
    --col-dim-bg: #282322;
    --col-dim: #7e7766;
    --col-accent: #e2db24;
    --col-wrong-bg: #760808;
    --col-wrong-fg: #ff5f4d;
    --col-right-bg: #14b832;
    --col-right-fg: #a8ff88;
  }
}

body.shavianMode .latin {
  display: none;
}

body:not(.shavianMode) .shavian {
  display: none;
}

a {
  color: var(--col-accent);
}

a:visited {
  color: var(--col-accent);
}

input,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: inherit;
  border: 2px solid var(--col-accent);
  background-color: var(--col-bg);
}

button {
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0 var(--col-accent);
  margin: 0 0 0.125rem;
}

button:hover {
  background-color: color-mix(in srgb, var(--col-bg) 80%, var(--col-accent) 20%)
}

button:active {
  box-shadow: 0 0 0 var(--col-accent);
  transform: translateY(0.125rem);
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
}

.page-game {
  box-sizing: border-box;
  padding: 0.5rem;
  width: 100%;
  overflow-y: auto;
}

#top {
  width: min(100%, 30rem);
  align-items: stretch;
}

nav {
  background: var(--col-dim-bg);
  min-width: 0;
  max-width: 100vw;
  overflow-x: auto;
}

nav ul {
  min-width: 0;
  white-space: nowrap;
  padding-left: 1rem;
}

nav ul li {
  display: inline;
  padding-right: 1rem;
}

@media screen and (min-width: 540px) {
  body {
    display: grid;
    grid-template-columns: 12rem 1fr;
    grid-template-rows: 2rem 3fr 2fr;
    grid-template-areas:
      "status status"
      "nav game"
      "nav game";
    background: var(--col-dim-bg);
  }

  .page-game {
    grid-area: game;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top-left-radius: 1rem;
    background-color: var(--col-bg);
    padding: 0.5rem;
  }

  nav {
    grid-area: nav;
  }

  nav ul {
    white-space: wrap;
  }
  
  nav ul li {
    display: block;
  }

  nav ul li + li {
    margin-block-start: 1rem;
  }

  #status {
    grid-area: status;
  }

  #keyboardGrid {
    width: 100%;
    max-width: 24rem;
  }
}


dialog::backdrop {
  background: rgba(32, 32, 32, 0.5);
}

dialog {
  background: var(--col-bg);
  color: var(--col-fg);
  border: 2px solid var(--col-dim);
  width: 24rem;
  border-radius: 0.5rem;
}

#status {
  width: 100%;
  background: var(--col-dim-bg);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#keyboard, #keyboardGrid {
  width: 100%;
}

@media screen and (max-width: 479.999px) {
  body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}

#title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: 2.25rem;
  font-family: var(--font-display);
}

h2 {
  font-weight: 2rem;
  font-family: var(--font-display);
}

h3 {
  font-size: 1.5rem;
  color: var(--col-accent);
  font-weight: normal;
  font-family: var(--font-display);
}

#wordListList {
  background: var(--col-dim-bg);
  border-radius: 0.625rem;
  padding: 0.5rem;
}

#wordListList li {
  display: block;
  background: var(--col-bg);
  list-style: none;
  border: 0.125rem solid var(--col-dim);
  border-radius: 0.125rem;
  padding: 0.75rem;
}

#wordListList li + li {
  margin-top: 0.5rem;
}

#wordListList li > h3 {
  margin-block: 0;
}

#top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  margin-block: 1rem;
  width: 100%;
}

#wordNav {
  width: 100%;
  background-color: var(--col-accent);
  color: var(--col-bg);
  font-family: var(--font-display);
  text-align: center;
  padding-block: 0.125rem;
  border-radius: 0.5rem;
}

#wordGiven {
  font-size: 2rem;
  font-weight: bold;
  word-break: break-word;
}

#top details {
  border: 0.125rem solid var(--col-accent);
  padding: 0.125rem;
  background: var(--col-bg);
  border-radius: 0.5rem;
}

#top details summary {
  background: var(--col-accent);
  color: var(--col-bg);
  padding: 0.125rem;
  font-family: var(--font-display);
  border-radius: 0.25rem;
}

#top details p {
  margin-block: 0.125rem;
}

#keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#composeBar {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
}

#composeBar input {
  flex: 1 1 0;
  background: var(--col-bg);
  color: var(--col-fg);
  border: 0.125rem solid var(--col-accent);
  font-family: inherit;
  font-size: 1.5rem;
  text-align: center;
  margin: 0 auto;
  min-width: 0;
  border-radius: 0.5rem;
}

#composeBar button {
  flex: 0 0 auto;
}

.keyboardGrid10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.keyboardGrid11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}

#keyboardBody {
  display: block;
  width: 100%;
  max-width: 25rem;
}

#keyboardBody button {
  min-width: 2rem;
  min-height: 2.5rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--col-bg);
  color: var(--col-fg);
  border: 1px solid var(--col-dim);
}

#keyboardBody .buttonWithMnemonic {
  display: inline-flex;
  min-width: 2.5rem;
  min-height: 0;
  box-shadow: none;
  flex-direction: row;
  padding: 0;
  overflow: hidden;
  justify-content: stretch;
  align-items: stretch;
}

.buttonWithMnemonic .main,
.buttonWithMnemonic .mnemonic {
  flex: 1 1 0px;
}

.buttonWithMnemonic .mnemonic {
  background: var(--col-dim);
  font-size: 0.8rem;
  line-height: 1rem;
}

#keyboardBody div.filler {
  min-width: 0;
  height: 3rem;
}

#answerPanel {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: -0.5rem;
  overflow-y: hidden;
}

#answerResult {
  position: relative;
  padding: 0.55rem;
  border: 0.125rem solid #000;
  border-bottom-width: 0;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

#answerResultText {
  margin-block: -0.25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

#answerResult s,
#answerResult b {
  display: block;
}

#answerResult button {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
}

.incorrect {
  background: var(--col-wrong-bg);
  border-color: var(--col-wrong-fg);
}

.correct {
  background: var(--col-right-bg);
  border-color: var(--col-right-fg);
}

.gameOverview {
  align-self: stretch;
  border-radius: 0.5rem;
  background: var(--col-dim-bg);
  padding: 0.5rem;
}

.gameOverview > div {
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  background: var(--col-bg);
  border: 0.125rem solid var(--col-dim);
  margin-top: 0.25rem;
}

.gameOverview > div:first-child {
  margin-top: 0;
}

.gameOverview h4 {
  color: var(--col-accent);
  margin: 0 0 0.25rem -0.25rem;
}

.gameOverview p {
  margin: 0;
}

.gameOverview .withPieChart {
  display: flex;
  flex-direction: row-reverse;
  justify-content: stretch;
}

.gameOverview .withPieChart div {
  flex: 1 1 0px;
}

.gameOverview .withPieChart div.pieChart {
  display: flex;
  justify-content: center;
  align-items: center;

  flex: 0 0 auto;
  border: 0.125rem solid var(--col-dim);
  --angle: 200deg;
  background: conic-gradient(
    from 0deg, var(--col-accent) 0deg var(--angle), var(--col-dim-bg) var(--angle) 360deg
  );
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}

.gameOverview .withPieChart div.pieChart span {
  font-weight: bold;
}

.hflex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
}