/* GENERIC STUFF */

button {
  appearance: none;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  color: inherit;
  font: inherit;
}
kbd {
  font: inherit;
}

select {
  /* appearance: none; */
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

a,
label,
button {
  cursor: pointer;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}
a:active,
a:hover,
a:focus {
  /* outline: none; */
}

em {
  font-weight: bold;
  font-style: inherit;
}

::selection {
  background-color: var(--text);
  color: var(--background);
  text-shadow: none;
}

/* FONT */

@font-face {
  font-family: noto-sans-subset;
  src: url('./fonts/SourceHanSansJP-Regular.subset.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: noto-sans;
  src: url('./fonts/SourceHanSansJP-Regular.adjusted.woff2') format('woff2');
  /* src: url('./fonts/MPLUSRounded1c-Regular.ttf'); */
  font-display: block;
}
@font-face {
  font-family: noto-serif;
  src: url('./fonts/SourceHanSerifJP-Regular.adjusted.woff2') format('woff2');
  font-display: block;
}

/* VARIABLES */

html {
  --background: #fff8f8;
  --background-2: rgb(255, 236, 232);

  --text: rgb(47, 23, 30);
  --text-muted: rgb(86, 65, 71);
  --text-2: rgb(168, 108, 126);
  --text-2-stronger: rgb(155, 90, 109);

  --highlight: rgb(255, 227, 230);
  --highlight-2: #ffe6b8;

  --error: var(--wpm-4-background);

  --settings-border: rgb(234, 189, 189);
  --settings-text: #b55151;

  --icon-fill: rgb(208, 134, 138);

  --wpm-0-background: var(--highlight);
  --wpm-0-text: var(--text-2-stronger);
  --wpm-1-background: #ffcfcf;
  --wpm-1-text: var(--text-2-stronger);
  --wpm-2-background: #ffb3af;
  --wpm-2-text: rgb(164, 52, 52);
  --wpm-3-background: #ff918b;
  --wpm-3-text: rgb(128, 19, 19);
  --wpm-4-background: #ff7870;
  --wpm-4-text: #5b0404;
  --wpm-5-background: #fb544a;
  --wpm-5-text: white;
  --wpm-6-background: #ff331f;
  --wpm-6-text: white;
}

body {
  margin: 0;
  overflow: hidden;
  height: 100vh;

  display: grid;
  justify-content: center;
  align-items: center;

  font-size: 16px;
  color: var(--text);
  /* background-color: var(--background);
  background-image: linear-gradient(
    to bottom,
    var(--background) 50%,
    var(--background-2)
  ); */

  background: url('./waves.webp');
  /* background-size: 400px; */

  font-family: noto-sans-subset, noto-sans, sans-serif;
}
body.mincho {
  font-family: noto-serif, noto-sans;
}

main {
  width: 840px;
  height: 400px;
  border-radius: 50px;
  padding-inline: 3em;
  padding-block: 2em;

  border: 1px solid var(--settings-border);
  background: rgba(255, 255, 255, 0.95);

  display: grid;
  align-content: space-between;
  position: relative;
}

main {
  transition: opacity 300ms ease-in-out, transform 400ms ease-in-out;
}
body.loading main {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.98) translateY(10px);
}

/* SENTENCE */

#sentenceContainer {
  scale: var(--scale, 1);

  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: fit-content;

  font-size: 40px;
  font-weight: 400;
  word-break: keep-all;
  white-space: nowrap;
  color: var(--text);

  line-height: 1;
}

/* SENTENCE RUBY */

#sentenceElement > ruby {
  /* Override the ruby layout */
  position: relative;
  display: inline;
}
#sentenceElement > ruby > rt {
  /* Override the ruby layout */
  position: absolute;
  left: 50%;
  /* Setting this messes up alignment on Chrome/Windows */
  /* top: 0; */
  translate: calc(-50% + var(--overlap-adjustment, 0px)) -100%;

  user-select: none;

  /* Enable proportional-width glyphs */
  /* (this makes the text more compact) */
  font-kerning: normal;
  font-feature-settings: 'palt';
  /* letter-spacing: -0.01em; */
  font-size: 60%;
  color: var(--text-2);
  display: inline;

  line-height: 1;
}

/* FEAT: toggle furigana */
#sentenceElement > ruby > rt {
  transition: opacity 100ms ease-in-out, top 100ms ease-in-out,
    scale 100ms ease-in-out;
}
body:not(.furigana) #sentenceElement > ruby > rt {
  top: 10px;
  opacity: 0;
}

