/* Custom styles to complement Tailwind CSS */

/* ==================== Game CSS Reset ==================== */
/* Reset parent website styles that leak into the game container */
#phd-clicker-app input,
#phd-clicker-app textarea,
#phd-clicker-app select,
#phd-clicker-app button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  transition: none;
}

#phd-clicker-app input:focus,
#phd-clicker-app textarea:focus,
#phd-clicker-app select:focus,
#phd-clicker-app button:focus {
  outline: none;
  border-color: inherit;
  box-shadow: none;
}

#phd-clicker-app input:hover,
#phd-clicker-app button:hover {
  border-color: inherit;
}

/* Floating text animation - with bounce effect */
@keyframes float-up {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -15px) scale(1.1);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -25px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60px) scale(0.9);
  }
}

.animate-float-up {
  animation: float-up 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Critical hit floating text - bigger and brighter */
@keyframes float-up-crit {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1.3);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -35px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80px) scale(1);
  }
}

.animate-float-up-crit {
  animation: float-up-crit 1.2s ease-out forwards;
  will-change: transform, opacity;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

/* Click ripple effect */
@keyframes click-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.click-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: click-ripple 0.5s ease-out forwards;
  pointer-events: none;
}

.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;
}

/* Animations for Prestige/Heritage */
@keyframes stamp-slam {
  0% { transform: scale(3); opacity: 0; }
  50% { transform: scale(0.9); opacity: 1; }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.stamp-animation {
  animation: stamp-slam 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

/* ==================== Stealth Terminal Mode ==================== */
#stealth-terminal {
  background: #0d1117;
  color: #3fb950;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}

.terminal-header {
  background: #161b22;
  border-bottom: 1px solid #30363d;
}

.terminal-prompt { color: #58a6ff; }
.terminal-success { color: #3fb950; }
.terminal-error { color: #f85149; }
.terminal-warning { color: #d29922; }
.terminal-info { color: #8b949e; }
.terminal-highlight { color: #a5d6ff; }
.terminal-number { color: #79c0ff; }

.terminal-input {
  background: #0d1117;
  border-top: 1px solid #30363d;
}

#phd-clicker-app .terminal-input input {
  background: transparent;
  border: none;
  outline: none;
  color: #c9d1d9;
  font-family: inherit;
  font-size: inherit;
  caret-color: #3fb950;
  width: 100%;
}

.terminal-input input::placeholder {
  color: #484f58;
}

/* Terminal scrollbar */
#stealth-terminal .terminal-scrollbar::-webkit-scrollbar {
  width: 8px;
}
#stealth-terminal .terminal-scrollbar::-webkit-scrollbar-track {
  background: #0d1117;
}
#stealth-terminal .terminal-scrollbar::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 4px;
}
#stealth-terminal .terminal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

/* Terminal table styling */
.terminal-table {
  border-collapse: collapse;
  width: 100%;
}
.terminal-table th,
.terminal-table td {
  text-align: left;
  padding: 4px 12px;
}
.terminal-table th {
  color: #8b949e;
  border-bottom: 1px solid #30363d;
}
.terminal-table tr:hover {
  background: #161b22;
}

/* Blinking cursor effect */
@keyframes terminal-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.terminal-cursor {
  animation: terminal-blink 1s step-end infinite;
}

/* ASCII box drawing */
.terminal-box {
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #161b22;
}

/* Fade out animation for terminal click feedback */
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}