:root {
  --ink: #19140d;
  --muted-ink: #675947;
  --paper: #e8dcc1;
  --paper-deep: #d5c39c;
  --paper-light: #f4ecd8;
  --rule: #756044;
  --accent: #6d1c17;
  --shadow: rgba(20, 14, 7, .28);

  --ui-bg: #15120e;
  --ui-text: #e8dcc1;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ui-bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, #30271d 0%, #15120e 58%);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

button {
  font: inherit;
}

.app-bar {
  position: sticky;
  z-index: 20;
  top: 0;

  min-height: 58px;
  padding:
    max(8px, env(safe-area-inset-top))
    12px
    8px;

  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;

  background: rgba(21, 18, 14, .96);
  color: var(--ui-text);

  border-bottom: 1px solid #4b4030;

  backdrop-filter: blur(12px);
}

.app-title {
  text-align: center;
  letter-spacing: .08em;
}

.app-title strong {
  display: block;
  font-size: .83rem;
}

.app-title span {
  display: block;
  margin-top: 2px;
  color: #a99672;
  font-size: .56rem;
  letter-spacing: .16em;
}

.app-button {
  width: 40px;
  height: 40px;

  border: 1px solid #5e503d;
  border-radius: 2px;

  background: transparent;
  color: var(--ui-text);

  cursor: pointer;
}

.reader-controls {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;

  padding:
    8px
    12px
    max(8px, env(safe-area-inset-bottom));

  display: grid;
  grid-template-columns: 48px 1fr 1.25fr 48px;
  gap: 6px;

  background: rgba(21, 18, 14, .97);
  border-top: 1px solid #4b4030;

  backdrop-filter: blur(12px);
}

.reader-controls button {
  min-height: 42px;

  border: 1px solid #5e503d;
  border-radius: 2px;

  background: #1e1913;
  color: #ddcfaf;

  font-family: ui-monospace, monospace;
  font-size: .76rem;
  letter-spacing: .08em;

  cursor: pointer;
}

.reader-controls button:active {
  background: #352b1f;
}

@media (min-width: 800px) {
  .app-bar {
    grid-template-columns: 50px 1fr 50px;
  }

  .reader-controls {
    width: min(660px, calc(100% - 32px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);

    border: 1px solid #4b4030;
    border-bottom: 0;
  }
}

.navigator[hidden] {
  display: none;
}

.navigator {
  position: fixed;
  z-index: 100;
  inset: 0;
}

.navigator-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(7, 6, 4, .72);
  backdrop-filter: blur(4px);
}

.navigator-panel {
  position: absolute;
  inset:
    max(18px, env(safe-area-inset-top))
    12px
    max(18px, env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;

  max-width: 680px;
  margin: 0 auto;

  background: var(--paper);
  color: var(--ink);

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

  box-shadow:
    0 24px 80px rgba(0, 0, 0, .55),
    inset 0 0 40px rgba(79, 59, 33, .08);

  overflow: hidden;
}

.navigator-header {
  min-height: 64px;
  padding: 12px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid rgba(89, 66, 39, .35);
}

.navigator-header strong {
  display: block;
  font-size: .9rem;
  letter-spacing: .18em;
}

.navigator-header span {
  display: block;
  margin-top: 3px;

  color: var(--muted-ink);

  font-size: .62rem;
  letter-spacing: .13em;
}

.navigator-header button {
  width: 42px;
  height: 42px;

  border: 1px solid rgba(89, 66, 39, .45);

  background: transparent;
  color: var(--ink);

  font-size: 1.5rem;
}

.navigator-body {
  flex: 1;
  padding: 18px 14px 28px;

  overflow-y: auto;
}

.navigator-label {
  margin: 0 0 14px;

  text-align: center;

  color: var(--muted-ink);

  font-size: .66rem;
  letter-spacing: .18em;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.book-button {
  min-height: 48px;
  padding: 8px 10px;

  border: 1px solid rgba(89, 66, 39, .4);

  background: rgba(255,255,255,.05);
  color: var(--ink);

  text-align: left;

  font-size: .9rem;
}

.book-button small {
  display: block;
  margin-top: 3px;

  color: var(--muted-ink);

  font-size: .62rem;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.chapter-button {
  aspect-ratio: 1;

  border: 1px solid rgba(89, 66, 39, .4);

  background: rgba(255,255,255,.05);
  color: var(--ink);

  font-size: .9rem;
}

.navigator-back {
  margin-bottom: 18px;

  border: 0;

  background: transparent;
  color: var(--accent);

  font-size: .7rem;
  letter-spacing: .12em;
}

.book-button:active,
.chapter-button:active {
  background: rgba(109, 28, 23, .12);
}

@media (min-width: 620px) {
  .book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chapter-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

.app-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.app-bar {
  grid-template-columns: 44px 1fr auto;
}

.search-overlay[hidden] {
  display: none;
}

.search-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
}

.search-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(7, 6, 4, .78);
  backdrop-filter: blur(5px);
}

.search-panel {
  position: absolute;
  inset:
    max(16px, env(safe-area-inset-top))
    10px
    max(16px, env(safe-area-inset-bottom));

  max-width: 720px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  background: var(--paper);
  color: var(--ink);

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

  box-shadow:
    0 24px 90px rgba(0,0,0,.65),
    inset 0 0 45px rgba(79,59,33,.08);

  overflow: hidden;
}

.search-header {
  min-height: 66px;
  padding: 12px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(89,66,39,.35);
}

.search-header strong {
  display: block;

  font-size: .84rem;
  letter-spacing: .16em;
}

.search-header span {
  display: block;
  margin-top: 3px;

  color: var(--muted-ink);

  font-size: .62rem;
  letter-spacing: .12em;
}

.search-header button {
  width: 42px;
  height: 42px;

  border:
    1px solid rgba(89,66,39,.4);

  background: transparent;
  color: var(--ink);

  font-size: 1.45rem;
}

.search-form {
  padding: 12px;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;

  border-bottom:
    1px solid rgba(89,66,39,.25);
}

.search-form input {
  min-width: 0;
  min-height: 46px;

  padding: 0 13px;

  border:
    1px solid rgba(89,66,39,.5);
  border-radius: 0;

  background: rgba(255,255,255,.14);
  color: var(--ink);

  font: inherit;
  font-size: 1rem;

  outline: none;
}

.search-form input:focus {
  border-color: var(--accent);

  box-shadow:
    inset 0 0 0 1px var(--accent);
}

.search-form button {
  min-height: 46px;
  padding: 0 15px;

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

  background: var(--accent);
  color: var(--paper-light);

  font-size: .68rem;
  letter-spacing: .12em;
}

.search-status {
  padding: 10px 14px;

  color: var(--muted-ink);

  font-size: .68rem;
  letter-spacing: .09em;

  border-bottom:
    1px solid rgba(89,66,39,.2);
}

.search-results {
  flex: 1;
  overflow-y: auto;
}

.search-result {
  width: 100%;
  padding: 15px 14px;

  display: block;

  border: 0;
  border-bottom:
    1px solid rgba(89,66,39,.22);

  background: transparent;
  color: var(--ink);

  text-align: left;
}

.search-result-reference {
  display: block;
  margin-bottom: 5px;

  color: var(--accent);

  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
}

.search-result-text {
  display: block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: .94rem;
  line-height: 1.45;
}

.search-result:active {
  background:
    rgba(109,28,23,.10);
}

@media (min-width: 700px) {
  .search-panel {
    inset:
      max(28px, env(safe-area-inset-top))
      20px
      max(28px, env(safe-area-inset-bottom));
  }
}

.offline-library {
  padding: 12px 14px;

  border-bottom:
    1px solid rgba(89,66,39,.28);
}

.offline-library button {
  width: 100%;
  min-height: 44px;

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

  background: transparent;
  color: var(--accent);

  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.offline-library button:disabled {
  opacity: .5;
}

#offlineLibraryStatus {
  margin-top: 8px;

  color: var(--muted-ink);

  font-size: .64rem;
  line-height: 1.4;
}

/* =========================================================
   READING DISPLAY
   ========================================================= */


.display-overlay[hidden] {
  display: none;
}

.display-overlay {
  position: fixed;
  z-index: 140;
  inset: 0;
}

.display-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(7, 6, 4, .78);
  backdrop-filter: blur(5px);
}

.display-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  top: max(80px, env(safe-area-inset-top));

  max-width: 520px;
  margin: 0 auto;

  background: var(--paper);
  color: var(--ink);

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

  box-shadow:
    0 25px 80px rgba(0,0,0,.6),
    inset 0 0 40px rgba(79,59,33,.08);
}

.display-panel > header {
  min-height: 66px;
  padding: 12px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(89,66,39,.3);
}

.display-panel header strong {
  display: block;

  font-size: .8rem;
  letter-spacing: .16em;
}

.display-panel header span {
  display: block;
  margin-top: 4px;

  color: var(--muted-ink);

  font-size: .62rem;
}

.display-panel header button {
  width: 42px;
  height: 42px;

  border: 1px solid rgba(89,66,39,.4);

  background: transparent;
  color: var(--ink);

  font-size: 1.4rem;
}

.display-section {
  padding: 16px 14px;

  border-bottom:
    1px solid rgba(89,66,39,.22);
}

.display-section p {
  margin: 0 0 10px;

  color: var(--muted-ink);

  font-size: .62rem;
  letter-spacing: .18em;
}

.text-size-controls,
.density-controls {
  display: grid;
  gap: 7px;
}

.text-size-controls {
  grid-template-columns: repeat(3, 1fr);
}

.density-controls {
  grid-template-columns: 1fr 1fr;
}

.text-size-controls button,
.density-controls button {
  min-height: 44px;

  border:
    1px solid rgba(89,66,39,.42);

  background: transparent;
  color: var(--ink);
}

.text-size-controls button.active,
.density-controls button.active {
  border-color: var(--accent);
  color: var(--accent);

  box-shadow:
    inset 0 0 0 1px var(--accent);
}

.display-note {
  margin: 0;
  padding: 14px;

  color: var(--muted-ink);

  font-size: .68rem;
  line-height: 1.45;
}

.page-style-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.page-style-controls button {
  min-height: 44px;

  border:
    1px solid rgba(89,66,39,.42);

  background: transparent;
  color: var(--ink);

  font-size: .66rem;
  letter-spacing: .08em;
}

.page-style-controls button.active {
  border-color: var(--accent);
  color: var(--accent);

  box-shadow:
    inset 0 0 0 1px var(--accent);
}

.reference-overlay[hidden] {
  display: none;
}

.reference-overlay {
  position: fixed;
  z-index: 150;
  inset: 0;
}

.reference-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(7,6,4,.78);
  backdrop-filter: blur(5px);
}

