/* Title screen, era ceremony chest, juice effects and the achievement toast. */

.title-screen { cursor: pointer; background: #0b0c14; }
.title-screen.is-leaving { opacity: 0; transition: opacity .2s steps(3); }

/* ---------- reward chest ---------- */
.chest-overlay { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 16px;
  background: rgba(11, 12, 20, .9); opacity: 0; transition: opacity .2s steps(3); }
.chest-overlay.is-on { opacity: 1; }
.chest { display: grid; justify-items: center; gap: 10px; width: min(320px, 100%); }
.chest__title { color: var(--gold); text-shadow: var(--px) var(--px) 0 var(--gold-0); letter-spacing: 1px; text-align: center; }
.chest__stage { position: relative; width: 192px; height: 176px; display: grid; place-items: center; }
.chest__canvas { position: relative; z-index: 1; width: 192px; height: 176px; image-rendering: pixelated; cursor: pointer; }
.chest__rays { position: absolute; inset: -40px; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 242, 162, .22) 0 10deg, transparent 10deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.chest-overlay.is-open .chest__rays { opacity: 1; animation: rays 8s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.chest__hint { min-height: 14px; font-family: var(--font-small); font-size: var(--fs-small); color: var(--muted); animation: blink 1s steps(1) infinite; }
.chest__list { display: grid; gap: 6px; width: 100%; }
.chest__row { --pn-edge: var(--n3); display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--n9); animation: rowIn .25s steps(3); }
@keyframes rowIn { from { opacity: 0; translate: 0 6px; } }
.chest__btn { min-width: 160px; }

/* ---------- juice ---------- */
.juice-coin, .juice-fly { position: fixed; z-index: 450; pointer-events: none; image-rendering: pixelated; }
/* floating numbers and flying coins never paint over a dialog: while one is open they sit below the modal root (z 100) */
html.modal-open #fx-layer, html.modal-open .juice-coin, html.modal-open .juice-fly { z-index: 90; }
.float-text { pointer-events: none; z-index: 5; }
.juice-afford { animation: afford .9s steps(2) 2; }
@keyframes afford { 50% { box-shadow: 0 0 0 var(--px) var(--gold), 0 0 0 calc(2 * var(--px)) var(--gold-0); } }
.juice-buyflash { animation: buyflash .25s steps(2); }
@keyframes buyflash { 0% { filter: brightness(1.8); } 100% { filter: none; } }
.juice-flow { position: absolute; z-index: 4; right: 8px; top: 8px; padding: 4px 8px; color: var(--umber); background: var(--gold);
  box-shadow: 0 0 0 var(--px) var(--gold-0); animation: flowIn .3s steps(3), blink 1s steps(1) 5 .3s; }
.juice-flow.is-out { opacity: 0; transition: opacity .3s steps(3); }
@keyframes flowIn { from { transform: scale(1.6); opacity: 0; } }
.juice-stamp { position: absolute; z-index: 4; left: 50%; top: 40%; translate: -50% -50%; rotate: -8deg; padding: 4px 10px;
  color: var(--hot); font-size: var(--fs-big); line-height: 1; box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--hot);
  background: rgba(11, 12, 20, .6); animation: stamp .35s steps(3); pointer-events: none; }
@keyframes stamp { from { transform: scale(2.2); opacity: 0; } }
.juice-banner { position: absolute; z-index: 4; left: 0; right: 0; top: 38%; display: flex; justify-content: center; gap: 10px; padding: 8px;
  background: rgba(11, 12, 20, .85); box-shadow: inset 0 var(--px) 0 0 var(--gold), inset 0 calc(-1 * var(--px)) 0 0 var(--gold);
  animation: bannerIn .3s steps(3); pointer-events: none; }
.juice-banner.is-out { opacity: 0; transition: opacity .3s steps(3); }
.juice-banner__kind { color: var(--gold); }
.juice-banner__name { color: var(--n9); }
@keyframes bannerIn { from { transform: scaleX(.2); opacity: 0; } }

/* ---------- achievement toast ---------- */
#ach-root { position: fixed; z-index: 310; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 8px); width: min(380px, calc(100vw - 16px));
  display: grid; gap: 6px; pointer-events: none; }