#sentenceElement > ruby > rt > * {
  /* Prepare for "complete" animation */
  position: relative;
  transition: top 200ms ease;
  top: -14px;
}
#sentenceElement > ruby > rt > .complete {
  top: -12px;
}

/* SENTENCE TEXT */

#sentenceElement .text {
  position: relative;
  color: transparent;
  transition: text-shadow 300ms ease-out, opacity 100ms ease-in;
  text-shadow: var(--text-muted) 0 0 0, transparent 0 0 1px, transparent 0 0 2px;
}

#sentenceElement .text.unknown {
  /* TODO: variables */
  /* --text-muted: rgb(153, 57, 85); */
  /* --text: rgb(140, 25, 59); */
}

#sentenceElement > .complete.text,
#sentenceElement > ruby:has(.complete:last-child) > .text {
  text-shadow: var(--text) 0.6px -0.3px 0, rgb(249, 239, 236) -1px -1.3px 2px,
    rgba(255, 104, 44, 0.37) 2px 2px 0;
}

.text[data-target='。']:last-child,
.text[data-target='っ'],
.text[data-target='ゃ'],
.text[data-target='ゅ'],
.text[data-target='ょ'],
.text[data-target='ッ'],
.text[data-target='ャ'],
.text[data-target='ュ'],
.text[data-target='ョ'] {
  /* Enable proportional character variants */
  font-kerning: normal;
  font-feature-settings: 'palt';
}

/* FEAT: cursor turns to dot */
#sentenceElement .text[data-target='。']:not(.complete),
#sentenceElement .text[data-target='。']:last-child {
  opacity: 0;
}

#sentenceElement .error::before,
body:not(.furigana) #sentenceElement ruby:has(.error) > .text::before {
  content: '';
  position: absolute;
  width: 0.2em;
  aspect-ratio: 1;
  left: 50%;
  translate: -50%;
  background-color: var(--error);
  border-radius: 100%;
  bottom: 110%;
}

/* HIGHLIGHT */

#highlightElement {
  position: absolute;
  z-index: 0;
  --size: 140%;
  top: calc((var(--size) - 100%) / -2);
  height: var(--size);
  left: 0;
  width: 0px;
  transition: width 350ms ease;
  border-radius: 3px;
  background-color: var(--highlight);

  /* Gradient */
  background-image: linear-gradient(
    to right,
    var(--highlight),
    var(--highlight-2)
  );
  background-size: 100vw;

  /* border: 1px solid #e1c29e;  
  border-right: none;
  border-left: none; */
}

#sentenceElement .text:last-child {
  padding-right: 0.8em;
}
#sentenceElement .text:last-child[data-target='。'] {
  padding-right: 0.4em;
}

/* HINT CIRCLE */

#hintElement {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  /* --hint-x is scaled by --scale */
  --hint-x: 0px;
  --hint-y: 0px;
  --large-size: 0.5em;
  --small-size: 0.2em;

  color: var(--text);
  border: 2px solid var(--text);
  border-radius: 50%;
  width: var(--large-size);
  height: var(--large-size);

  transform-origin: center center;
  translate: calc(-50% + var(--hint-x) / var(--scale))
    calc(-100% - 0.5em + var(--hint-y));

  transition: translate 150ms ease-out 30ms, width 150ms ease-in-out,
    height 150ms ease-in-out, color 150ms ease-in-out;

  animation: breathe 1000ms ease-in-out infinite alternate;
}

/* Jump over the furigana */
body.furigana #hintElement.higher {
  --hint-y: -0.7em;
}

/* Turn into a period character */
#sentenceElement:has(> .text[data-target='。'].active) ~ #hintElement {
  width: var(--small-size);
  height: var(--small-size);
  color: transparent;
  --hint-y: 1.46em;
}

/* Furigana disabled: smaller circle, no text */
body:not(.furigana) #sentenceContainer:not(.complete) #hintElement {
  width: var(--small-size);
  height: var(--small-size);
  color: transparent;
}

/* Mincho font: thinner hint */
body.furigana.mincho #hintElement {
  border-width: 1px;
}
body.mincho #hintElement::before {
  font-weight: normal;
}

/* Display a letter */
#hintElement::before {
  content: attr(data-letter);
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  translate: 0 -55%;
  color: inherit;
  font-size: 0.37em;
  font-weight: bold;
  text-transform: full-width;
  /* Chrome doesn't support text-transform: full-width */
  font-variant-east-asian: full-width;
}

