body {
  background-color: black;
  color: #0f0;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: stretch;     /* each child fills width */
  animation: crtPowerOn 2s ease-out;
}

/* --- Start Screen --- */
#startScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  animation: fadeIn 2s ease forwards;
}

#titleImage {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  filter: brightness(100%);
}

#titleOverlay {
  position: relative;
  text-align: center;
  color: #e8e8d8;
  z-index: 2;
}

#titleOverlay h1 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.5em;
  text-shadow: 0 0 5px #4f804f;
  margin-bottom: 0.2em;
}

.subtitle {
  font-size: 1.0em;
  color: #b5c9b5;
  margin-bottom: 1.0em;
}

#startButton {
  background: none;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 5px 15px;
  font-family: 'Courier New', monospace;
  font-size: 1.0em;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: flickerButton 2.5s infinite ease-in-out;
}

#startButton:hover {
  background-color: rgba(0, 255, 0, 0.1);
  box-shadow: 0 0 10px #0f0;
}

/* Fade in / out animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes flickerButton {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; filter: brightness(120%); }
}

/* Entire game display */
#gameContainer {
  width: 100%;
  max-width: 900px; /* keeps things reasonable on ultrawide */
  margin: 0 auto; /* centers horizontally */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Console window */
#console {
  background-color: black;
  border: 2px solid #060;
  padding: 10px;
  width: 100%;
  height: 400px;
  overflow-y: scroll;
  white-space: pre-wrap;
  box-sizing: border-box;
  margin-bottom: 10px;
	font-size: 14px; /* main game text size */
}

/* Command input line */
#inputLine {
  width: 100%;
  padding: 6px;
  font-size: 16px; /* prevent iOS zoom */
  /* transform: scale(0.85); */
  /* transform-origin: left center; */
  background-color: black;
  color: #0f0;
  border: 2px solid #060;
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
  margin-top: 10px;
}

/* Log window */
#logWindow {
  font-family: monospace;
  font-size: 0.75em;   /* smaller system feed */
  background-color: black;
  border: 2px solid #060;
  padding: 5px;
  width: 100%;
  height: 105px;       /* ~6 entries visible */
  overflow-y: auto;    /* unlimited scroll */
  box-sizing: border-box;
  margin-bottom: 10px;
}

.log-entry {
  margin: 2px 0;
  padding: 2px 4px;
  border-left: 3px solid #666;
  color: #ccc;
}

.log-time {
  color: #777; /* dimmer timestamps */
  margin-right: 5px;
}

/* Movement updates */
.log-move {
  border-left-color: #2ecc71;  /* green */
  color: #a5f7b0;
}

/* Item actions */
.log-item {
  border-left-color: #f39c12;  /* orange */
  color: #ffd699;
}

/* Combat messages */
.log-combat {
  border-left-color: #e74c3c;  /* red */
  color: #f5a3a3;
}

/* Healing */
.log-heal {
  border-left-color: #3498db;  /* blue */
  color: #a8d4ff;
}

/* General info */
.log-info {
  border-left-color: #9b59b6;  /* purple */
  color: #e0c4f7;
}

/* Toggle button */
#logToggle {
  background-color: black;
  color: #0f0;
  border: 2px solid #060;
  padding: 5px 10px;
  margin: 5px 0;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  align-self: flex-start;
}
#logToggle:hover {
  background-color: #111;
}

/* --- Fade-in animation for intro lines with subtle CRT glow --- */
.fadeLine {
  opacity: 0;
  animation: fadeInText 2.5s ease forwards;
}

@keyframes fadeInText {
  0% {
    opacity: 0;
    text-shadow: 0 0 0px #0f0;
    filter: blur(2px) brightness(130%);
  }
  40% {
    opacity: 0.6;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
  }
  70% {
    opacity: 0.9;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 2px rgba(0, 255, 0, 0.2);
    filter: blur(0);
  }
}

/* Combat border highlight */
.inCombatGlow {
  border-color: #0f0;  /* crisp green outline */
}
.lowHpGlow {
  border-color: #f00;  /* crisp red outline */
}

/* --- CRT scanline + flicker overlay --- */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0.04),
    rgba(0, 255, 0, 0.04) 2px,
    transparent 2px,
    transparent 4px
  );
  z-index: 9999;
  animation: crtFlicker 0.12s infinite;
}

@keyframes crtFlicker {
  0%   { opacity: 0.95; }
  50%  { opacity: 1; }
  100% { opacity: 0.97; }
}