.reference-panel {
  position: absolute;

  left: 12px;
  right: 12px;
  top: max(86px, env(safe-area-inset-top));

  max-width: 520px;
  margin: 0 auto;

  background: var(--paper);
  color: var(--ink);

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

  box-shadow:
    0 24px 80px rgba(0,0,0,.6);
}

.reference-panel > header {
  min-height: 64px;
  padding: 12px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(89,66,39,.3);
}

.reference-panel header strong {
  display: block;

  font-size: .82rem;
  letter-spacing: .16em;
}

.reference-panel header span {
  display: block;
  margin-top: 4px;

  color: var(--muted-ink);

  font-size: .62rem;
}

.reference-panel header button {
  width: 42px;
  height: 42px;

  border:
    1px solid rgba(89,66,39,.4);

  background: transparent;
  color: var(--ink);

  font-size: 1.4rem;
}

#referenceForm {
  padding: 14px;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}

#referenceForm input {
  min-width: 0;
  min-height: 46px;

  padding: 0 12px;

  border:
    1px solid rgba(89,66,39,.5);

  background: rgba(255,255,255,.14);
  color: var(--ink);

  font: inherit;
  font-size: 1rem;
}

#referenceForm button {
  min-height: 46px;
  padding: 0 15px;

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

  background: var(--accent);
  color: var(--paper-light);

  font-size: .68rem;
  letter-spacing: .12em;
}