/* Turn into a "return" symbol */
#sentenceContainer.complete #hintElement {
  border: none;
  filter: drop-shadow(2px 2px 0px rgba(255, 104, 44, 0.37));
  --hint-y: 1.4em;
  left: -0.3em;
  /* rotate: -6deg; */
  /* transform-origin: bottom left; */
}
#sentenceContainer.complete #hintElement::before {
  opacity: 0;
}
#hintElement custom-icon {
  font-size: 0.5em;
}
#sentenceContainer:not(.complete) #hintElement custom-icon {
  opacity: 0;
}

@keyframes breathe {
  0% {
    transform: perspective(1000px) translateY(0) rotateZ(-2deg);
  }
  100% {
    transform: perspective(1000px) translateY(-0.1em) rotateZ(3deg);
  }
}

/* TRANSLATION */

#translationElement {
  position: absolute;
  top: 100%;
  margin-block: 0.6em;
  left: 0;
  right: 2em;
  white-space: nowrap;

  color: var(--text-2);
  font-size: 55%;

  transition: opacity 100ms ease-in-out, top 100ms ease-in-out,
    scale 100ms ease-in-out;
}

body:has(#translationCheckbox:not(:checked)) #translationElement {
  top: calc(100% - 6px);
  opacity: 0;
}

/* BUTTONS */

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding-inline: 1em;

  /* Enable proportional-width glyphs */
  font-kerning: normal;
  font-feature-settings: 'palt';

  position: relative;

  border-radius: 333px;
  height: 2.4em;

  border: 1px solid var(--settings-border);

  color: var(--settings-text);

  transition: opacity 300ms ease-in-out, background 60ms, color 60ms, scale 60ms,
    translate 60ms;
}

.button:hover,
.button:has(input[type='radio']:checked) {
  color: var(--settings-text);
  border-color: var(--settings-text);
  /* background-color: var(--wpm-2-background); */
  /* color: var(--wpm-4-text); */
}
.button:hover {
  z-index: 999;
}
.button:active {
  filter: brightness(0.95) saturate(1.3);
  translate: 0 2px;
  scale: 0.97;
}

/* Dim buttons while typing is in progress */
.settings :is(.button, .readings):not(#nextSentenceButton, #restartButton),
body:has(#sentenceContainer:not(.complete)):has(#sentenceElement .complete)
  #nextSentenceButton {
  filter: grayscale(0.7);
}

/* KEYBOARD SHORTCUT LABEL */

.key,
.legend {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  text-align: center;
  white-space: nowrap;
  user-select: none;

  font-size: 0.6em;
  color: var(--settings-text);
}
.legend {
  bottom: 100%;
  padding-block: 0.4em;

  font-size: 12px;
}
.legend.hover-info {
  text-decoration: 1px underline dotted;
  text-underline-position: under;
  cursor: help;
}

.key {
  top: 100%;

  margin-block: -0.5em;
  background-color: var(--background);
  outline: 1px solid var(--settings-border);
  border-radius: 2px;
  padding: 0.3em 0.5em;
  /* opacity: 0.8; */

  font-size: 10px;
}

/* SETTINGS */

.settings {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1em;
  margin-top: 1em;
}

.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-group > .button {
  border-radius: 0;
}
.button-group > :first-child {
  border-top-left-radius: 333px;
  border-bottom-left-radius: 333px;
}
.button-group > :last-child {
  border-top-right-radius: 333px;
  border-bottom-right-radius: 333px;
}
.button-group > :nth-child(n + 2) {
  margin-left: -1px;
}

/* NEXT SENTENCE */

/* SPEED / RESTART */

#restartButton {
  margin-left: auto;
  width: 6em;

  transition: translate 100ms ease-in-out, opacity 100ms ease-in-out 20ms;
}
#restartButton .key {
  /* margin-block: 0.7em; */
}
#restartButton.hidden {
  visibility: hidden;
  opacity: 0;
  translate: 0 0.5em;
}
#restartButton:hover {
  border-color: rgb(131, 25, 30) !important;
}

/* This makes the property animatable */
@property --wpm {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}
#speedElement {
  /* This counter doesn't count, 
  /* it's just used to render the --wpm property */
  counter-reset: wpm var(--wpm);
  margin-top: -0.1em;
}
#speedElement::before {
  content: counter(wpm);
  font-size: 1.05em;
}
#speedElement .wpm {
  margin-left: 0.2em;
  font-size: 0.8em;
}

