:root {
  color-scheme: dark;
  --background: #464646;
  --foreground: #e0e0e0;
  --text-size: clamp(20px, 1.7vw, 26px);
  --translation-text-size: var(--text-size);
  --translation-line-height: 1.5;
  --translation-height: calc(var(--translation-text-size) * var(--translation-line-height) * 3 + 2px);
  --translation-bottom: 36px;
  --reader-top: 98px;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 400;
  background: var(--background);
  color: var(--foreground);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
}

html {
  scroll-padding-top: 24px;
  scroll-padding-bottom: calc(var(--translation-height) + var(--translation-bottom) + 32px);
}

.site-name {
  position: absolute;
  top: 12px;
  left: 18px;
  font-size: clamp(32px, 3.15vw, 48px);
  line-height: 1.4;
  white-space: nowrap;
}

.reader {
  width: min(58%, 900px);
  margin-inline: auto;
  padding-top: calc(var(--reader-top) + 12px);
  padding-bottom: calc(var(--translation-height) + var(--translation-bottom) + 48px);
  font-size: var(--text-size);
  line-height: 2;
}

.passage-title {
  margin: 0 0 0.83em;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 2;
  text-align: left;
  line-break: strict;
  overflow-wrap: anywhere;
}

.passage p {
  margin: 0 0 1em;
  text-align: justify;
  text-align-last: start;
  text-justify: inter-character;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  hanging-punctuation: allow-end;
}

.word {
  cursor: pointer;
  border-radius: 1px;
  -webkit-tap-highlight-color: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Inline phrases can wrap and justify naturally, including within a phrase. */
.word:hover,
.word:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: none;
}

.word:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 4px;
}

ruby {
  ruby-align: space-around;
  ruby-position: over;
}

rt {
  font-size: 0.5em;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  user-select: none;
}

.translation {
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: max(var(--translation-bottom), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% / 3);
  height: var(--translation-height);
  padding: calc(0.5em * var(--translation-line-height));
  overflow: auto;
  scrollbar-width: none;
  border: 1px solid var(--foreground);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 8%);
  background: var(--background);
  color: var(--foreground);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: var(--translation-text-size);
  line-height: var(--translation-line-height);
  text-align: left;
}

.translation p {
  margin: 0;
  overflow-wrap: anywhere;
}

.translation-meaning,
.translation-grammar {
  display: block;
}

.translation::-webkit-scrollbar,
.translation::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

::selection {
  color: var(--background);
  background: var(--foreground);
}

@media (max-width: 900px) {
  :root {
    --reader-top: 100px;
    --translation-bottom: 24px;
  }

  .reader {
    width: calc(100% - 64px);
    max-width: 650px;
  }

  .translation {
    width: min(calc(100% - 80px), 634px);
  }
}

@media (max-width: 540px) {
  :root {
    --reader-top: 90px;
    --translation-bottom: 20px;
  }

  .site-name {
    top: 14px;
    left: 20px;
  }

  .reader {
    width: calc(100% - 40px);
  }

  .translation {
    width: calc(100% - 56px);
  }
}

@media (max-height: 560px) and (min-width: 541px) {
  :root {
    --reader-top: 72px;
    --translation-bottom: 16px;
  }
}

/* Lyrics retain the approved centered layout; all other rules are shared. */
.passage--lyrics .passage-title { text-align: center; }
.passage--lyrics p { text-align: center; text-align-last: center; }