.changa-one-regular {
  font-family: "Changa One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.nabla-ploop {
  font-family: "Nabla", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "EDPT" 100,
    "EHLT" 12;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0d1117;
  font-family: "Segoe UI", sans-serif;
}
canvas {
  display: block;
}
#hud {
  position: fixed;
  top: 56px; /* below the share button */
  right: 12px;
  color: #8b949e;
  font-size: 13px;
  line-height: 1.7;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
  z-index: 6;
  text-align: right;
}
#hud b {
  color: #e6edf3;
  letter-spacing: 2px;
}
#hud .stats {
  font-family: "Nabla", "Segoe UI", sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
}
#hud .live {
  margin-left: 24px; /* space between records and the current run */
}
#falls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.fallword {
  position: absolute;
  top: 0;
  left: 0;
}
.fallword span {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-63.5deg); /* readable lean */
  font-family: "Nabla", "Segoe UI", sans-serif;
  line-height: 1;
}
.fallword.rev span {
  transform: rotate(63.5deg); /* mirrored lean */
}
.fallword.frozen span {
  opacity: 0.4; /* faded success ghosts */
}
.fallword.hurt span {
  filter: drop-shadow(0 0 7px rgba(248, 81, 73, 0.95)); /* red danger glow */
}
#stage {
  position: fixed;
  width: 1280px;
  height: 960px;
  transform-origin: top left;
  z-index: 1;
}
#guy {
  position: absolute;
  left: 0;
  top: 0;
  height: 6dvh;
  width: auto;
  pointer-events: none;
  z-index: 5;
}
#guy * {
  stroke: #e6edf3;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
}
#guy .head {
  fill: #e6edf3;
  stroke: none;
}
#guy .limb {
  transform-box: view-box;
}
#guy.walk .legL {
  animation: sw 0.36s ease-in-out infinite alternate;
  transform-origin: 20px 50px;
}
#guy.walk .legR {
  animation: sw 0.36s ease-in-out infinite alternate-reverse;
  transform-origin: 20px 50px;
}
#guy.walk .armL {
  animation: swA 0.36s ease-in-out infinite alternate-reverse;
  transform-origin: 20px 24px;
}
#guy.walk .armR {
  animation: swA 0.36s ease-in-out infinite alternate;
  transform-origin: 20px 24px;
}
@keyframes sw {
  from {
    transform: rotate(30deg);
  }
  to {
    transform: rotate(-30deg);
  }
}
@keyframes swA {
  from {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-20deg);
  }
}
#title {
  position: fixed;
  top: 8px;
  left: 14px;
  z-index: 6;
  pointer-events: auto;
  cursor: pointer;
  text-shadow: 0 2px 8px #000;
}
#title .game-title {
  font-size: 21px; /* 2/3 of the original brand size */
  letter-spacing: 3px;
  color: #e6edf3;
  line-height: 1;
}
#title .game-title em {
  font-style: normal;
  color: #3fb950;
}
#lvlInd {
  position: fixed;
  top: 36px;
  left: 14px;
  z-index: 6;
  display: none;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
#win,
#dead {
  font-family: "Changa One", "Segoe UI", sans-serif;
  letter-spacing: 2px;
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #e6edf3;
  font-size: 34px;
  z-index: 9;
}
#win {
  background: rgba(1, 4, 9, 0.75);
}
#dead {
  background: linear-gradient(rgba(45, 5, 9, 0.92), rgba(18, 2, 4, 0.96));
}
#dead .wordlist .run {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
#win small,
#dead small {
  font-size: 15px;
  color: #8b949e;
  margin-top: 10px;
}
#win .footnote {
  margin-top: 22px;
  font-size: 12.5px;
  color: #6e7681;
}
#helpModal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(1, 4, 9, 0.55);
  opacity: 1;
  transition: opacity 0.35s ease;
}
#helpModal.hidden {
  opacity: 0;
  pointer-events: none;
}
#helpModal .tray {
  background: #161b22;
  border: 1px solid #30363d;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  width: min(92vw, 560px);
  max-height: 78vh;
  overflow-y: auto;
  padding: 18px 22px 22px;
  color: #8b949e;
  font-size: 14px;
  line-height: 1.75;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  animation: tray-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#helpModal.hidden .tray {
  transform: translateY(105%);
}
@keyframes tray-in {
  from {
    transform: translateY(105%);
  }
  to {
    transform: translateY(0);
  }
}
#helpModal h3 {
  margin: 0 0 10px;
  color: #e6edf3;
  font-size: 22px;
  letter-spacing: 2px;
}
#helpModal p {
  margin: 0 0 12px;
}
#helpModal .keys {
  color: #6e7681;
  font-size: 12.5px;
}
#helpModal .mobile-note {
  color: #d29922;
  font-size: 12.5px;
}
#cardClose,
#cardShareBtn {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  margin-left: 8px;
}
/* all share affordances share one look: dark pill, blue hover
   (same family as the top-right #shareBtn) */
