/* ending.css — end of Part One. Owned by lead. */

.end {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  overflow: auto; padding: 48px 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(27, 16, 53, .96), rgba(4, 3, 8, .99) 68%);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e8e2da;
  opacity: 0;
  transition: opacity 2.4s cubic-bezier(.22, 1, .36, 1);
}
.end.on { opacity: 1; }
.end-inner { width: min(700px, 100%); text-align: center; }

.end-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .42em;
  color: #ff2d6f; margin-bottom: 20px;
  animation: end-up .9s .2s cubic-bezier(.22,1,.36,1) both;
}
.end-title {
  font-size: clamp(26px, 5.4vw, 46px); font-weight: 900;
  letter-spacing: .10em; line-height: 1.15; margin: 0 0 18px;
  animation: end-up 1s .35s cubic-bezier(.22,1,.36,1) both;
}
.end-line {
  font-size: 15px; line-height: 1.75; color: #b8b0c2;
  max-width: 54ch; margin: 0 auto 40px;
  animation: end-up 1s .55s cubic-bezier(.22,1,.36,1) both;
}

.end-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 38px;
}
.end-stat {
  padding: 16px 10px; border-radius: 6px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  animation: end-up .8s cubic-bezier(.22,1,.36,1) both;
}
.end-k { font-size: 9px; font-weight: 800; letter-spacing: .24em; color: #8d8598; }
.end-v {
  font-size: clamp(19px, 3.4vw, 28px); font-weight: 800; margin: 7px 0 4px;
  font-variant-numeric: tabular-nums; color: #fff;
}
.end-n { font-size: 10px; color: #77707f; letter-spacing: .04em; }

.end-log {
  text-align: left; display: grid; gap: 9px;
  margin: 0 auto 34px; max-width: 52ch;
  font-size: 13.5px; line-height: 1.6; color: #a49cb0;
}
.end-log > div {
  padding-left: 15px; border-left: 2px solid rgba(255,45,111,.42);
  animation: end-up .7s cubic-bezier(.22,1,.36,1) both;
}

.end-tarot {
  margin-bottom: 34px; font-size: 12.5px; font-style: italic;
  color: #f0c674; letter-spacing: .03em;
  animation: end-up 1s 1.9s cubic-bezier(.22,1,.36,1) both;
}

.end-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  animation: end-up 1s 2.2s cubic-bezier(.22,1,.36,1) both;
}
.end-btn {
  cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 800; letter-spacing: .3em;
  padding: 13px 30px; color: #06050a; background: #efe9e2;
  border: none; border-radius: 3px;
  transition: all .2s cubic-bezier(.22,1,.36,1);
}
.end-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,45,111,.32); }
.end-btn-arcade {
  color: #140509;
  background: linear-gradient(100deg, #9d102e, #ff2d52 54%, #b80d32);
  box-shadow: 0 0 24px rgba(255,45,82,.24);
}

.end-foot {
  margin-top: 42px; font-size: 10.5px; line-height: 1.9; color: #6d6579;
  letter-spacing: .05em;
  animation: end-up 1s 2.5s cubic-bezier(.22,1,.36,1) both;
}
.end-foot b { color: #a49cb0; letter-spacing: .18em; }

@keyframes end-up { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 620px) {
  .end-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .end, .end * { animation: none !important; transition: none !important; }
  .end { opacity: 1; }
}

/* --- the ending is a takeover, not an overlay ----------------------------- */
/*
 * .end paints a near-opaque gradient (alpha .96-.99), which is not the same as
 * opaque: the dialogue layer beneath it — including the live PAPER/ILLUSTRIOUS/
 * DISCIPLINE/HEART HUD — bled through as a faint second copy of the stats. On a
 * phone that read as the screen being drawn twice. Retire the layer outright.
 */
body.mi-ended .mi { display: none !important; }

/* Belt and braces: give the ending a solid base colour under its gradient so
 * nothing behind it can ever show through again. */
.end { background-color: #040308; }

/* --- the handoff to the novel --------------------------------------------- */
/*
 * The game covers Chapters 1-4; the book is the rest. This block is the point of the
 * adaptation, so it gets real estate above the buttons rather than a line in the footer —
 * but it stays in the house language so it reads as part of the piece, not an ad.
 */
.end-promo { margin: 30px 0 4px; }
.end-promo .end-rule { margin-bottom: 26px; }

.end-promo-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  padding: 18px 20px;
  border: 1px solid rgba(201, 162, 39, .22);
  background: rgba(201, 162, 39, .035);
  transition: border-color .5s ease, background .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
a.end-promo-inner:hover {
  border-color: rgba(201, 162, 39, .55);
  background: rgba(201, 162, 39, .08);
  transform: translateY(-2px);
}

.end-cover {
  width: 104px;
  flex: 0 0 auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(201, 162, 39, .3);
}

.end-promo-copy { min-width: 0; }
.end-promo-k {
  font-size: 9px; font-weight: 700; letter-spacing: .34em;
  color: #c9a227; margin-bottom: 9px;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.end-promo-h {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.4; color: #efe6d2;
}
.end-promo-h b {
  font-weight: 500; font-style: italic;
  background: var(--foil);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.end-promo-n {
  margin-top: 8px;
  font-size: 11px; font-style: italic; color: #8d8474;
  font-family: var(--serif, Georgia, serif);
}

/* On a phone the cover and copy stack rather than squeezing to nothing. */
@media (max-width: 520px) {
  .end-promo-inner { flex-direction: column; text-align: center; gap: 16px; }
  .end-cover { width: 128px; }
}