.ach { display: flex; align-items: center; gap: 10px; padding: 8px 10px; pointer-events: auto;
  background: linear-gradient(90deg, #2a2120, #151827 70%);
  box-shadow: inset 0 calc(2 * var(--px)) 0 0 var(--gold-0), 0 calc(-1 * var(--px)) 0 0 var(--gold), 0 var(--px) 0 0 var(--gold), calc(-1 * var(--px)) 0 0 0 var(--gold), var(--px) 0 0 0 var(--gold),
    0 calc(-2 * var(--px)) 0 0 var(--gold-0), 0 calc(2 * var(--px)) 0 0 var(--gold-0), calc(-2 * var(--px)) 0 0 0 var(--gold-0), calc(2 * var(--px)) 0 0 0 var(--gold-0), 0 calc(4 * var(--px)) 0 0 rgba(0, 0, 0, .5);
  translate: 0 -120%; opacity: 0; transition: translate .25s steps(4), opacity .25s steps(4); }
.ach.is-on { translate: 0 0; opacity: 1; }
.ach.is-leaving { translate: 0 -120%; opacity: 0; }
.ach__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--ink); box-shadow: inset 0 0 0 var(--px) var(--gold-1); }
.ach__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ach__kind { font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--gold); letter-spacing: 1px; }
.ach__name { color: var(--n9); line-height: calc(18px * var(--text-scale, 1)); }
.ach__desc { color: var(--muted); line-height: var(--lh-prose); }
.ach__wafers { flex: none; display: flex; align-items: center; gap: 4px; color: var(--lav); }
.ach--secret { background: linear-gradient(90deg, #4a2a8a, #170f3f 70%);
  box-shadow: inset 0 calc(2 * var(--px)) 0 0 var(--violet), 0 calc(-1 * var(--px)) 0 0 var(--lav), 0 var(--px) 0 0 var(--lav), calc(-1 * var(--px)) 0 0 0 var(--lav), var(--px) 0 0 0 var(--lav),
    0 calc(-2 * var(--px)) 0 0 var(--violet-1), 0 calc(2 * var(--px)) 0 0 var(--violet-1), calc(-2 * var(--px)) 0 0 0 var(--violet-1), calc(2 * var(--px)) 0 0 0 var(--violet-1), 0 calc(4 * var(--px)) 0 0 rgba(0, 0, 0, .5); }
.ach--secret .ach__kind { color: var(--lav); }
.ach--secret .ach__icon { box-shadow: inset 0 0 0 var(--px) var(--violet); animation: blink 1.2s steps(1) 3; }

/* ---------- ending cards (src/ui/ceremony/ending.js) ---------- */
html.ending-share #modal-root { z-index: 545; }                    /* the share sheet opens over the card overlay */
.endcards { position: fixed; inset: 0; z-index: 530; overflow: hidden; background: #05060c; color: var(--n9); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; cursor: pointer; opacity: 0; transition: opacity .6s ease; outline: none; --accent: #f5cc3a; }
.endcards.is-on { opacity: 1; }
.endcards.is-leaving { opacity: 0; transition: opacity .3s ease; }
.endcards::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(5, 6, 12, .78) 100%); }
.endcards__bdl { position: absolute; inset: 0; }
.endcards__bd { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover; opacity: 0;
  filter: blur(16px) saturate(1.4) brightness(.55); transition: opacity 1s ease; }
.endcards__bd.is-on { opacity: 1; }
.endcards__track { position: absolute; inset: 0; display: flex; z-index: 1; transition: transform .62s cubic-bezier(.2, .85, .2, 1); will-change: transform; }
.endcards.is-dragging .endcards__track { transition: none; }
.endcards__dots { position: absolute; z-index: 3; left: 50%; top: calc(var(--safe-t) + 16px); translate: -50% 0; display: flex; gap: 5px; pointer-events: none; }
.endcards__dots i { display: block; width: 14px; height: 4px; background: rgba(243, 245, 251, .2); transition: background .3s, width .3s; }
.endcards__dots i.is-seen { background: var(--gold-1); }
.endcards__dots i.is-on { width: 28px; background: var(--n9); }
.endcards__dots i.is-end.is-on { background: var(--gold); }
.endcards__x { position: absolute; z-index: 4; top: calc(var(--safe-t) + 8px); right: calc(var(--safe-r) + 10px); opacity: .75; }
.endcards__x[hidden] { display: none; }