.rowshare {
  margin-left: 8px;
}
#helpClose,
#cardClose {
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
}
#helpClose:hover,
#cardClose:hover {
  background: #2ea043;
}
#retryBtn {
  background: #da3633;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 18px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 14px;
}
#retryBtn:hover {
  background: #f85149;
}
#win .wordlist,
#dead .wordlist {
  max-height: 42vh;
  overflow-y: auto;
}
#win .stats,
#dead .stats {
  font-family: "Nabla", "Segoe UI", sans-serif;
  font-size: 15px;
  margin-top: 12px;
}
#scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(1, 4, 9, 0.85), rgba(1, 4, 9, 0));
  pointer-events: none;
  z-index: 4;
}
#runCard {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 4, 9, 0.82); /* near-page backdrop */
  opacity: 1;
  transition: opacity 0.3s ease;
}
#runCard.hidden {
  opacity: 0;
  pointer-events: none;
}
#runCard .card {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  width: min(96vw, 880px);
  height: 88vh; /* a fuller page, not a popup */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 32px;
  color: #8b949e;
  text-align: center;
  animation: card-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes card-in {
  from {
    transform: translateY(24px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
#runCard h3 {
  margin: 0 0 10px;
  color: #e6edf3;
  font-size: 22px;
  letter-spacing: 2px;
}
#runCard .wordlist {
  flex: 1;
  margin-top: 18px;
  max-width: 100%;
  overflow-y: auto; /* the stanzas scroll; the page itself holds still */
}
.cardFoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #21262d;
}
.cardFoot .lvlPager,
.cardFoot .pager {
  margin-top: 0;
}
.lvlPager {
  margin-top: 14px;
}
.lvlPager button {
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 4px 14px;
  margin: 0 4px;
  cursor: pointer;
  font-size: 12.5px;
}
.lvlPager button:hover:not(:disabled) {
  color: #e6edf3;
  border-color: #58a6ff;
}
.lvlPager button:disabled {
  opacity: 0.3;
  cursor: default;
}
#lvlLabel {
  font-family: "Nabla", "Segoe UI", sans-serif;
  font-size: 13px;
  color: #e6edf3;
}
.pager {
  margin-top: 10px;
}
.pager button {
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 4px 16px;
  margin: 0 4px;
  cursor: pointer;
  font-size: 13px;
}
.pager button:hover {
  color: #e6edf3;
  border-color: #58a6ff;
}
#helpBtn {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #161b22;
  color: #8b949e;
  border: 1px solid #30363d;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition:
    opacity 0.3s ease 0.15s,
    transform 0.3s ease 0.15s,
    color 0.2s,
    border-color 0.2s;
}
#helpBtn.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
#helpBtn:hover {
  color: #58a6ff;
  border-color: #58a6ff;
}
/* share buttons: same family as the other action buttons (filled,
   rounded), sized per context */
