/* 16-Bit Retro Game Theme */

/* Import and reset */
body {
  font-family: 'VT323', monospace;
  background-color: #2c2137; /* Deep purple background */
  color: #d6c2ff; /* Light lavender text */
  margin: 0;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  /* Ensure crisp pixels */
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* Main game window */
main {
  width: 100%;
  max-width: 600px;
  background-color: #4f3a65; /* Lighter purple panel */
  padding: 1.5rem;
  border: 4px double #d6c2ff;
  box-shadow: none;
  border-radius: 0;
  /* Animation on page load */
  opacity: 0;
  animation: pixel-fade-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
}

h1 {
  color: #ffde7d; /* Bright yellow */
  font-size: 2.5rem;
  margin-top: 0;
  margin-bottom: 2rem;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #a82a42; /* Magenta shadow */
  letter-spacing: 2px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

label {
  font-size: 1.25rem;
  color: #d6c2ff;
  text-shadow: 2px 2px 0 #2c2137;
}

textarea {
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  padding: 0.75rem;
  border: 2px solid #d6c2ff;
  border-radius: 0;
  resize: vertical;
  min-height: 80px;
  background-color: #2c2137;
  color: #d6c2ff;
}

textarea::placeholder {
  color: #7a6a8f;
}

textarea:focus {
  outline: none;
  border-color: #ffde7d; /* Yellow focus */
  background-color: #382c47;
}

button {
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  font-weight: normal;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: 0;
  border: 2px solid #d6c2ff;
  background-color: #a82a42; /* Magenta button */
  color: #ffde7d; /* Yellow text */
  cursor: pointer;
  box-shadow: 4px 4px 0px #382c47;
  transition: transform 0.1s, box-shadow 0.1s;
}

button:hover:not(:disabled) {
  background-color: #c8304d;
}

button:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: none;
}

button:disabled {
  background-color: #4f3a65;
  color: #7a6a8f;
  cursor: not-allowed;
  box-shadow: none;
}

/* Progress Bar */
.progress-container {
  display: none; /* Hidden by default */
  width: 100%;
  background-color: #2c2137;
  border: 2px solid #7a6a8f;
  margin-top: 2rem;
  box-sizing: border-box;
}

.progress-bar {
  width: 0%;
  height: 16px;
  background-color: #ffde7d;
  transition: width 0.4s ease-out;
}

/* Animation for elements appearing */
@keyframes pixel-fade-in {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* Glyph display area */
#card-display-area {
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: flex-start; /* Align items to the top */
  flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
  gap: 1rem;
  margin-top: 2rem;
  min-height: 120px; /* Reserve some space */
}

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  /* Add animation */
  opacity: 0; /* Start hidden for animation */
  animation: pixel-fade-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.card-glyph-wrapper {
  background-color: white;
  border: 2px solid black;
  padding: 4px;
  display: inline-block;
  line-height: 0; /* Prevents extra space below SVG */
}

.card-name {
    color: #ffde7d;
    font-size: 1rem;
    text-align: center;
    text-shadow: 2px 2px 0 #2c2137;
}


/* Output / response box */
#output {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Space between panels */
}

main.loading #output {
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 120px;
  font-size: 1.5rem;
  color: #ffde7d;
}


#output strong {
  color: #ffde7d;
}

#output pre { /* Style for the error message data */
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #382c47;
  padding: 0.5rem;
  border: 1px solid #7a6a8f;
  color: #d6c2ff;
}

.narrative-text {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #d6c2ff;
  opacity: 0;
  animation: pixel-fade-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  white-space: pre-wrap; /* Preserve newlines from model */
}

.narrative-text::first-letter {
    font-size: 3em;
    color: #ffde7d;
    float: left;
    line-height: 1;
    margin-top: 0.05em;
    margin-right: 0.1em;
    text-shadow: 2px 2px 0 #a82a42;
}

.interpretation-panel {
  padding: 1rem;
  border: 4px double #d6c2ff;
  background-color: #2c2137;
  font-size: 1.25rem;
  line-height: 1.5;
  opacity: 0;
  animation: pixel-fade-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.interpretation-title {
  font-size: 1.5rem;
  color: #ffde7d;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #7a6a8f;
  text-shadow: 2px 2px 0 #a82a42;
}

.interpretation-content {
  word-wrap: break-word;
  text-indent: 1.5em;
  white-space: pre-wrap; /* Allows newlines from the model to be rendered */
}

.interpretation-content::first-letter {
    font-size: 3em;
    color: #ffde7d;
    float: left;
    line-height: 1;
    margin-top: 0.05em;
    margin-right: 0.1em;
    text-shadow: 2px 2px 0 #a82a42;
}