/* --- CRT power-on animation --- */
@keyframes crtPowerOn {
  0% {
    opacity: 0;
    transform: scaleY(0.02);
    filter: brightness(400%) saturate(300%) blur(10px);
  }
  20% {
    opacity: 1;
    transform: scaleY(0.2);
    filter: brightness(250%) saturate(200%) blur(4px);
  }
  50% {
    transform: scaleY(1.05);
    filter: brightness(180%) saturate(150%) blur(2px);
  }
  80% {
    transform: scaleY(1);
    filter: brightness(120%) saturate(120%) blur(1px);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* --- Enhanced Ambient CRT Flicker --- */
@keyframes ambientFlicker {
  0%   { opacity: 0.92; filter: brightness(100%) saturate(100%); text-shadow: 0 0 1px rgba(0,255,0,0.1); }
  20%  { opacity: 0.96; filter: brightness(105%) saturate(120%); text-shadow: 0 0 3px rgba(0,255,0,0.25); }
  40%  { opacity: 0.90; filter: brightness(95%) saturate(90%); text-shadow: 0 0 2px rgba(0,255,0,0.15); }
  60%  { opacity: 0.98; filter: brightness(110%) saturate(130%); text-shadow: 0 0 4px rgba(0,255,0,0.35); }
  80%  { opacity: 0.94; filter: brightness(100%) saturate(100%); text-shadow: 0 0 2px rgba(0,255,0,0.2); }
  100% { opacity: 0.96; filter: brightness(105%) saturate(115%); text-shadow: 0 0 3px rgba(0,255,0,0.25); }
}

.ambientFlicker {
  animation: ambientFlicker 2.5s infinite ease-in-out;
}

/* --- Fade-out for ambient flicker when game begins --- */
@keyframes fadeOutFlicker {
  0% {
    opacity: 1;
    filter: brightness(105%) saturate(115%);
    text-shadow: 0 0 3px rgba(0,255,0,0.25);
  }
  100% {
    opacity: 1;
    filter: brightness(100%) saturate(100%);
    text-shadow: 0 0 0 rgba(0,255,0,0);
  }
}

.fadeOutFlicker {
  animation: fadeOutFlicker 2s ease forwards;
}

/* --- Lantern flicker background effect --- */
@keyframes lanternFlicker {
  0%   { background-color: rgba(0,20,0,0.1); box-shadow: 0 0 0px rgba(255,220,100,0.0); }
  25%  { background-color: rgba(60,40,0,0.15); box-shadow: 0 0 25px rgba(255,220,100,0.3); }
  50%  { background-color: rgba(30,20,0,0.1); box-shadow: 0 0 40px rgba(255,200,80,0.4); }
  75%  { background-color: rgba(50,30,0,0.12); box-shadow: 0 0 20px rgba(255,220,100,0.25); }
  100% { background-color: rgba(0,20,0,0.1); box-shadow: 0 0 0px rgba(255,220,100,0.0); }
}

.lanternGlow {
  animation: lanternFlicker 2.5s ease-in-out 2;
}

/* === Top Bar Layout (Title + Show Log Button) === */
#topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 10px auto;  /* center and add bottom spacing */
}

/* Keep your fantasy title aesthetic but sized for the top bar */
#topBar h1 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
  color: #38b502;
  text-shadow: 0 0 8px #4f804f;
  margin: 0;
  padding: 0;
  animation: ambientFlicker 2.5s infinite ease-in-out;
}

/* Match button style to your CRT theme */
#topBar #logToggle {
  background-color: black;
  color: #0f0;
  border: 2px solid #060;
  padding: 5px 10px;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#topBar #logToggle:hover {
  background-color: #111;
  border-color: #0a0;
  box-shadow: 0 0 8px rgba(0,255,0,0.3);
}

/* Responsive tweak for smaller screens */
@media (max-width: 600px) {
  #topBar {
    flex-direction: column;
    gap: 6px;
  }
}

.game-prompt {
  color: #0f0;
  margin-top: 4px;
}

/* --- Combat Text Enhancements --- */
.combat-text { color: #ddd; }
.combat-damage { color: #ff5555; font-weight: bold; }
.combat-heal { color: #8aff8a; font-weight: bold; }
.combat-monster { font-style: italic; color: #cfcfcf; }
.combat-crit { color: #ff2222; font-weight: bold; text-shadow: 0 0 6px #ff0000; }

/* === Animated Pulse Effects for Input === */
@keyframes pulseGreen {
  0% { box-shadow: 0 0 3px #0f0, inset 0 0 2px #0f0; }
  50% { box-shadow: 0 0 12px #0f0, inset 0 0 6px #0f0; }
  100% { box-shadow: 0 0 3px #0f0, inset 0 0 2px #0f0; }
}

@keyframes pulseRed {
  0% { box-shadow: 0 0 3px #f00, inset 0 0 2px #f00; }
  50% { box-shadow: 0 0 12px #f00, inset 0 0 6px #f00; }
  100% { box-shadow: 0 0 3px #f00, inset 0 0 2px #f00; }
}

#inputLine.inCombatGlow {
  border-color: #0f0;
  animation: pulseGreen 1.5s infinite;
}

#inputLine.lowHpGlow {
  border-color: #f00;
  animation: pulseRed 1.5s infinite;
}