/* General page setup */
body {
  margin: 0;
  padding: 0;
  font-family: 'Georgia', serif;
  background-color: #f5f0e6; /* parchment background */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Game container holds map + UI panel side by side */
#game-container {
  display: flex;
  width: 90%;
  height: 90%;
  border: 4px solid #8b5e3c;
  background-color: #fffdf6;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

#port {
    flex: 3;
    position: relative;
    background: magenta;
    background-size: cover;
    border-right: 3px solid #8b5e3c;
}

#port-actions {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border: 2px solid #8b5e3c;
    border-radius: 8px;
}

/* Map area */
#map {
    display: none;
    flex: 3;
    position: relative;
    background: url("assets/images/map.png") no-repeat center center;
    background-size: cover;
    border-right: 3px solid #8b5e3c;
}

/* Ship icon */
#ship {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  transform: translate(-50%, -50%);
  pointer-events: none; /* So clicks go through to map/ports */
}

/* Port markers */
.port {
  position: absolute;
  padding: 4px 8px;
  background: rgba(64, 77, 255, 0.8);
  color:black;
  border: 2px solid #8b5e3c;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.port:hover {
  background: #ffe6a7;
}

/* UI Panel */
#ui-panel {
  flex: 1;
  padding: 10px;
  background-color: #faf3dd;
  color: black;
  overflow-y: auto;
}

#ui-panel h2 {
  margin-top: 0;
  font-family: 'Trebuchet MS', serif;
  font-size: 18px;
  text-align: center;
  border-bottom: 2px solid #8b5e3c;
  padding-bottom: 4px;
}

#log {
  height: 60%;
  padding: 8px;
  background: #fffdf6;
  border: 1px solid #8b5e3c;
  margin-bottom: 10px;
  overflow-y: auto;
  font-size: 14px;
}

#inventory, #ship-status, #options {
  display: none; /* Hidden by default, shown when tab is active */
  height: 60%;
  padding: 8px;
  background: #fffdf6;
  border: 1px solid #8b5e3c;
  margin-bottom: 10px;
  overflow-y: auto;
  font-size: 14px;
}

#actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

button {
  padding: 8px;
  font-size: 14px;
  border: 2px solid #8b5e3c;
  background: #ffe6a7;
  cursor: pointer;
  color: black;
  transition: background 0.2s ease-in-out;
}

button:hover {
  background: #ffd07f;
}

.log-entry {
  margin-bottom: 6px;
  border-bottom: 1px solid #ddd;
  padding: 4px;
  font-size: 13px;
}

.log-entry:hover {
    background: #f0e6d2;
}