@font-face {
  font-family: "_font";
  src: url("Playwrite-Regular.woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Mamelon";
  src: url("Mamelon-3.5HiRegular.woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Mamelon";
  src: url("Mamelon-5-Hi-Regular.woff2");
  font-weight: 700;
}

:root {
  font-weight: 400;
  font-family: "Mamelon", sans-serif;

  --col-bg-outer: #34f4b4;
  --col-bg-inner: #1a3c32;
  --col-accent: #ff8fc3;
  --col-accent-highlight: #fed7ff;
  --col-accent-dark: #f06ab8;
  --col-accent-shadow: #804d75;
  --col-text-outer: #000;
  --col-text-inner: #fff;
  /* tiles */
  --col-empty: #384241;
  --col-empty-dark: #21282a;
  --col-unchecked: #d8ccd5;
  --col-unchecked-dark: #baaab6;
  --col-short: #5d98e1;
  --col-short-dark: #2d5daa;
  --col-long: #f976e5;
  --col-long-dark: #cd2b8c;
  /* keys */
  --col-blank-dark: #b5b5b5;
  --col-blank-light: #d9d9d9;
  --col-miss-dark: #69676f;
  --col-miss-light: #838289;
  --col-graze-dark: #fcc946;
  --col-graze-light: #fff792;
  --col-hit-dark: #7be695;
  --col-hit-light: #b7ffbe;

  --col-sys-highlight: #d1f7ff;
  --col-sys: #62e5ff;
  --col-sys-dark: #2190cc;
  --col-sys-shadow: #124b8c;

  --col-theme-highlight: var(--col-sys-highlight);
  --col-theme: var(--col-sys);
  --col-theme-dark: var(--col-sys-dark);
  --col-theme-shadow: var(--col-sys-shadow);


  font-size: 16px;
  background: var(--col-bg-outer);
  color: var(--col-text-outer);
}

:lang(en) {
  font-family: "_font", "Mamelon", sans-serif;
}

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

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

input {
  font-family: inherit;
  font-size: inherit;
  color: black;
  border-radius: 12px;
  background: linear-gradient(
    to bottom,
    var(--col-blank-dark) 0%,
    var(--col-blank-dark) 50%,
    var(--col-blank-light) 100%
  );
  box-shadow:
    0px 1px 3px rgba(0, 0, 0, 0.5) inset
    ;
  border: 1px solid gray;
  padding: 0.125rem 0.5rem;
}

button,
select,
a.closeLink,
nav > ul > li {
  font-family: inherit;
  font-size: inherit;
  color: black;
  border-radius: 12px;
  background: linear-gradient(
    to bottom,
    var(--col-theme) 0%,
    var(--col-theme-highlight) 20%,
    var(--col-theme-highlight) 25%,
    var(--col-theme) 75%,
    var(--col-theme-dark) 100%
  );
  box-shadow:
    4px 0px 6px var(--col-theme) inset,
    -4px 0px 6px var(--col-theme) inset,
    0px -1px 4px var(--col-theme-dark) inset,
    0px 2px 2px var(--col-theme-highlight) inset,
    0px 1px 3px lch(0% 0 0 / 0.5)
  ;
  border: 1px solid var(--col-theme-dark);
  padding: 0 0.25rem;
  transition: scale 150ms ease-out;
}

button:active,
nav > ul > li:has(label:active),
nav > ul > li:has(a:active) {
  background: linear-gradient(
    to top,
    var(--col-theme) 0%,
    var(--col-theme-highlight) 20%,
    var(--col-theme-highlight) 25%,
    var(--col-theme) 75%,
    var(--col-theme-dark) 100%
    );
    box-shadow:
    2px 0px 3px var(--col-theme) inset,
    -2px 0px 3px var(--col-theme) inset,
    0px -1px 2px var(--col-theme-dark) inset,
    0px 1px 1px var(--col-theme-highlight) inset,
    0px 1px 1px lch(0% 0 0 / 0.75)
    ;
    scale: 1.05;
    transition: scale 20ms ease-out;
  }
  
nav > ul > li {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
}

nav > ul > li label,
nav > ul > li a,
nav > ul > li a:visited {
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

button:disabled {
  opacity: 0.5;
}

button {
  min-width: 2rem;
  min-height: 2rem;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.icon:before {
  content: '';
  position: absolute;
  inset: 0;
  color: inherit;
  background-color: currentColor;
  mask-position: center;
  mask-size: 100%;
  mask-repeat: no-repeat;
}

.icon.credits:before {
  mask-image: url("img/credits.svg");
}

.icon.donate:before {
  mask-image: url("img/donate.svg");
}

.icon.exit:before {
  mask-image: url("img/exit.svg");
}

.icon.feedback:before {
  mask-image: url("img/feedback.svg");
}

.icon.keyboard:before {
  mask-image: url("img/keyboard.svg");
}

.icon.letterCount:before {
  mask-image: url("img/letter-count.svg");
}

.icon.replay:before {
  mask-image: url("img/replay.svg");
}

.icon.rules:before {
  mask-image: url("img/rules.svg");
}

.icon.settings:before {
  mask-image: url("img/settings.svg");
}

.icon.soundOff:before {
  mask-image: url("img/sound-off.svg");
}

.icon.soundOn:before {
  mask-image: url("img/sound-on.svg");
}

.icon.spellcheck:before {
  mask-image: url("img/spellcheck.svg");
}

.icon.starEmpty:before {
  mask-image: url("img/star-empty.svg");
}

.icon.starFilled:before {
  mask-image: url("img/star-filled.svg");
}

.icon.wordCount:before {
  mask-image: url("img/word-count.svg");
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100svh;
  overflow-x: hidden;
  background-attachment: fixed;
  background-image: linear-gradient(
    to bottom,
    var(--col-bg-outer) 0%,
    lab(from var(--col-bg-outer) calc(l + 20) calc(a * 0.8) calc(b * 0.8)) 45%,
    lab(from var(--col-bg-outer) calc(l - 20) calc(a * 0.8) calc(b * 0.8)) 55%,
    var(--col-bg-outer) 100%
  );
}

nav {
  background-attachment: fixed;
  background-image: linear-gradient(
    to bottom,
    var(--col-bg-outer) 0%,
    lab(from var(--col-bg-outer) calc(l + 20) calc(a * 0.8) calc(b * 0.8)) 45%,
    lab(from var(--col-bg-outer) calc(l - 20) calc(a * 0.8) calc(b * 0.8)) 55%,
    var(--col-bg-outer) 100%
  );
}

nav input[type='checkbox'] {
  display: none;
}

.page-game {
  background: linear-gradient(
    to bottom,
    var(--col-bg-inner) 0%,
    hsl(from var(--col-bg-inner) h s calc(l + 10)) 50%,
    hsl(from var(--col-bg-inner) h s calc(l + 20)) 100%
  );
  box-shadow:
    0px 0px 3px hsl(from var(--col-bg-inner) h s calc(l + 20))inset,
    0px 0px 16px var(--col-bg-inner) inset
  ;
  color: var(--col-text-inner);
}

@media screen and (min-width: 480px) {
  body {
    display: grid;
    grid-template-columns: 8rem 1fr;
    grid-template-rows: 3rem 3fr 2fr;
    grid-template-areas:
      "status status"
      "nav game"
      "nav game";
  }

  .page-game {
    min-width: 0;
    grid-area: game;
    border-top-left-radius: 1rem;
  }

  #status {
    grid-area: status;
    min-width: 0;
  }

  nav {
    grid-area: nav;
    min-width: 0;
  }

  nav ul {
    list-style: none;
    padding-inline: 8px;
  }

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

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

.full-page {
  position: fixed;
  box-sizing: border-box;
  padding: 1rem;
  z-index: 16;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  inset: 0;
  backdrop-filter: blur(6px) contrast(50%) brightness(50%);
  min-height: 0;
}

.modal-bg {
  position: relative;
  padding: 1rem;
  background: var(--col-bg-inner);
  color: var(--col-text-inner);
  border: 2px solid var(--col-bg-outer);
  width: 24rem;
  min-height: 0;
  max-height: 100%;
  display: flex;
}

.modal-scroller {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.closeLink {
  position: absolute;
  top: -1rem;
  right: -1rem;
  background: var(--col-bg-inner);
  color: var(--col-text-inner);
  border: 2px solid var(--col-bg-outer);
}

#status {
  color: black;
  text-shadow: 0px 1px 2px white;
  background-image: linear-gradient(
    to bottom,
    #e9eeea 0%,
    #b1b8b1 45%,
    #ffffff 55%,
    #c8d1cc 100%
  );
  box-shadow:
    0px -1px 1px lch(95.36% 31.96 144.62) inset,
    1px 0px 2px lch(0% 0 0 / 0.2) inset,
    -1px 0px 2px lch(0% 0 0 / 0.2) inset,
    0px 1px 3px lch(0% 0 0 / 0.5);
  ;
  margin: 8px;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#startGame,
#anotherGame {
  text-align: center;
  margin-inline: 8px;
}

@media screen and (max-width: 479.999px) {
  body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 100dvh;
    box-sizing: border-box;
    max-width: 100%;
  }

  .page-game {
    width: inherit;
    max-width: calc(100% - 16px);
    border-radius: 1rem;
    margin: 4px auto;
    flex: 1 0 auto;
  }

  nav {
    min-width: 0;
    max-width: 100vw;
    display: block;
    overflow-x: auto;
    overflow-y: clip;
  }

  nav ul {
    margin: 0.5rem 1rem;
    padding: 0;
    display: block;
    white-space: nowrap;
  }

  nav ul li {
    display: inline-block;
    flex: 0 0 auto;
    margin-right: 1rem;
  }

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

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

h1 {
  margin: 0;
  font-size: 32px;
  font-weight: normal;
}

h3 {
  font-size: 20px;
  color: var(--col-accent);
  font-weight: normal;
}

#grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(0.125 * var(--gridSize));
  margin-block: 1rem;
}

.gridLine {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(0.125 * var(--gridSize));
}

.gridLength {
  width: calc(1.5 * var(--gridSize));
  height: var(--gridSize);
  text-align: center;
  line-height: var(--gridSize);
  color: black;
  border-top-left-radius: calc(0.25 * var(--gridSize));
  border-bottom-left-radius: calc(0.25 * var(--gridSize));
  background: linear-gradient(
    to bottom,
    var(--col-theme) 0%,
    var(--col-theme-dark) 100%
  );
  box-shadow:
  0px -2px 2px var(--col-theme-shadow) inset,
  0px 1px 2px var(--col-theme-highlight) inset,
  0px 0px 4px var(--col-theme-dark) inset,
  0px 1px 2px rgba(from black r g b / 0.25);
  
  --col-theme-highlight: lch(from var(--col-theme) calc(l + 25) c h);
  --col-theme: var(--col-unchecked);
  --col-theme-dark: var(--col-unchecked-dark);
  --col-theme-shadow: lch(from var(--col-theme-dark) calc(l - 25) c h);
}

.gridTile {
  width: var(--gridSize);
  height: var(--gridSize);
  border-radius: calc(var(--gridSize) * 0.0625);
  text-align: center;
  line-height: var(--gridSize);
  background: linear-gradient(
    to bottom,
    var(--col-theme) 0%,
    var(--col-theme-dark) 100%
  );
  box-shadow:
  0px -2px 2px var(--col-theme-shadow) inset,
  0px 1px 2px var(--col-theme-highlight) inset,
  0px 0px 4px var(--col-theme-dark) inset,
  0px 1px 2px rgba(from black r g b / 0.25);
  color: var(--col-unchecked);
  
  --col-theme-highlight: lch(from var(--col-theme) calc(l + 25) c h);
  --col-theme: var(--col-empty);
  --col-theme-dark: var(--col-empty-dark);
  --col-theme-shadow: lch(from var(--col-theme-dark) calc(l - 25) c h);
}

.gridTile.filled {
  --col-theme: var(--col-unchecked);
  --col-theme-dark: var(--col-unchecked-dark);
  color: black;
}

.gridLine.inactive .gridTile {
  --col-theme: var(--col-empty);
  --col-theme-dark: var(--col-empty-dark);
}

.gridLine .gridTile.miss {
  --col-theme: var(--col-miss-light);
  --col-theme-dark: var(--col-miss-dark);
}

.gridLine .gridTile.graze {
  --col-theme: var(--col-graze-light);
  --col-theme-dark: var(--col-graze-dark);
}

.gridLine .gridTile.hit,
.gridLine .gridLength.hit {
  --col-theme: var(--col-hit-light);
  --col-theme-dark: var(--col-hit-dark);
}

.gridLine .gridLength.shorter {
  --col-theme: var(--col-short);
  --col-theme-dark: var(--col-short-dark);
}

.gridLine .gridLength.longer {
  --col-theme: var(--col-long);
  --col-theme-dark: var(--col-long-dark);
}

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

#textInput {
  font-size: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  max-width: 20rem;
  text-align: center;
  margin: 0 auto 2px;
  font-family: "_font", "Mamelon", sans-serif;
}

#textInput::placeholder {
  color: hsla(0 0 100 0.5);
  font-family: "Mamelon", sans-serif;
}

#keyboardGrid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  max-width: 100%;
}

