/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #1a1a1a;
  color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* #character-creation{
  display: block;  
} */

#character-creation {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center-align content */
  text-align: center; /* Ensures text elements are centered */
  /* border: solid red 1px; */
}

#stats-display{
  /* display: block;   */
  text-align: left;
}


/* Main game container that maintains aspect ratio */
#game-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  max-width: 650px;
  max-height: calc(650px * 1.5);
  border: 2px solid #444;
  background-color: #333;
  padding: 10px;
  border-radius: 8px;
  overflow: hidden;
}

/* Title Panel */
#title-panel {
  width: 100%;
  background-color: #222;
  border: 2px solid #555;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
}

#title-image {
  width: 100%;
  max-width: 120px;
}

/* Stats Panel - Takes 20% of the container height */
#stats-panel {
  width: 100%;
  height: 25%;
  background-color: #222;
  border: 2px solid #555;
  padding: 10px;
  color: #eee;
  font-size: 0.9em;
  border-radius: 8px;
}

#character-stats {
  list-style: none; /* Removes bullets */
   /*padding: 0; Removes default padding */
  /* margin: 0; Adjusts spacing */
}

#stats-panel h2 {
  font-size: 1.1em;
  color: #ffcc00;
  margin-bottom: 5px;
}

#stats-list {
  list-style: none;
  line-height: 1.5em;
}

/* Main display area - Takes 60% of the container height */
#main-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 55%;
  overflow: hidden;
}

#view-canvas {
  background-color: #000;
  border: 2px solid #777;
  width: 100%;
  height: 100%;
}

/* Text Pane - Takes remaining 20% of the container height */
#text-pane {
  width: 100%;
  height: 20%;
  background-color: #ffcc00;
  border: 2px solid #555;
  padding: 10px;
  /* overflow-y: auto; */
  font-size: 0.9em;
  border-radius: 8px;

  overflow: hidden; /* Prevents unwanted scrollbars */
  display: flex;
  flex-direction: column;
}

#log {
  line-height: 1.5em;
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-y:auto;
  max-height: 100%; /* Ensure it doesn’t extend beyond parent */
  box-sizing: border-box; /* Prevents overflow caused by padding/margins */
  padding-bottom: 2px; /* Adds slight padding to keep last line visible */
  margin: 0; /* Prevents unwanted spacing */
}

#log p {
   margin: 0; /*Ensures no extra spacing between log entries */
  padding: 2px 4px; /*Adds some padding for readability*/
}

#log::-webkit-scrollbar {
  width: 8px; /* Keeps scrollbar size reasonable */
}

#log::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

#log::-webkit-scrollbar-track {
  background: transparent;
}

/* Responsive Layout for Larger Screens */
@media (min-width: 768px) {
  #game-container {
      height: 90vh;
      width: 50vw;
  }
}