/* endings.css — Game over, victoria, colapso */

.collapse-screen {
  position: relative; z-index: 2; width: 100%; max-width: 480px;
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px;
}
#collapse-sprite-wrap { position: relative; width: 260px; height: 300px; margin-bottom: 24px; }
#collapse-center {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%); height: 250px; z-index: 10;
  filter: drop-shadow(0 0 22px rgba(255,0,50,0.9));
  animation: center-float 0.7s ease-in-out infinite alternate;
}
@keyframes center-float {
  from { transform: translateX(-50%) scale(1) rotate(-1.5deg); filter: drop-shadow(0 0 22px rgba(255,0,50,0.9)); }
  to   { transform: translateX(-50%) scale(1.07) rotate(1.5deg); filter: drop-shadow(0 0 34px rgba(255,0,50,1)) hue-rotate(25deg); }
}
.collapse-ghost { position: absolute; object-fit: contain; animation: cg-orbit 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(168,85,247,0.7)); }
.cg-1 { height:88px; top:-8%;  left:8%;   opacity:0.55; animation-delay:0s;   animation-duration:1.1s; }
.cg-2 { height:78px; top:-4%;  right:4%;  opacity:0.50; animation-delay:0.2s; animation-duration:1.7s; }
.cg-3 { height:96px; top:22%;  left:-6%;  opacity:0.60; animation-delay:0.4s; animation-duration:1.3s; }
.cg-4 { height:74px; top:18%;  right:-4%; opacity:0.45; animation-delay:0.6s; animation-duration:1.9s; }
.cg-5 { height:84px; top:52%;  left:4%;   opacity:0.55; animation-delay:0.1s; animation-duration:1.5s; }
.cg-6 { height:68px; top:48%;  right:1%;  opacity:0.38; animation-delay:0.8s; animation-duration:2.1s; }
@keyframes cg-orbit {
  from { transform:translate(0,0) scale(1) rotate(-3deg); }
  to   { transform:translate(5px,-9px) scale(1.09) rotate(3deg); filter:hue-rotate(60deg) drop-shadow(0 0 13px rgba(255,0,100,0.9)); }
}
.collapse-text {
  font-size:1.3em; color:var(--rojo); letter-spacing:4px; text-transform:uppercase;
  text-align:center; min-height:2.2em; animation:text-flicker 0.35s step-end infinite;
  text-shadow: 0 0 12px rgba(204,51,51,0.9);
}
@keyframes text-flicker { 0%,100%{opacity:1;} 35%{opacity:0.55;} 65%{opacity:0.75;} 80%{opacity:0.4;} }

.end-screen {
  position: relative; z-index: 2; width: 100%; max-width: 480px;
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 30px 20px 90px; text-align: center; animation: end-reveal 0.5s ease;
}
.end-screen .end-icon { font-size:3.2em; margin-bottom:10px; }
.end-screen h1 { font-size:1.7em; letter-spacing:4px; text-transform:uppercase; margin-bottom:14px; }
.end-screen.gameover h1 { color:var(--rojo); text-shadow:0 0 20px rgba(204,51,51,0.7); }
.end-screen.victoria h1 { color:var(--amarillo); text-shadow:0 0 20px rgba(245,208,32,0.6); }
.end-screen p { font-size:0.9em; line-height:1.65; color:#ccc; margin-bottom:16px; }

.stats-final {
  background: rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.08);
  padding:14px; margin-bottom:18px; text-align:left; width:100%;
}
.stats-final p { font-size:0.8em; color:#aaa; margin-bottom:5px; }
.stats-final span { color:var(--blanco); font-weight:bold; }

.btn-restart {
  background:transparent; border:2px solid currentColor; color:inherit;
  font-family:var(--font); font-size:0.95em; font-weight:bold;
  padding:13px 28px; cursor:pointer; letter-spacing:2px;
  text-transform:uppercase; transition:all 0.2s ease; width:100%;
}
.end-screen.gameover .btn-restart { color:var(--rojo); }
.end-screen.gameover .btn-restart:hover { background:var(--rojo); color:#fff; }
.end-screen.victoria .btn-restart { color:var(--amarillo); }
.end-screen.victoria .btn-restart:hover { background:var(--amarillo); color:#000; }

@media (min-width: 768px) {
  #collapse-sprite-wrap { width:320px; height:380px; }
  #collapse-center { height:310px; }
}