#referenceStatus {
  margin: 0;
  padding:
    0
    14px
    14px;

  color: var(--muted-ink);

  font-size: .66rem;
  line-height: 1.4;
}

.bookmark-overlay[hidden] {
  display: none;
}

.bookmark-overlay {
  position: fixed;
  z-index: 160;
  inset: 0;
}

.bookmark-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,6,4,.78);
  backdrop-filter: blur(5px);
}

.bookmark-panel {
  position: absolute;
  inset:
    max(18px, env(safe-area-inset-top))
    12px
    max(18px, env(safe-area-inset-bottom));

  max-width: 620px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  background: var(--paper);
  color: var(--ink);

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

  box-shadow:
    0 24px 80px rgba(0,0,0,.6);
}

.bookmark-panel > header {
  min-height: 64px;
  padding: 12px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(89,66,39,.3);
}

.bookmark-panel header strong {
  display: block;
  font-size: .82rem;
  letter-spacing: .16em;
}

.bookmark-panel header span {
  display: block;
  margin-top: 4px;

  color: var(--muted-ink);
  font-size: .62rem;
}

.bookmark-panel header button {
  width: 42px;
  height: 42px;

  border:
    1px solid rgba(89,66,39,.4);

  background: transparent;
  color: var(--ink);

  font-size: 1.4rem;
}

