/* Escape the Tomb of Nefertari — Developed by Slyness */
/* ---------- Cinematic ending ---------- */
/* --sx / --sy: on-screen position of the sun in the doorway (set by js/ending.js) */
#ending { --sx: 50vw; --sy: 58vh; background: #000; }
#ending .end-bg { animation: none; will-change: filter; }
#ending.play .end-bg { animation: endExpose 6s cubic-bezier(.3,.6,.2,1) both; }
#ending .end-bg::after { background: radial-gradient(ellipse at var(--sx) var(--sy), rgba(0,0,0,0) 10%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.85)); }
@keyframes endExpose {
  0% { filter: brightness(3.2) saturate(.2) blur(10px) contrast(.7); }
  60% { filter: brightness(1.15) saturate(1.1) blur(0) contrast(1); }
  100% { filter: brightness(1) saturate(1.05); }
}

/* Sun bloom and anamorphic flare */
.end-sun, .end-streak, .end-flash, #endFx { position: absolute; pointer-events: none; }
.end-sun {
  left: var(--sx); top: var(--sy); width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax; border-radius: 50%;
  background: radial-gradient(circle, #fffef6 0, rgba(255,236,180,.95) 3%, rgba(255,205,120,.5) 9%, rgba(255,170,80,.16) 24%, transparent 55%);
  mix-blend-mode: screen; opacity: 0;
}
#ending.play .end-sun { animation: sunBloom 4.5s .4s cubic-bezier(.2,.7,.2,1) both, sunBreath 5s 5s ease-in-out infinite alternate; }
@keyframes sunBloom { 0% { opacity: 0; transform: scale(.2); } 45% { opacity: 1; transform: scale(1.25); } 100% { opacity: .7; transform: scale(1); } }
@keyframes sunBreath { from { opacity: .7; transform: scale(1); } to { opacity: .85; transform: scale(1.08); } }

.end-streak {
  left: -20vw; right: -20vw; top: var(--sy); height: 3px; margin-top: -1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,190,110,.25) 25%, rgba(255,240,210,.95) 50%, rgba(255,190,110,.25) 75%, transparent);
  box-shadow: 0 0 18px 4px rgba(255,200,120,.45); mix-blend-mode: screen; opacity: 0;
}
#ending.play .end-streak { animation: streak 3s 1.1s cubic-bezier(.2,.7,.2,1) both, streakBreath 4s 4.1s ease-in-out infinite alternate; }
@keyframes streak { 0% { opacity: 0; transform: scaleX(0); } 35% { opacity: 1; transform: scaleX(1.1); } 100% { opacity: .55; transform: scaleX(1); } }
@keyframes streakBreath { to { opacity: .8; transform: scaleX(.94); } }

