/* Torre Galesa: carteles que se leen sobre el salón, el cielo y la noche */

/* lo que pasó con la porción: pastillas apiladas arriba de la torre */
.tr-say {
  position: absolute; display: flex; flex-direction: column-reverse; align-items: center; gap: 5px;
  transform: translate(-50%, -100%); pointer-events: none; z-index: 2;
  animation: tr-rise 1.2s ease-out forwards;
}
.tr-say span {
  font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  padding: 6px 13px 7px; border-radius: 999px; color: #fff; background: rgba(74, 22, 44, .8);
  box-shadow: 0 3px 0 rgba(74, 22, 44, .35);
}
.tr-say .ok { font-size: 24px; color: #8DFFDD; }
.tr-say .grow { color: #FFE29A; }
.tr-say .pts { font-size: 18px; background: rgba(74, 22, 44, .62); }
.tr-say .gold { color: #5A3300; background: linear-gradient(#FFDF73, #F2AE20); box-shadow: 0 3px 0 #B67800; }
.tr-say .save { font-size: 24px; background: #FF5F8A; box-shadow: 0 3px 0 #B83D5E; }
@keyframes tr-rise {
  0% { opacity: 0; transform: translate(-50%, -82%) scale(.7); }
  12% { opacity: 1; transform: translate(-50%, -100%) scale(1.08); }
  22% { transform: translate(-50%, -100%) scale(1); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -138%) scale(1); }
}

/* pisos redondos y "¡Tiempo!": cartel arriba, debajo del marcador */
.tr-bn {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 156px); z-index: 3; pointer-events: none;
  min-width: 190px; padding: 10px 22px 12px; border-radius: 22px; text-align: center;
  background: #FFF6EA; color: #8A2C4E; box-shadow: 0 5px 0 #E2557A, 0 14px 30px rgba(90, 20, 50, .22);
  transform: translateX(-50%); animation: tr-bn 2.25s ease-out forwards;
}
.tr-bn b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.tr-bn small { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; color: #B83D5E; white-space: nowrap; }
@keyframes tr-bn {
  0% { opacity: 0; transform: translate(-50%, -26px) scale(.8); }
  10% { opacity: 1; transform: translate(-50%, 4px) scale(1.04); }
  16% { transform: translate(-50%, 0) scale(1); }
  84% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}

/* la porción dorada que se mueve: cuánto vale si la soltás ahora */
.tr-tag {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform;
  padding: 4px 10px 5px; border-radius: 999px; white-space: nowrap;
  font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: .01em;
  color: #5A3300; background: linear-gradient(#FFE07A, #F4B42A); box-shadow: 0 2px 0 #B87A00;
}
.tr-tag.hot { color: #064A38; background: linear-gradient(#A8FFE4, #22E3A6); box-shadow: 0 2px 0 #0E9C70, 0 0 0 4px rgba(25, 227, 160, .3); }

/* en las instrucciones: salvarse por un pelito */
.dot.tr-save { background: none; box-shadow: inset 0 0 0 3px #FF6F91; }

@media (prefers-reduced-motion: reduce) {
  .tr-say { animation-duration: 1.2s; animation-name: tr-fade; }
  .tr-bn { animation-name: tr-fade-bn; }
  @keyframes tr-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes tr-fade-bn { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}
.tr-bn.short { animation-duration: 1.35s; }