.bookmark-actions {
  padding: 12px 14px;

  border-bottom:
    1px solid rgba(89,66,39,.24);
}

#saveBookmarkButton {
  width: 100%;
  min-height: 44px;

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

  background: transparent;
  color: var(--accent);

  font-size: .66rem;
  letter-spacing: .12em;
}

.bookmark-list {
  flex: 1;
  overflow-y: auto;
}

.bookmark-item {
  padding: 14px;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;

  border-bottom:
    1px solid rgba(89,66,39,.22);
}

.bookmark-open {
  border: 0;
  padding: 0;

  background: transparent;
  color: var(--ink);

  text-align: left;
}

.bookmark-reference {
  display: block;

  color: var(--accent);

  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .10em;
}

.bookmark-meta {
  display: block;
  margin-top: 4px;

  color: var(--muted-ink);

  font-size: .62rem;
}

.bookmark-remove {
  width: 38px;
  height: 38px;

  border:
    1px solid rgba(89,66,39,.36);

  background: transparent;
  color: var(--muted-ink);
}

/* =========================================================
   FINAL APP BAR
   ========================================================= */

.app-bar {
  grid-template-columns:
    44px
    minmax(0, 1fr)
    auto;

  gap: 7px;
}

.app-title {
  min-width: 0;
  overflow: hidden;

  white-space: nowrap;
}

.app-title strong {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: clamp(.68rem, 2.7vw, .83rem);
  letter-spacing: .07em;
}

.app-title span {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: clamp(.45rem, 1.8vw, .56rem);
}

.app-actions {
  flex-shrink: 0;
}

.app-actions .app-button {
  width: 40px;
  height: 40px;
}

/*
  Very narrow phones:
  slightly tighter toolbar without sacrificing controls.
*/

@media (max-width: 430px) {
  .app-bar {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      auto;

    gap: 5px;

    padding-left: 8px;
    padding-right: 8px;
  }

  .app-button,
  .app-actions .app-button {
    width: 36px;
    height: 38px;
  }

  .app-actions {
    gap: 4px;
  }

  .app-title strong {
    font-size: .67rem;
    letter-spacing: .055em;
  }

  .app-title span {
    font-size: .44rem;
    letter-spacing: .10em;
  }
}

/*
  Larger screens regain breathing room.
*/

@media (min-width: 800px) {
  .app-bar {
    grid-template-columns:
      50px
      minmax(0, 1fr)
      auto;
  }

  .app-actions .app-button {
    width: 44px;
    height: 42px;
  }
}

/* =========================================================
   FINAL TYPE SCALE
   ========================================================= */

body.text-small {
  --reader-scale: .90;
}

body.text-medium {
  --reader-scale: 1;
}

body.text-large {
  --reader-scale: 1.14;
}

@media (max-width: 430px) {
  .reader-controls {
    grid-template-columns:
      42px
      minmax(70px, .8fr)
      minmax(110px, 1.35fr)
      42px;

    gap: 5px;

    padding-left: 8px;
    padding-right: 8px;
  }

  .reader-controls button {
    min-width: 0;

    padding-left: 4px;
    padding-right: 4px;

    font-size: .66rem;
    letter-spacing: .06em;
  }
}

/* =========================================================
   V1.1 RESPONSIVE HARDENING
   Prevent UI children from forcing viewport overflow.
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/*
  Grid/flex children default to min-width:auto, which can
  force otherwise-correct responsive layouts beyond the viewport.
*/
.app-bar > *,
.app-actions,
.app-title,
.reader-controls > *,
.search-form > *,
.bookmark-item > *,
.navigator-header > *,
.search-header > *,
.display-panel > header > *,
.reference-panel > header > *,
.bookmark-panel > header > * {
  min-width: 0;
}

.app-title strong,
.app-title span {
  max-width: 100%;
}

