/* ============================================================
   Main Menu + Ending Screen: retro CRT-terminal overlays.
   Both are full-screen overlays layered above the Win95 desktop.
   Deliberately styled as an old-school phosphor terminal (green-on-
   black, scanlines, glow, blinking cursor) to signal "you are
   outside the simulated OS" - booting/shutting down the machine -
   rather than inside a Win95 app window.
   ============================================================ */

.main-menu-overlay,
.ending-screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* The global CG overlay is z-index 2150. Ending dialogue and portraits must
   remain above it; CG is a visual background and must never block Continue
   or choice buttons. */
.ending-screen-overlay {
  z-index: 2400;
}

.main-menu-overlay.hidden,
.ending-screen-overlay.hidden {
  display: none;
}

/* ---- shared CRT terminal chrome ---- */

.crt-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  box-sizing: border-box;
  padding: 24px;
  background: radial-gradient(ellipse at center, #04180a 0%, #000 78%);
  color: #4dff88;
  font-family: var(--w95-font);
  text-shadow: 0 0 4px rgba(77, 255, 136, 0.85), 0 0 10px rgba(77, 255, 136, 0.4);
  text-align: center;
}

/* Scanline + vignette overlay, purely decorative, sits above the content. */
.crt-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.25) 2px,
    rgba(0, 0, 0, 0.25) 3px
  );
  mix-blend-mode: multiply;
  z-index: 2;
}

.crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.85);
  z-index: 3;
  animation: crt-flicker 6s infinite;
}

@keyframes crt-flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.88; }
  98% { opacity: 1; }
}

.crt-cursor {
  display: inline-block;
  width: 0.6em;
  background: #4dff88;
  margin-left: 2px;
  animation: crt-blink 1s steps(1) infinite;
}

@keyframes crt-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---- Main Menu (retro boot/login terminal) ---- */

.crt-title {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 3px;
  z-index: 1;
}

.crt-subtitle {
  font-size: 12px;
  opacity: 0.8;
  letter-spacing: 1px;
  z-index: 1;
}

.crt-menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
  width: 340px;
}

.crt-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid #2d7a4c;
  color: #4dff88;
  font-family: inherit;
  font-size: 14px;
  text-shadow: inherit;
  cursor: pointer;
  text-align: left;
}

.crt-menu-item:hover,
.crt-menu-item:focus {
  background: rgba(77, 255, 136, 0.12);
  border-color: #4dff88;
  outline: none;
}

.crt-menu-item .crt-menu-marker {
  opacity: 0;
}

.crt-menu-item:hover .crt-menu-marker,
.crt-menu-item:focus .crt-menu-marker {
  opacity: 1;
}

.crt-menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crt-menu-item-hint {
  font-size: 10px;
  opacity: 0.7;
}

.crt-login-load-panel {
  z-index: 1;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #2d7a4c;
  padding: 16px;
  text-align: left;
}

.crt-login-load-panel.hidden {
  display: none;
}

.crt-login-load-label {
  font-size: 11px;
}

.crt-login-load-input {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  background: #000;
  border: 1px solid #2d7a4c;
  color: #4dff88;
  caret-color: #4dff88;
}

.crt-login-load-input:focus {
  outline: none;
  border-color: #4dff88;
}

.crt-login-load-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.crt-btn {
  font-family: inherit;
  background: transparent;
  border: 1px solid #4dff88;
  color: #4dff88;
  padding: 4px 14px;
  cursor: pointer;
  text-shadow: inherit;
}

.crt-btn:hover {
  background: rgba(77, 255, 136, 0.15);
}

.crt-login-feedback {
  font-size: 11px;
  color: #ff5c5c;
  text-shadow: 0 0 4px rgba(255, 92, 92, 0.8);
  margin: 0;
}

.crt-login-feedback.hidden {
  display: none;
}

.crt-login-footer {
  font-size: 10px;
  opacity: 0.6;
  z-index: 1;
}

/* ---- Ending Screen ---- */

.ending-gal-screen { position:relative; width:100vw; height:100vh; overflow:hidden; background:#080808; color:#fff; }
.ending-gal-scene { position:absolute; inset:0; z-index:1; pointer-events:none; }
.ending-gal-cg { position:absolute; inset:0; z-index:0; background-position:center; background-repeat:no-repeat; background-size:cover; filter:brightness(.72); pointer-events:none; }
.ending-gal-character { position:absolute; z-index:2; bottom:17vh; height:68vh; width:34vw; display:flex; align-items:flex-end; justify-content:center; opacity:.55; transition:opacity .15s, filter .15s; filter:brightness(.65) saturate(.8); pointer-events:none; }
.ending-gal-character.ending-gal-active { opacity:1; filter:brightness(1) saturate(1); }
.ending-gal-player { left:3vw; }
.ending-gal-npc { right:3vw; }
.ending-gal-portrait { max-width:100%; max-height:100%; object-fit:contain; object-position:bottom center; }
.ending-gal-avatar { font-size:clamp(70px, 12vw, 180px); opacity:.9; filter:drop-shadow(0 0 12px #000); }

.ending-screen-panel {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ending-screen-icon {
  font-size: 40px;
  filter: grayscale(1) brightness(1.4) drop-shadow(0 0 6px rgba(77, 255, 136, 0.7));
}

.ending-screen-title {
  display: none;
  margin: 0;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ending-screen-text {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  color: #4dff88;
  opacity: 0.92;
}

.ending-activity-status {
  position: absolute;
  bottom: calc(100% + 8px);
  color: #9cffb8;
  font-size: 11px;
  opacity: 0.8;
}

.ending-activity-log {
  width: 100%;
  min-height: 88px;
  max-height: 24vh;
  overflow: hidden;
  text-align: left;
  border: 2px solid rgba(210, 240, 255, 0.78);
  border-radius: 4px;
  background: rgba(7, 14, 28, 0.88);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 0, 0, 0.8);
  padding: 16px 24px;
  box-sizing: border-box;
}

.ending-dialogue-line {
  margin: 0;
  min-height: 1.8em;
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.8;
  color: #fff;
}

.ending-dialogue-line strong {
  color: #aee6ff;
  margin-right: 10px;
}

.ending-activity-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
}

.ending-activity-options .dialogue-continue,
.ending-activity-options button {
  min-width: 110px;
  padding: 8px 18px;
  font-size: 14px;
}

.ending-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ending-final.hidden {
  display: none;
}

.ending-screen-btn {
  margin-top: 8px;
}