body {
  font-family: monospace;
  background-color: #0d0d0d;
  color: #e0e0e0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
main {
  display: flex;
  flex-direction: column;
  min-height: 90vh;
  max-width: 600px;
  justify-content: center;
}
button {
  background: #222;
  color: #eee;
  padding: 10px;
  margin: 5px 0px;
  border: 1px solid #444;
  cursor: pointer;
}
button:hover {
  background: #333;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
button.selected {
  background-color: #999;
  transform: scale(0.98);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
#startBtn {
  background-color: #222;
  color: rgba(255, 255, 255, .4);
  padding: 65px 65px;
  margin: 5px;
  border: 1px solid #444;
  cursor: pointer;
  border-radius: 3px;
  font-size: 24px;
  transition: background-color 0.3s ease; /* Smooth fade */
}
#startBtn:hover {
  color: rgba(255, 255, 255, 1.0);
  background-color: #444;
  font-size: 25px;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #fff;
  box-shadow:
    inset 0 0 20px #fff,
    inset 0 0 50px #fff;
}
#characterSprite {
  image-rendering: pixelated;
  width: 100px;
  position: absolute;
    right: 80px;
    top: 140px;
}
#gameContainer {
  padding: 30px;
  box-sizing: border-box;
  display: block;
}
#stats {
  padding: 10px;
}
#stats {
  line-height: 20px;
}
#event-log {
  height: 350px;
  overflow-y: auto;
  background: #111;
  padding: 10px;
  margin: 10px 0;
  border: none;
  overflow: auto; /* or scroll */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
}
#event-log::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}
.ai-turn-block {

}
#choices {
  min-height: 120px;
}
#choices button {
  width: 100%;
}
.obituary {
  background-color: #111;
  color: #eee;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  text-align: center;
  animation: fadeIn 1s ease-out;
}

.obituary h2 {
  margin-bottom: 10px;
}

.obituary p {
  margin: 6px 0;
}
.obituary {
  padding: 20px; 
  border: 2px solid #999; 
  background: #111; 
  color: #fff; 
  text-align: center; 
  border-radius: 12px; 
  margin-top: 20px;
  animation: fadeIn 1s ease-out;
}
#timelineContainer {
  display: none; 
  max-height: 300px; 
  overflow-y: auto; 
  margin-top: 1em; t
  ext-align: left;
}

#timelineContainer ul li {
  list-style: none;
  padding: 10px;
}

.choice-waiting {
  font-style: italic;
  opacity: 0.8;
  animation: blink 1.2s infinite;
}
#startScreen h1 {
  color: #2a2a2a;
  font-weight: 1000;
  margin-bottom: 60px;
}
#eventLog {
  border-top: 1px solid #fff;
  height: 200px; 
  overflow-y: auto; 
  padding: 10px;
}
#startScreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer {
  text-align:center; 
  font-size: 0.9em; 
  color: gray; 
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.addiction-alert {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #cc0000;
  padding: 10px 16px;
  border-radius: 4px;
  display: block;
  margin: 10px 0;
  animation: pulse-addiction 0.8s ease-in-out;
}
.condition-alert {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: blue;
  padding: 10px 16px;
  border-radius: 4px;
  display: block;
  margin: 10px 0;
  animation: pulse-addiction 0.8s ease-in-out;
}

.mentalHealth-alert {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #7d1aa2;
  padding: 10px 16px;
  border-radius: 4px;
  display: block;
  margin: 10px 0;
  animation: pulse-mental 0.8s ease-in-out;
}
.mentalHealth-choice-alert {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #7d1aa2;
  padding: 10px 16px;
  border-radius: 4px;
  display: block;
  margin: 10px 0;
  animation: pulse-mental 0.8s ease-in-out;
}
.effect-log {
  font-size: 8px;
  font-weight: regular;
  color: #fff;
  background-color: none;
  padding: 1px 16px;
  border-radius: 4px;
  display: block;
  margin: 10px 0;
  animation: pulse-mental 0.8s ease-in-out;
}
#eventLog > div > p > .stack{
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.job-alert {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  background-color: lightblue;
  padding: 10px 16px;
  border-radius: 4px;
  display: block;
  margin: 10px 0;
  animation: pulse-mental 0.8s ease-in-out;
}
.death-alert {
  font-size: 12px;
  font-weight: bold;
  color: #fff; 
  background-color: #333;
  padding: 10px 16px;
  border-radius: 4px;
  display: block;
  margin: 10px 0;
  animation: pulse-death 0.8s ease-in-out;
}

@keyframes pulse-addiction {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes pulse-mental {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes pulse-death {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
  20%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
  20%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes blink {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}