/* Custom styles to complement Tailwind CSS */

@keyframes float-up {
  0% { opacity: 1; transform: translate(-50%, -10px); }
  20% { opacity: 1; transform: translate(-50%, -20px); }
  80% { opacity: 1; transform: translate(-50%, -50px); }
  100% { opacity: 0; transform: translate(-50%, -70px); }
}

.animate-float-up {
  animation: float-up 1.2s ease-out forwards;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1e293b; /* slate-800 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #475569; /* slate-600 */
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* slate-500 */
}

/* News Ticker Animation (vertical) */
@keyframes ticker-vertical {
    0% { transform: translateY(100%); opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    90% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

#news-ticker {
    position: relative;
    overflow: hidden;
}

#news-ticker span {
    display: inline-block;
    white-space: nowrap;
}

#news-ticker .news-anim {
    animation: ticker-vertical 6.5s linear forwards;
}

@keyframes fade-in-soft {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-letter-anim {
  animation: fade-in-soft 0.45s ease-out forwards;
}

.result-settlement-anim {
  animation: fade-in-soft 0.45s ease-out forwards;
}

/* Mobile-friendly layout adjustments */
@media (max-width: 1024px) {
  #game-container {
    min-height: 100vh;
    overflow-y: auto;
  }
  #main-panels {
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  #game-container {
    padding-bottom: 1rem;
  }
  #main-panels > div {
    min-height: auto;
    width: 100% !important;
  }
  #manual-research-button {
    width: min(100%, 18rem);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Middle panel scrollable on all viewports to preserve column layout */
#middle-panel {
  overflow-y: auto;
  max-height: none;
}

/* When overlay is open, hide site masthead and lock scroll */
body.phd-game-open {
  overflow: hidden;
}
body.phd-game-open .masthead {
  display: none !important;
}