.endcard { flex: 0 0 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(var(--safe-t) + 40px) 16px calc(var(--safe-b) + 14px); }
.endcard__frame { position: relative; flex: none; width: var(--fw); height: var(--fh); opacity: .4; transform: scale(.95);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .85, .2, 1);
  box-shadow: 0 0 0 2px #05060c, 0 0 0 4px #5f6b8b, 0 14px 50px rgba(0, 0, 0, .7);
  box-shadow: 0 0 0 2px #05060c, 0 0 0 4px color-mix(in srgb, var(--accent) 60%, #05060c), 0 0 60px color-mix(in srgb, var(--accent) 35%, transparent), 0 14px 50px rgba(0, 0, 0, .7); }
.endcard__art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.endcard.is-active .endcard__frame { opacity: 1; transform: none; }
.endcard__cap { position: relative; flex: none; width: var(--fw); min-height: 92px; height: var(--caph, auto); box-sizing: border-box; display: grid; gap: 8px; align-content: start;
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease .2s, transform .55s ease .2s; }
.endcard.is-active .endcard__cap { opacity: 1; transform: none; }
.endcard__rule { width: 36px; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.endcard__txt { font-family: var(--font-prose); font-size: var(--capfs, 16px); line-height: 1.4; color: var(--n9); text-shadow: 2px 2px 0 #05060c; text-wrap: pretty; }
.endcard__txt .off { color: transparent; text-shadow: none; }
.endcard__n { font-family: var(--font-small); font-size: var(--fs-small); color: var(--n6); letter-spacing: 1px; }
.endcard__hint { position: absolute; right: 0; bottom: 0; font-family: var(--font-small); font-size: var(--fs-small); color: var(--gold); letter-spacing: 1px; opacity: 0; }
.endcard__cap.is-done .endcard__hint { opacity: 1; animation: blink 1.2s steps(1) infinite; }
.endcards.is-side .endcard { flex-direction: row; gap: 28px; padding: 16px calc(var(--safe-r) + 20px) 16px calc(var(--safe-l) + 20px); }
.endcards.is-side .endcard__cap { width: min(340px, 38vw); height: auto; }

/* THE END */
.endcard--end { overflow-y: auto; }
.end__inner { width: min(360px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center; margin: auto; }
.end__icon { filter: drop-shadow(0 0 14px rgba(245, 204, 58, .55)); animation: endFloat 3.2s ease-in-out infinite; }
@keyframes endFloat { 50% { transform: translateY(-4px); } }
.end__kicker { font-family: var(--font-small); font-size: var(--fs-small); color: var(--n6); letter-spacing: 2px; }
.end__title { font-size: var(--fs-huge); line-height: 1; color: var(--gold); letter-spacing: 3px; text-shadow: 3px 3px 0 var(--gold-0), 0 0 22px rgba(245, 204, 58, .35); }
.end__name { font-size: var(--fs-big); line-height: 1.2; color: var(--n9); text-wrap: balance; text-shadow: 2px 2px 0 #05060c; }
.end__line { font-family: var(--font-small); font-size: 14px; line-height: 1.4; color: var(--n7); text-wrap: balance; max-width: 300px; }
.end__stats { display: grid; width: 100%; gap: 3px; margin-top: 6px; padding: 8px 12px; background: rgba(5, 6, 12, .6); box-shadow: inset 0 0 0 2px rgba(243, 245, 251, .14); }
.end__stat { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-small); font-size: var(--fs-small); color: var(--n7); text-transform: uppercase; }
.end__stat b { font-weight: normal; color: var(--gold); }
.end__btns { display: grid; gap: 8px; width: 100%; margin-top: 8px; }
.end__inner > * { opacity: 0; transform: translateY(10px); }
.endcard--end.is-active .end__inner > * { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .85, .2, 1); }
.endcard--end.is-active .end__inner > :nth-child(1) { transition-delay: .25s; } .endcard--end.is-active .end__inner > :nth-child(2) { transition-delay: .35s; }
.endcard--end.is-active .end__inner > :nth-child(3) { transition-delay: .5s; } .endcard--end.is-active .end__inner > :nth-child(4) { transition-delay: .65s; }
.endcard--end.is-active .end__inner > :nth-child(5) { transition-delay: .8s; } .endcard--end.is-active .end__inner > :nth-child(6) { transition-delay: .95s; }
.endcard--end.is-active .end__inner > :nth-child(7) { transition-delay: 1.1s; }
.reduced-motion .endcards *, .reduced-motion .endcards *::before { transition: none !important; }

/* ---------- Fork the Timeline (src/ui/ceremony/fork.js) ---------- */
.fork { position: fixed; inset: 0; z-index: 530; overflow-y: auto; display: grid; padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  background: radial-gradient(ellipse at 50% 12%, #1c2a6b 0%, #0f1436 38%, #0b0c14 80%); opacity: 0; transition: opacity .3s ease; }
.fork.is-on { opacity: 1; }
.fork__box { width: min(400px, 100%); display: grid; gap: 10px; margin: auto; }
.fork__glyph { width: 192px; height: 80px; justify-self: center; image-rendering: pixelated; }
.fork__kicker { text-align: center; font-family: var(--font-small); font-size: var(--fs-small); color: var(--n6); letter-spacing: 1px; text-transform: uppercase; }
.fork__title { text-align: center; font-size: var(--fs-big); line-height: 1.1; color: var(--gold); text-shadow: 3px 3px 0 var(--gold-0), 0 0 20px rgba(245, 204, 58, .3); }
.fork__sub { text-align: center; font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; color: var(--n7); text-transform: uppercase; text-wrap: balance; }
.fork__pay { display: grid; gap: 4px; justify-items: center; padding: 10px; background: rgba(5, 6, 12, .6); box-shadow: inset 0 0 0 2px var(--n3); }
.fork__paylabel { text-align: center; font-family: var(--font-small); font-size: var(--fs-small); color: var(--n6); letter-spacing: 1px; }
.fork__paynum { font-size: var(--fs-huge); line-height: 1; color: var(--ice); text-shadow: 3px 3px 0 var(--teal-0), 0 0 20px rgba(45, 230, 232, .3); font-variant-numeric: tabular-nums; }
.fork__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fork__chips:empty { display: none; }
.fork__tag { padding: 2px 6px 3px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--n9); background: var(--n3); }
.fork__tag--gold { background: var(--gold-1); color: var(--n9); }
.fork__bank { font-family: var(--font-small); font-size: var(--fs-small); color: var(--n6); white-space: pre; font-variant-numeric: tabular-nums; }
.fork__note { min-height: 0; text-align: center; font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; color: var(--n6); text-transform: uppercase; }
.fork__note:empty { display: none; }
.fork__btns { display: grid; gap: 8px; margin-top: 4px; }
.fork__fine { text-align: center; font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; color: var(--n5); text-transform: uppercase; text-wrap: balance; }

/* ---------- shared credits roll (src/ui/ceremony/credits.js) ---------------- */
.credits-roll { position: fixed; inset: 0; z-index: 535; overflow: hidden; background: #05060c; color: var(--n9);
  opacity: 0; transition: opacity .32s ease; overscroll-behavior: none; }
.credits-roll.is-on { opacity: 1; }
.credits-roll.is-leaving { opacity: 0; transition-duration: .26s; }
.credits-roll::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 10%, rgba(28, 42, 107, .62), transparent 56%); }
.credits-roll::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 6, 12, .34), transparent 22%, transparent 78%, rgba(5, 6, 12, .34)); }
.credits-roll__viewport { position: absolute; inset: 0 0 calc(var(--safe-b) + 48px); z-index: 1; box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
  padding: calc(var(--safe-t) + 56px) max(16px, var(--safe-r)) calc(var(--safe-b) + 32px) max(16px, var(--safe-l));
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--n4) transparent; }
.credits-roll__content { box-sizing: border-box; width: min(100%, 680px); min-height: 100%; margin: 0 auto; display: grid; align-content: start;
  gap: 32px; padding: 16px 0 64px; }