#keyboardGrid .line {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  max-width: 100%;
  margin-inline: 4px;
}

#keyboardGrid button {
  flex: 1 1 0px;
  min-width: unset;
  height: 2.5rem;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 2.5rem;
  --col-theme-highlight: lch(from var(--col-theme) calc(l + 25) c h);
  --col-theme: var(--col-blank-light);
  --col-theme-dark: var(--col-blank-dark);
  --col-theme-shadow: lch(from var(--col-theme-dark) calc(l - 25) c h);
}

#keyboardGrid button+button {
  margin-left: 2px;
}

#keyboardGrid button.miss {
  color: rgba(0, 0, 0, 0.25);
  --col-theme: var(--col-miss-light);
  --col-theme-dark: var(--col-miss-dark);
}

#keyboardGrid button.graze {
  --col-theme: var(--col-graze-light);
  --col-theme-dark: var(--col-graze-dark);
}

#keyboardGrid button.hit {
  --col-theme: var(--col-hit-light);
  --col-theme-dark: var(--col-hit-dark);
}

#keyboardGrid button[data-button="delete"],
#keyboardGrid button[data-button="submit"] {
  flex: 2 2 0px;
  --col-theme-highlight: var(--col-sys-highlight);
  --col-theme: var(--col-sys);
  --col-theme-dark: var(--col-sys-dark);
  --col-theme-shadow: var(--col-sys-shadow);
}

