/* ---------------------------------------------------------------- END OF ACT 1 (uses the ink & fog tokens from ui.css) */
#ending { position: absolute; inset: 0; z-index: 40; display: none; pointer-events: auto; background: rgba(0, 0, 0, 0); transition: background 1.4s ease, opacity .9s ease; color: var(--silver); font-family: var(--serif); }
#ending.show { display: block; background: rgba(0, 0, 0, .94); }
#ending.from-menu.show { background: radial-gradient(ellipse at center, rgba(6, 7, 8, .9), rgba(0, 0, 0, .97)); }
#ending.out { opacity: 0; }
#ending .e-card { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; opacity: 0; transition: opacity 1.4s ease, filter 1.4s ease; filter: blur(3px); pointer-events: none; }
#ending[data-phase="complete"] .e-complete, #ending[data-phase="next"] .e-next { opacity: 1; filter: none; }
#ending .e-complete h2 { margin: .5em 0; font-weight: 400; font-size: clamp(22px, 3.4vw, 40px); letter-spacing: .55em; padding-left: .55em; color: #e3e6e8; text-shadow: 0 0 24px rgba(220, 226, 230, .2); transition: letter-spacing 4s ease; }
#ending[data-phase="complete"] .e-complete h2 { letter-spacing: .62em; }
#ending .e-rule { display: block; width: min(420px, 60vw); height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(200, 206, 212, .55), transparent); }
#ending .e-kicker { font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 1.1em; padding-left: 1.1em; color: #aeb4b9; margin-bottom: .6em; }
#ending .e-title { margin: 0; font-weight: 700; font-size: clamp(44px, 8.5vw, 116px); line-height: 1; letter-spacing: .14em; padding-left: .14em;
  background: linear-gradient(180deg, #ffffff 0%, #dfe3e6 38%, #8e959b 72%, #5d636a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(210, 220, 228, .2)) drop-shadow(0 6px 14px rgba(0, 0, 0, .85)); }
#ending .e-soon { margin-top: 1em; font-family: var(--italic); font-style: italic; font-size: clamp(16px, 2vw, 24px); letter-spacing: .4em; padding-left: .4em; color: #b9bfc4; text-transform: uppercase; }
#ending .e-soon::before, #ending .e-soon::after { content: ""; display: inline-block; width: 4px; height: 4px; background: rgba(200, 206, 212, .6); transform: rotate(45deg) translateY(-4px); margin: 0 1.1em; }
#ending .e-skip { position: absolute; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); text-align: center; font-family: var(--italic); font-style: italic; letter-spacing: .3em; font-size: 13px; color: rgba(200, 206, 212, .35); opacity: 0; transition: opacity 1s; }
#ending[data-phase="complete"] .e-skip, #ending[data-phase="next"] .e-skip { opacity: 1; transition-delay: 1.6s; }

/* the gallery */
#ending .e-gallery { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 16px);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s 1.2s; box-sizing: border-box; }
#ending[data-phase="gallery"] .e-gallery { opacity: 1; visibility: visible; transition: opacity 1.2s ease; }
#ending .e-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#ending .e-head span { font-family: var(--italic); font-style: italic; font-size: 15px; letter-spacing: .3em; color: #8f969c; }
#ending .e-head b { font-weight: 400; font-size: clamp(12px, 1.3vw, 15px); letter-spacing: .5em; padding-left: .5em; color: #d5d9dc; }
#ending .e-view { position: relative; width: min(1100px, 92vw, calc((100vh - 310px) * 16 / 9)); aspect-ratio: 16 / 9; flex: none; touch-action: pan-y; }
#ending .e-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease, transform 1.4s ease; transform: scale(1.015); box-shadow: 0 0 0 1px rgba(205, 211, 216, .16), 0 30px 60px rgba(0, 0, 0, .8); }
#ending .e-shot.on { opacity: 1; transform: none; }
#ending .e-shot img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
#ending .e-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; background: none; color: rgba(225, 230, 234, .55); font: 400 44px var(--serif); cursor: pointer; text-shadow: 0 0 10px #000; transition: color .2s; }
#ending .e-arrow:hover, #ending .e-arrow:focus { color: #fff; outline: none; }
#ending .e-prev { left: -52px; } #ending .e-next-btn { right: -52px; }
#ending .e-cap { text-align: center; min-height: 4.6em; line-height: 1.35; }
#ending .e-cap.in { animation: capin 1s ease both; }
@keyframes capin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#ending .e-num { font-size: 11px; letter-spacing: .4em; color: #7d848a; }
#ending .e-cap h3 { margin: .25em 0 .15em; font-weight: 400; font-size: clamp(15px, 1.8vw, 21px); letter-spacing: .5em; padding-left: .5em; color: #e6e9eb; }
#ending .e-cap p { margin: 0; font-family: var(--italic); font-style: italic; font-size: 15px; letter-spacing: .12em; color: #8f969c; }
#ending .e-thumbs { display: flex; align-items: center; gap: 12px; }
#ending .e-thumb { position: relative; width: 92px; aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgba(205, 211, 216, .22); background: #000; cursor: pointer; opacity: .5; transition: opacity .3s, border-color .3s; }
#ending .e-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ending .e-thumb.on { opacity: 1; border-color: rgba(235, 238, 240, .8); }
#ending .e-thumb.on::after { content: ""; position: absolute; left: 50%; top: -9px; width: 5px; height: 5px; background: #e8ebee; transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 8px rgba(232, 235, 238, .7); }
#ending .e-thumb:focus, #ending .e-gridbtn:focus { outline: none; border-color: rgba(235, 238, 240, .9); opacity: 1; }
#ending .e-gridbtn { margin-left: 8px; border: 1px solid rgba(205, 211, 216, .28); background: none; color: #a9afb4; font: 400 10px var(--serif); letter-spacing: .3em; padding: 9px 10px 9px 13px; text-transform: uppercase; cursor: pointer; }
#ending .e-menu button { font-size: 14px; }
#ending .e-continue:disabled { opacity: 0; }
/* all three at once */
#ending.grid .e-view { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#ending.grid .e-shot { position: relative; inset: auto; opacity: 1; transform: none; aspect-ratio: 16 / 9; cursor: zoom-in; }
#ending.grid .e-shot:not(.on) { opacity: .78; }
#ending.grid .e-arrow { display: none; }
@media (max-width: 760px) {
  #ending.grid .e-view { grid-template-columns: 1fr; width: min(92vw, calc((100vh - 220px) / 3 * 16 / 9)); }
  #ending .e-prev { left: 4px; } #ending .e-next-btn { right: 4px; }
}
@media (max-height: 520px) {
  #ending .e-head span, #ending .e-cap p { display: none; }
  #ending .e-thumb { width: 64px; }
  #ending .e-view { width: min(92vw, calc((100vh - 170px) * 16 / 9)); }
  #ending .e-prev { left: 4px; } #ending .e-next-btn { right: 4px; }
}


/* short landscape phones: the title and every menu item must fit */
@media (max-height: 520px) {
  .logo { margin-bottom: .9em; }
  .logo-main { font-size: clamp(44px, 15vh, 96px); }
  body.touch .menu button, .menu button { padding-top: .42em; padding-bottom: .42em; }
}
@media (max-height: 400px) {
  .logo-top { font-size: 11px; }
  .logo-rule { margin-top: .35em; }
  .logo-rule em { font-size: 13px; }
  .logo { margin-bottom: .5em; }
  body.touch .menu button, .menu button { font-size: 11.5px; padding-top: .36em; padding-bottom: .36em; }
}
@media (max-height: 420px) {
  #ending .e-gallery { gap: 6px; }
  #ending .e-head, #ending .e-num { display: none; }
  #ending .e-view { width: min(92vw, calc((100vh - 128px) * 16 / 9)); }
  #ending .e-cap { min-height: 0; }
  #ending .e-cap h3 { margin: 0; font-size: 13px; }
  #ending .e-thumb { width: 54px; }
  #ending .e-gridbtn { padding: 6px 8px 6px 10px; }
  #ending .e-menu button { padding: .3em 0 .3em .42em; font-size: 12px; }
}