/* Long canonical book names must remain inside their cells. */
.book-button,
.book-button small,
.bookmark-reference,
.search-result-reference {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* All overlay panels stay within the physical viewport. */
.navigator-panel,
.search-panel,
.display-panel,
.reference-panel,
.bookmark-panel {
  max-width: calc(100% - 20px);
}

/*
  Bottom controls scale continuously rather than depending on
  minimum column widths that can overflow narrow phones.
*/
@media (max-width: 430px) {
  .reader-controls {
    grid-template-columns:
      40px
      minmax(0, .82fr)
      minmax(0, 1.25fr)
      40px;
  }

  .reader-controls button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Extra-small / split-screen Android viewport. */
@media (max-width: 360px) {
  .app-bar {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      auto;

    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .app-button,
  .app-actions .app-button {
    width: 34px;
    height: 38px;
  }

  .app-actions {
    gap: 3px;
  }

  .reader-controls {
    grid-template-columns:
      38px
      minmax(0, .78fr)
      minmax(0, 1.22fr)
      38px;

    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .reader-controls button {
    padding-left: 2px;
    padding-right: 2px;

    font-size: .61rem;
    letter-spacing: .035em;
  }

  .book-grid {
    gap: 6px;
  }

  .book-button {
    padding-left: 8px;
    padding-right: 8px;
    font-size: .84rem;
  }
}


/* =========================================================
   PWA INSTALL PROMPT
   ========================================================= */

.install-prompt[hidden] {
  display: none;
}

.install-prompt {
  position: fixed;
  z-index: 1200;
  inset:
    auto
    12px
    calc(82px + env(safe-area-inset-bottom))
    12px;

  display: flex;
  justify-content: center;

  pointer-events: none;
}

.install-prompt__card {
  position: relative;

  width: min(440px, 100%);
  padding:
    22px
    20px
    18px;

  color: var(--ink);

  background:
    linear-gradient(
      180deg,
      rgba(250,246,237,.985),
      rgba(232,220,193,.985)
    );

  border: 1px solid rgba(117,96,68,.55);
  border-radius: 3px;

  box-shadow:
    0 22px 55px rgba(0,0,0,.36),
    inset 0 0 30px rgba(109,28,23,.035);

  pointer-events: auto;
}

.install-prompt__card::before {
  content: "";

  position: absolute;
  inset: 6px;

  border: 1px solid rgba(117,96,68,.28);

  pointer-events: none;
}

.install-prompt__close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;

  width: 38px;
  height: 38px;

  border: 0;
  background: transparent;

  color: var(--muted-ink);

  font: inherit;
  font-size: 1.35rem;

  cursor: pointer;
}

.install-prompt__eyebrow {
  margin: 0 40px 7px 0;

  color: var(--accent);

  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.install-prompt h2 {
  margin: 0 36px 8px 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(1.25rem, 5vw, 1.65rem);
  font-weight: 500;
  line-height: 1.08;
}

.install-prompt__copy {
  margin: 0 0 13px;

  color: var(--muted-ink);

  font-size: .88rem;
  line-height: 1.45;
}

.install-prompt__benefits {
  margin:
    0
    0
    16px;
  padding-left: 1.15rem;

  color: var(--ink);

  font-size: .78rem;
  line-height: 1.55;
}

.install-prompt__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.install-prompt__install,
.install-prompt__later {
  min-height: 44px;

  padding:
    0
    14px;

  font: inherit;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .11em;

  cursor: pointer;
}

.install-prompt__install {
  border: 1px solid #531712;

  color: #f4ecd8;
  background: #6d1c17;
}

.install-prompt__later {
  border: 1px solid rgba(117,96,68,.45);

  color: var(--muted-ink);
  background: transparent;
}

body.page-nocturne .install-prompt__card {
  color: var(--ink);

  background:
    linear-gradient(
      180deg,
      #292219,
      #1b1711
    );

  border-color: #655642;
}

body.page-nocturne .install-prompt__install {
  background: #873b31;
  border-color: #a85a4d;
}

@media (max-width: 430px) {
  .install-prompt {
    inset:
      auto
      8px
      calc(76px + env(safe-area-inset-bottom))
      8px;
  }

  .install-prompt__card {
    padding:
      19px
      16px
      15px;
  }

  .install-prompt__actions {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }
}


/* =========================================================
   INSTALL PROMPT DIMMING
   ========================================================= */

.install-prompt {
  inset: 0;
  align-items: flex-end;
  padding:
    0
    12px
    calc(82px + env(safe-area-inset-bottom));

  pointer-events: auto;
}

.install-prompt__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(8, 7, 5, .68);

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}

.install-prompt__card {
  z-index: 1;
}

@media (max-width: 430px) {
  .install-prompt {
    padding:
      0
      8px
      calc(76px + env(safe-area-inset-bottom));
  }
}


/* =========================================================
   FIRST-RUN GUIDED TUTORIAL
   ========================================================= */

.tutorial[hidden] {
  display: none;
}

.tutorial {
  position: fixed;
  z-index: 1500;
  inset: 0;

  pointer-events: none;
}

/*
  The huge outer shadow creates the dimmed screen while leaving
  the selected control visible through the centre.
*/
.tutorial-spotlight {
  position: fixed;
  z-index: 1501;

  border-radius: 8px;

  box-shadow:
    0 0 0 9999px rgba(8,7,5,.72),
    0 0 0 2px rgba(232,220,193,.94),
    0 0 24px rgba(232,220,193,.28);

  transition:
    top .18s ease,
    left .18s ease,
    width .18s ease,
    height .18s ease;

  pointer-events: none;
}

.tutorial-card {
  position: fixed;
  z-index: 1502;

  width: min(360px, calc(100vw - 24px));

  padding:
    18px
    18px
    15px;

  color: #19140d;

  background:
    linear-gradient(
      180deg,
      rgba(250,246,237,.995),
      rgba(232,220,193,.995)
    );

  border:
    1px solid
    rgba(117,96,68,.65);

  border-radius: 4px;

  box-shadow:
    0 20px 55px rgba(0,0,0,.44),
    inset 0 0 24px rgba(109,28,23,.035);

  pointer-events: auto;
}

.tutorial-card::before {
  content: "";

  position: absolute;
  inset: 5px;

  border:
    1px solid
    rgba(117,96,68,.20);

  pointer-events: none;
}

.tutorial-step {
  margin:
    0
    0
    5px;

  color: #6d1c17;

  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .17em;
}

.tutorial-card h2 {
  margin:
    0
    0
    8px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.08;
}

.tutorial-copy {
  margin:
    0
    0
    14px;

  color: #675947;

  font-size: .84rem;
  line-height: 1.48;
}

.tutorial-progress {
  height: 2px;

  margin:
    0
    0
    13px;

  overflow: hidden;

  background:
    rgba(117,96,68,.20);
}

.tutorial-progress span {
  display: block;

  width: 0;
  height: 100%;

  background: #6d1c17;

  transition:
    width .2s ease;
}

.tutorial-actions {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  gap: 7px;
}

.tutorial-actions button {
  min-height: 42px;

  padding:
    0
    11px;

  border:
    1px solid
    rgba(117,96,68,.42);

  background: transparent;

  color: #675947;

  font: inherit;
  font-size: .60rem;
  font-weight: 700;
  letter-spacing: .10em;
}

#tutorialSkip {
  justify-self: start;

  border-color: transparent;
}

#tutorialNext {
  min-width: 84px;

  border-color: #531712;

  color: #f4ecd8;

  background: #6d1c17;
}

body.page-nocturne .tutorial-card {
  color: #ded2b9;

  background:
    linear-gradient(
      180deg,
      #292219,
      #1b1711
    );

  border-color: #655642;
}

body.page-nocturne .tutorial-copy {
  color: #9e9078;
}

body.page-nocturne .tutorial-step {
  color: #bd6858;
}

body.page-nocturne #tutorialNext {
  background: #873b31;
  border-color: #a85a4d;
}


/* Narrow phone positioning safety. */

@media (max-width: 430px) {
  .tutorial-card {
    width:
      calc(100vw - 16px);

    padding:
      16px
      15px
      14px;
  }

  .tutorial-card h2 {
    font-size: 1.18rem;
  }

  .tutorial-copy {
    font-size: .80rem;
  }
}


/* =========================================================
   QUICK TOUR REPLAY
   ========================================================= */

.replay-tutorial-button {
  width: 100%;
  min-height: 44px;

  padding: 0 14px;

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

  color: var(--ink);
  background: transparent;

  font: inherit;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;

  cursor: pointer;
}

.replay-tutorial-button:hover,
.replay-tutorial-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}