#sound {
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#customPuzzleLinks {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

#customPuzzleLinks>li {
  width: fit-content;
}

#customPuzzleMarkdown {
  width: 100%;
}

#definitionBox {
  border: 1px solid var(--col-bg-outer);
  height: 9rem;
  margin-block: 0.5rem;
  overflow-y: scroll;
}

#finalScores {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  color: var(--col-bg-outer);
}

#finalScores b {
  color: var(--col-text-inner);
}

#finalScores hr {
  border-color: var(--col-bg-outer);
  margin-block: 0.25rem;
}


details {
  background: var(--col-bg-outer);
  padding: 0.125rem;
  text-align: start;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  box-shadow:
  0px 2px 4px lab(from var(--col-bg-outer) calc(l + 40) a b) inset,
  0px 0px 8px lab(from var(--col-bg-outer) calc(l - 80) calc(a * 0.8) calc(b * 0.8)) inset
  ;
}

details>summary {
  color: var(--col-text-outer);
  padding: 0.25rem;
}

#dictCarousel {
  max-width: 100%;
  background: var(--col-bg-inner);
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  align-items: stretch;
  scroll-snap-type: x mandatory;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.dictBox {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  flex: 0 0 auto;
  width: calc(100% - 3rem);
  max-width: 24rem;
  padding: 0.5rem;
  background: white;
  color: black;
  border-radius: 4px;
  padding: 4px;
  text-align: start;
  margin-bottom: 4px;
}

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

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.dictBox .flex-row> :first-child {
  flex: 1 1 0;
}

.dictBox .flex-row> :last-child {
  flex: 0 0 auto;
  text-align: end;
}

.dictBox h3 {
  margin: 0;
  color: black;
}

.dictBox h4 {
  margin: 0;
  font-weight: normal;
}

.dictBox .desc {
  flex: 1 0 auto;
  margin-bottom: 1rem;
}

form {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  gap: 0.25rem;
}

form > input {
  min-width: 0;
  flex: 1 1 0;
}

form > button {
  flex: 0 0 auto;
}

.error {
  display: block;
  text-shadow: 2px 2px 2px red;
}