.credits-roll__intro { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 16px 0 8px; }
.credits-roll__mark { font-size: var(--fs-big); line-height: 24px; color: var(--cyan); letter-spacing: 4px; text-shadow: 2px 2px 0 var(--teal-0); }
.credits-roll__title { margin: 0; font-size: var(--fs-huge); line-height: 32px; color: var(--gold);
  letter-spacing: 3px; text-shadow: 3px 3px 0 var(--gold-0), 0 0 22px rgba(245, 204, 58, .35); }
.credits-roll__subtitle { max-width: 100%; min-width: 0; font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px;
  color: var(--n6); letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
.credits-roll__section { min-width: 0; display: grid; gap: 12px; padding: 16px; background: rgba(11, 12, 20, .78);
  box-shadow: inset 0 0 0 2px rgba(243, 245, 251, .1); }
.credits-roll__section.credits-roll__recap { text-align: center; background: transparent; box-shadow: none; padding-inline: 0; }
.credits-roll__label { min-width: 0; font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; color: var(--gold);
  letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
.credits-roll__copy { min-width: 0; margin: 0; font-size: var(--fs); line-height: 24px; color: var(--n7); overflow-wrap: anywhere; }
.credits-roll__list, .credits-roll__cast { min-width: 0; display: grid; gap: 12px; }
.credits-roll__item { min-width: 0; display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--n3); }
.credits-roll__item:last-child, .credits-roll__cast-line:last-child { border-bottom: 0; }
.credits-roll__item-label, .credits-roll__ending-count, .credits-roll__current, .credits-roll__cast-who {
  min-width: 0; font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; color: var(--n6);
  letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
.credits-roll__item-value { min-width: 0; font-size: var(--fs); line-height: 24px; color: var(--n9); overflow-wrap: anywhere; }
.credits-roll__ending { min-width: 0; display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--n3); }
.credits-roll__ending:last-child { border-bottom: 0; }
.credits-roll__ending-name { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-big); line-height: 24px;
  color: var(--n9); overflow-wrap: anywhere; }