#restartButton .key {
  transition: opacity 400ms ease 220ms;
}
#restartButton.hidden .key {
  opacity: 0;
  transition: opacity 100ms ease 0ms;
}

/* CHECKBOX - Hidden checkbox + conditionally visible icons */

.custom-checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.custom-checkbox
  input[type='checkbox']:not(:checked)
  ~ custom-icon[name='checked'] {
  display: none;
}
.custom-checkbox
  input[type='checkbox']:checked
  ~ custom-icon[name='unchecked'] {
  display: none;
}

.custom-checkbox > custom-icon {
  color: var(--settings-border);
  height: 16px;
  width: 16px;
  margin-right: 6px;
}
.custom-checkbox > custom-icon > svg {
  margin-top: -4px;
  margin-left: -4px;
}

.custom-checkbox:hover > custom-icon,
.custom-checkbox:has([type='checkbox']:checked) > custom-icon {
  color: currentColor;
}

/* LANGUAGE SELECT */

label:has(#languageSelect) {
  padding-inline-end: 0.5em;
}
#languageSelect {
  width: 6em;
}

/* VOICE/AUDIO NOTIFICATION MESSAGE */

#sentenceVoiceContainer {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  margin-bottom: 0.3em;
  /* background: var(--background); */
  padding-inline: 1em;
  z-index: 2;
  user-select: none;
  pointer-events: none;
  display: flex;
  align-items: center;
  color: var(--settings-text);
  font-size: 0.6em;
  gap: 0.3em;
  transition: opacity 300ms ease-in-out, translate 200ms ease-in-out;
}
#sentenceVoiceContainer.hidden {
  opacity: 0;
  translate: -50% 0.5em;
}
#sentenceVoiceContainer custom-icon {
  color: inherit;
}
#sentenceVoiceElement {
  white-space: nowrap;
}
.legend:has(+ #sentenceVoiceContainer) {
  transition: opacity 300ms 150ms;
}
.legend:has(+ #sentenceVoiceContainer:not(.hidden)) {
  opacity: 0;
}

/* UNKNOWN READINGS MENU */

.readings {
  position: relative;

  padding-inline: 1em;
  align-self: stretch;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45em;

  outline: 1px solid var(--settings-border);
  outline-offset: -1px;
  border-radius: 333px;
  padding-inline: 0.8em;
}
.readings .button {
  padding: 0;
  aspect-ratio: 1;
  height: 1.8em;
  font-size: 0.8em;
  /* outline-color: var(--settings-border); */
}
.readings .button input[type='radio'] {
  display: none;
}

/* LINKS */

.links {
  display: flex;
  gap: 1em;
  margin-top: 0.1em;
}

.links .button {
  font-size: 0.9em;
  filter: hue-rotate(5deg);
  opacity: 1;
}

.links a:not([href]) {
  visibility: hidden;
  opacity: 0;
}

.links .button .bold {
  font-weight: bold;
  padding-inline: 0.2em;
  /* font-size: 1.05em; */
}

#logo {
  height: auto;
  margin-block: auto;
  font-size: 1.4em;
  color: var(--text-muted);
  font-family: 'Courier New', Courier, monospace;
}
#logo .domain {
  font-size: 0.7em;
  /* font-weight: bolder; */
  color: var(--text-2);
}

.links .button custom-icon {
  margin-right: 0.4em;
}
custom-icon[name='github'] > svg,
custom-icon[name='discord'] > svg {
  stroke: none;
  fill: var(--icon-fill);
}

#sentenceOriginLink {
  margin-left: auto;
}

/* SENTENCE COUNT */

@property --sentence-count {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}
#sentenceCountElement {
  transition: --sentence-count 3000ms ease-in-out;
  counter-reset: sentence-count var(--sentence-count);
}
#sentenceCountElement::before {
  content: counter(sentence-count);
}

/* MOBILE */

.description {
  display: none;
  color: var(--text);
  margin-bottom: 1em;
  line-height: 1.5em;
}

@media (max-width: 850px) {
  main {
    width: auto;
    height: auto;
    border-radius: 0;
  }
  .description {
    display: block;
  }
  #sentenceContainer,
  .settings,
  #sentenceOriginLink {
    display: none;
  }
  .links {
    justify-content: center;
  }
}
