@import '../assets/css/index.css';

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: grid;
  block-size: var(--fl-size-stretch);
  inline-size: var(--fl-size-stretch);
  overflow: hidden;
}

.fl-button {
  &.-fl-guess-backspace {
    inline-size: 4ch;
  }

  &.-fl-guess-enter {
    inline-size: 4ch;
    order: -1;
  }

  &.-fl-guess-go {
    padding: 0;
    background: oklch(var(--fl-color-60) var(--fl-color-theme));
    color: oklch(var(--fl-color-05) var(--fl-color-theme));
    font-weight: 700;
  }

  &.-fl-guess-hit {
    background: oklch(var(--fl-color-15) var(--fl-color-theme));
    color: oklch(var(--fl-color-90) var(--fl-color-theme));
    font-weight: 700;
  }

  &.-fl-guess-miss {
    opacity: 33%;
  }
}

.fl-shell {
  --fl-guess-letterCount: 5;

  @media (height <= 440px) {
    grid-template:
      'head head' min-content
      'body foot' minmax(0, 1fr)
      / minmax(0, 1fr) min-content;
  }
}

.fl-shell-body {
  display: grid;
  overflow: auto;

  &.-fl-guess-create {
    grid-template-columns: auto;
    place-content: safe center;
    gap: 0.5lh;
    padding: 2ch 1ch;
    font-size: clamp(1.6rem, 10vmin, 7rem);
  }
}

.fl-shell-foot {
  @media (height <= 440px) {
    place-content: safe end;
  }
}

.fl-guess-hero {
  display: grid;
  place-items: stretch;
  place-content: safe center;
  max-inline-size: 60ch;
}

.fl-guess-select {
  display: block;
  color: oklch(var(--fl-color-60) var(--fl-color-theme));
  font-weight: 700;
  border-radius: 0.5ch;

  &:focus-visible {
    text-decoration: underline;
  }
}

.fl-guess-message {
  position: fixed;
  top: 4.5ch;
  right: 0;
  padding: 1ch calc(2ch + env(safe-area-inset-right)) 1ch 2ch;
  inline-size: fit-content;
  background: black;
  border-radius: 9999ch 0 0 9999ch;
  color: white;
  font-size: clamp(1.6rem, 4vmin, 2.4rem);
  text-wrap: balance;

  &:empty {
    display: none;
  }
}

.fl-guess-words {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-content: safe center;
  place-items: safe center;
  padding: 1ch;
  gap: 3ch 1ch;
  font-size: clamp(1.6rem, 55vmin / var(--fl-guess-letterCount), 6rem);
  line-height: 1;

  &:has(:nth-child(2 of .fl-guess-word)) {
    grid-template-columns: repeat(auto-fit, minmax(calc(2.2ch * var(--fl-guess-letterCount)), 1fr));
    font-size: clamp(1.6rem, 30vmin / var(--fl-guess-letterCount), 4rem);
  }
}

.fl-guess-word {
  display: flex;
  flex-flow: column;
  place-content: safe center;
  place-items: safe center;
  grid-template-columns: minmax(0, 1fr);
  gap: max(10px, 0.25ch) 0;

  &.-example {
    padding: 0.5ch 0;
    font-size: 2.5em;
  }
}

.fl-guess-letters {
  display: flex;
  flex-flow: row;
  place-content: safe center;
  place-items: safe center;

  &.-guessed {
    & > * {
      animation: fl-guess-letters-pulse 800ms ease-in-out 200ms alternate 2;
      animation-delay: calc(200ms * sibling-index());
    }
  }
}

@keyframes fl-guess-letters-pulse {
  to {
    font-weight: 100;
  }
}

.fl-guess-letter {
  padding: 0.25ch 0.5ch;
  border-radius: 0.25ch;
  font-weight: 300;
  text-decoration: underline solid 1px oklch(var(--fl-color-45) var(--fl-color-gray));
  text-underline-offset: 0.25ch;
  transition:
    background-color 200ms ease-in,
    color 200ms ease-in;

  &.-wrong {
    color: oklch(var(--fl-color-75) var(--fl-color-gray));
    font-weight: 100;
    text-decoration: none;
  }

  &.-miss {
    color: oklch(var(--fl-color-75) var(--fl-color-theme));
    font-weight: 700;
    text-decoration: underline wavy 3px;
  }

  &.-right {
    background: oklch(var(--fl-color-60) var(--fl-color-theme));
    color: oklch(var(--fl-color-05) var(--fl-color-theme));
    font-weight: 700;
    text-decoration: none;

    & + & {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    &:has(+ &) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }
}

.fl-guess-keyboard {
  display: flex;
  flex-flow: column;
  gap: 0.75ch 0.5ch;
  padding: 1ch 1.5ch;
  font-size: clamp(1.6rem, 5vmin, 2.4rem);
}

.fl-guess-keyboard-row {
  display: flex;
  flex-flow: row;
  gap: 0.5ch;
  justify-content: safe center;

  &.-date {
    margin-block-start: 0.5ch;
  }
}

.fl-guess-tutorial {
  display: grid;
  grid-template-columns: min-content minmax(0, 1fr);
  gap: 0.5ch;
  padding: 1ch;
  text-wrap: balance;

  & dd {
    padding: 0.25ch 0.5ch;
  }
}