.credits-roll__ending-name .credits-roll__current { color: var(--gold); }
.credits-roll__ending-line { min-width: 0; margin: 0; font-size: var(--fs); line-height: 24px; color: var(--n7); overflow-wrap: anywhere; }
.credits-roll__cast-line { min-width: 0; display: grid; gap: 4px; padding: 8px 0 12px; border-bottom: 1px solid var(--n3); }
.credits-roll__cast-line p { min-width: 0; margin: 0; font-size: var(--fs); line-height: 24px; color: var(--n9); overflow-wrap: anywhere; }
.credits-roll__team-line { min-width: 0; margin: 0; font-size: var(--fs-big); line-height: 32px; color: var(--phos);
  text-align: center; overflow-wrap: anywhere; }
.credits-roll__final { min-width: 0; display: grid; justify-items: center; gap: 12px; padding: 16px 0 0; text-align: center; }
.credits-roll__stage { position: relative; width: 100%; min-height: clamp(96px, 16vh, 160px); overflow: hidden;
  background: linear-gradient(180deg, transparent 0 72%, rgba(49, 57, 82, .45) 72% 74%, transparent 74%); }
.credits-roll__walker { position: absolute; left: 0; bottom: 22%; width: 52px; height: 40px; transform: translateX(-120%);
  will-change: transform; }
.credits-roll__walker.is-walking { animation: creditsWalk 6s linear both; }
.credits-roll__adam { display: block; width: 52px; height: 40px; image-rendering: pixelated; }
@keyframes creditsWalk { from { transform: translateX(-120%); } to { transform: translateX(var(--credits-walk-distance, calc(100vw + 120%))); } }
.credits-roll__skip { position: absolute; z-index: 3; top: calc(var(--safe-t) + 10px); right: max(10px, var(--safe-r)); max-width: calc(100vw - 20px);
  opacity: .86; }
.credits-roll__hint { position: absolute; z-index: 2; left: max(10px, var(--safe-l)); bottom: calc(var(--safe-b) + 10px);
  max-width: calc(100vw - 20px); font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; color: var(--n6);
  letter-spacing: 1px; text-transform: uppercase; pointer-events: none; }
.credits-roll__continue:not(.is-visible) { visibility: hidden; pointer-events: none; }
.credits-roll__skip:focus-visible, .credits-roll__continue:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.reduced-motion .credits-roll, .reduced-motion .credits-roll * { transition: none !important; }
.reduced-motion .credits-roll__walker.is-walking { animation: none; left: 50%; transform: translateX(-50%); }

@media (max-width: 359px) {
  .credits-roll__viewport { padding-inline: max(12px, var(--safe-r)) max(12px, var(--safe-l)); }
  .credits-roll__section { padding-inline: 12px; }
}