.sharepill {
  background: transparent;
  color: #8b949e;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
}
.sharepill:hover {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.08);
}
.sharepill.sm {
  padding: 2px 8px;
  font-size: 11px;
}
#shareBtn {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 10;
}
#pauseEl {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #e6edf3;
  font-size: 34px;
  letter-spacing: 3px;
  background: rgba(1, 4, 9, 0.6);
  z-index: 9;
  font-family: "Changa One", sans-serif;
}
#resumeBtn {
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 18px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 16px;
}
#resumeBtn:hover {
  background: #2ea043;
}
#pauseEl small {
  font-size: 14px;
  color: #8b949e;
  margin-top: 10px;
  font-family: "Segoe UI", sans-serif;
  letter-spacing: 0;
}
#carryBtn {
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 18px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 14px;
}
#carryBtn:hover {
  background: #2ea043;
}
#runsBtn {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
#runsBtn:hover {
  color: #e6edf3;
}
.runrow {
  font-family: "Segoe UI", sans-serif;
  font-style: normal;
  font-size: 13px;
  color: #8b949e;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  cursor: pointer;
  break-inside: avoid;
}
.runrow:hover {
  background: #21262d;
  color: #e6edf3;
}
#homeMenu {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 4, 9, 0.9);
  opacity: 1;
  transition: opacity 0.35s ease;
}
#homeMenu.hidden {
  opacity: 0;
  pointer-events: none;
}
.home {
  text-align: center;
}
.home h2 {
  font-size: 46px;
  letter-spacing: 4px;
  color: #e6edf3;
  margin: 0 0 32px;
}
.home h2 .em {
  color: #3fb950;
}
.homebtn {
  display: block;
  width: 280px;
  margin: 12px auto;
  background: #161b22;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 14px 0;
  font-size: 20px;
  letter-spacing: 3px;
  cursor: pointer;
}
.homebtn:hover:not(:disabled) {
  border-color: #58a6ff;
  color: #58a6ff;
}
.homebtn:disabled {
  opacity: 0.3;
  cursor: default;
}
.home small {
  color: #6e7681;
  font-size: 12.5px;
}
/* READ: the memento library — logo + full window */
#readView {
  position: fixed;
  inset: 0;
  z-index: 12;
  background: #010409;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
#readView.hidden {
  opacity: 0;
  pointer-events: none;
}
.rv-head {
  margin-bottom: 20px;
}
.rv-head .game-title {
  font-size: 28px;
  letter-spacing: 3px;
  color: #e6edf3;
}
.rv-head .game-title em {
  font-style: normal;
  color: #3fb950;
}
.rv-list {
  flex: 1;
  overflow-y: auto;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}
.rv-list .runrow {
  font-size: 15px;
  padding: 11px 14px;
}
.rv-hint {
  text-align: center;
  color: #6e7681;
  font-size: 12px;
  margin-top: 14px;
}
#runCard {
  z-index: 14; /* memento cards read above the library */
}
.kbd {
  display: inline-block;
  background: #238636;
  color: #fff;
  border-radius: 5px;
  padding: 1px 9px;
  font-size: 13px;
  font-family: "Segoe UI", sans-serif;
  letter-spacing: 1px;
  vertical-align: 2px;
  margin-left: 6px;
}
/* the TRY WRITE crawl: lines slide/fade in, linger, overlay fades out */
#crawl {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #010409;
  opacity: 1;
  transition: opacity 0.9s ease;
}
#crawl.hidden {
  opacity: 0;
  pointer-events: none;
}
.crawllines p {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 21px;
  color: #8b949e;
  text-align: center;
  margin: 14px 0;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.crawllines p.on {
  opacity: 1;
  transform: translateY(0);
}
/* the game fades in after the crawl */
#stage {
  opacity: 0;
  transition: opacity 1.4s ease;
}
#stage.on {
  opacity: 1;
}
.wordlist {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  margin-top: 14px;
  max-width: 82vw;
  text-align: center;
  line-height: 1.9;
  columns: 3 180px; /* the poem flows into stanzas columns */
  column-gap: 2.4em;
}
.wordlist .run {
  break-inside: avoid;
  margin-bottom: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  opacity: 0.88; /* a touch dimmer against the page */
  background: rgba(230, 237, 243, 0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease,
    background 0.25s ease;
}
.wordlist .run:hover {
  opacity: 1;
  transform: translateY(-1px) scale(1.02);
  background: rgba(230, 237, 243, 0.06);
  box-shadow:
    0 0 14px rgba(88, 166, 255, 0.18),
    0 2px 10px rgba(0, 0, 0, 0.4);
}
.wordlist .ground {
  font-size: 12.5px; /* fallen words: small hushed echo */
  color: #d29922;
  opacity: 0.33;
}
.wordlist .slain {
  color: #f85149;
  font-weight: 700; /* the word that killed you */
}
.wordlist:empty {
  display: none;
}
.wordlist .ok {
  color: #3fb950;
}
.wordlist .catch {
  color: #d8b33c; /* the falling word that was met */
}
.wordlist .empty {
  color: #6e7681;
  font-size: 14px;
}
.wordlist .bad {
  color: #f85149;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}