#endFx { inset: 0; width: 100%; height: 100%; }
.end-flash { inset: 0; background: radial-gradient(ellipse at 50% 42%, #fff6dc, rgba(255,220,150,.6) 40%, transparent 75%); mix-blend-mode: screen; opacity: 0; }
#ending.play .end-flash { animation: endFlash 1.6s 3.9s ease-out both; }
@keyframes endFlash { 0% { opacity: 0; } 10% { opacity: .75; } 100% { opacity: 0; } }

/* Content */
#ending .end-content { z-index: 2; }
#ending.cine .end-content, #ending.cine .weg-logo { pointer-events: none; }
#ending .end-content::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(8,5,2,.72), rgba(8,5,2,.35) 60%, transparent 85%);
}
#ending.play .end-content::before { animation: fadeIn 2.5s 3.2s both; opacity: 1; }

#ending .cue { opacity: 0; }
#ending.play .cue { animation: cueIn 1.5s var(--d, 0s) cubic-bezier(.2,.7,.2,1) both; }
@keyframes cueIn { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
#ending .end-text, #ending .end-time, #ending .end-score, #ending #btnReplay { animation: none; }

.end-glyphs { display: flex; align-items: center; gap: 18px; color: var(--gold-2); font-size: 28px; text-shadow: 0 0 18px rgba(246,220,154,.8), 0 2px 6px #000; }
.end-glyphs .eg { letter-spacing: .35em; margin-right: -.35em; }
.end-glyphs .line {
  position: relative; width: clamp(60px, 16vw, 170px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-2));
  box-shadow: 0 0 8px rgba(226,188,107,.8); transform-origin: right;
}
.end-glyphs .line:last-child { background: linear-gradient(270deg, transparent, var(--gold) 30%, var(--gold-2)); transform-origin: left; }
/* thin second rule underneath */
.end-glyphs .line::after {
  content: ""; position: absolute; top: 5px; right: 0; width: 62%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246,220,154,.7));
}
.end-glyphs .line:last-child::after { right: auto; left: 0; background: linear-gradient(270deg, transparent, rgba(246,220,154,.7)); }
/* gold diamond at the outer tip */
.end-glyphs .line::before {
  content: ""; position: absolute; top: 50%; left: 18%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: linear-gradient(135deg, #fff3cf, var(--gold) 60%, #8a6326); transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(246,220,154,.9);
}
.end-glyphs .line:last-child::before { left: auto; right: 18%; margin: -3.5px -3.5px 0 0; }
#ending.play .end-glyphs .line { animation: lineIn 1.8s 2.7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lineIn { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } }

.end-title {
  font-family: "Cinzel", serif; font-weight: 900; margin: 6px 0 10px; line-height: 1;
  font-size: clamp(64px, 15vw, 168px); letter-spacing: .14em; margin-right: -.14em;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.85)) drop-shadow(0 0 40px rgba(246,220,154,.35));
}
.end-title .ch { display: inline-block; opacity: 0; }
.end-title .ch b {
  display: inline-block; font-weight: inherit;
  background: linear-gradient(105deg, #8a6326 0%, var(--gold) 22%, #fff3cf 38%, #ffffff 44%, #fff3cf 50%, var(--gold) 66%, #8a6326 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-position: 100% 0;
}
#ending.play .end-title .ch { animation: letterIn 1.6s var(--d) cubic-bezier(.16,.8,.24,1) both; }
#ending.play .end-title .ch b { animation: titleShine 5s calc(var(--d) + 1.4s) ease-in-out infinite; }
@keyframes letterIn {
  0% { opacity: 0; transform: translateY(.18em) scale(1.6); filter: blur(18px) brightness(3); }
  55% { opacity: 1; filter: blur(0) brightness(2.2); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes titleShine { 0%, 50% { background-position: 100% 0; } 100% { background-position: -50% 0; } }

#ending .end-text { margin: 0 0 6px; }
.end-text .w { display: inline-block; opacity: 0; white-space: pre; }
#ending.play .end-text .w { animation: wordIn 1.1s var(--d) ease-out both; }
@keyframes wordIn { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }

/* Letterbox */
.end-bars i { position: absolute; left: 0; right: 0; height: 11vh; background: #000; z-index: 4; pointer-events: none; }
.end-bars i:first-child { top: 0; box-shadow: 0 0 40px 10px #000; }
.end-bars i:last-child { bottom: 0; box-shadow: 0 0 40px 10px #000; }
#ending.play .end-bars i:first-child { animation: barUp 1.8s 8.2s cubic-bezier(.6,0,.3,1) both; }
#ending.play .end-bars i:last-child { animation: barDown 1.8s 8.2s cubic-bezier(.6,0,.3,1) both; }
@keyframes barUp { to { transform: translateY(-140%); } }
@keyframes barDown { to { transform: translateY(140%); } }

/* Tap to skip: jump every timed cue to its end */
#ending.skip .cue, #ending.skip .end-title .ch, #ending.skip .end-text .w, #ending.skip .end-glyphs .line,
#ending.skip .end-bars i, #ending.skip .end-content::before { animation-delay: 0s !important; animation-duration: .6s !important; }
#ending.skip .end-sun, #ending.skip .end-streak { animation-delay: 0s, .6s !important; animation-duration: .6s, 5s !important; }
#ending.skip .end-bg { animation-delay: 0s !important; animation-duration: .6s !important; }
#ending.skip .end-flash { animation: none; }