@font-face {
  font-family: "ITC Souvenir";
  src: url("fonts/Souvenir.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "ITC Souvenir";
  src: url("fonts/SouvenirI.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "ITC Souvenir";
  src: url("fonts/SouvenirB.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #111111;
  --border: #111111;
  --muted: #555555;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121212;
    --text: #e8e4df;
    --border: #e8e4df;
    --muted: #9a958f;
  }
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "ITC Souvenir", Georgia, "Times New Roman", serif;
  line-height: 1.6;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

@media (max-width: 48rem) {
  html {
    font-size: 1.125rem;
  }
}

main {
  max-width: 36rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* Page transitions — matches shalim.uk/quran; off when reduced motion preferred */
@media (prefers-reduced-motion: no-preference) {
  @keyframes nav-slide-from-right { from { transform: translateX(100%); } }
  @keyframes nav-slide-to-left    { to   { transform: translateX(-25%); } }
  @keyframes nav-slide-from-left  { from { transform: translateX(-25%); } }
  @keyframes nav-slide-to-right   { to   { transform: translateX(100%); } }

  html[data-nav-dir="forward"]::view-transition-old(root) { animation: nav-slide-to-left    0.3s ease; }
  html[data-nav-dir="forward"]::view-transition-new(root) { animation: nav-slide-from-right 0.3s ease; }
  html[data-nav-dir="back"]::view-transition-old(root)    { animation: nav-slide-to-right   0.3s ease; }
  html[data-nav-dir="back"]::view-transition-new(root)    { animation: nav-slide-from-left  0.3s ease; }
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
  font-weight: normal;
}

.illustration {
  margin: 0 0 2rem;
}

.illustration img {
  display: block;
  width: 100%;
  height: auto;
}

p {
  margin: 0 0 1rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin: 0;
  min-width: 0;
}

.continue-button {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.3;
  text-decoration: none;
  background: var(--bg);
  cursor: pointer;
}

.continue-button:hover {
  background: var(--text);
  color: var(--bg);
}

.choices {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  padding-left: 1.5rem;
  border-top: 1px solid var(--border);
  font-style: italic;
  text-align: right;
}

.choices a {
  display: block;
  margin-bottom: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.choices a:last-child {
  margin-bottom: 0;
}

.ending-label {
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  font-style: normal;
  font-weight: bold;
  text-align: center;
}

.restart {
  margin-top: 1.5rem;
  text-align: right;
  font-style: italic;
}

.restart a {
  color: inherit;
}

.ending-good .ending-label { color: var(--text); }
.ending-bad .ending-label { color: var(--muted); }

/* Cute minimal inline text effects — off when reduced motion preferred */
.fx {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .fx-fall {
    animation: fx-fall 0.85s ease-in forwards;
  }

  .fx-creak {
    animation: fx-creak 0.55s ease-in-out;
  }

  .fx-flap {
    animation: fx-flap 2.4s ease-in-out infinite;
    transform-origin: top center;
  }

  .fx-drip {
    animation: fx-drip 1.6s ease-in-out infinite;
  }

  .fx-swing {
    animation: fx-swing 2.2s ease-in-out infinite;
    transform-origin: top center;
  }

  .fx-bounce {
    animation: fx-bounce 0.7s ease-out;
  }

  .fx-flicker {
    animation: fx-flicker 2.8s ease-in-out infinite;
  }

  .fx-rattle {
    animation: fx-rattle 0.45s ease-in-out 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx {
    animation: none;
  }
}

@keyframes fx-fall {
  0% { transform: translateY(0) rotate(0deg); }
  70% { transform: translateY(0.45em) rotate(-6deg); }
  100% { transform: translateY(0.5em) rotate(-8deg); }
}

@keyframes fx-creak {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

@keyframes fx-flap {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes fx-drip {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(0.12em); opacity: 0.85; }
}

@keyframes fx-swing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes fx-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-0.2em); }
  70% { transform: translateY(0.05em); }
}

@keyframes fx-flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.55; }
  55% { opacity: 0.9; }
  62% { opacity: 0.5; }
}

@keyframes fx-rattle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(1px); }
}