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

html, body { width: 100%; height: 100%; overflow: hidden; background: #0b1d26; }
body { font-family: "Courier New", monospace; color: #e8e4d8; }

#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#ui { position: absolute; inset: 0; pointer-events: none; }
#ui .screen, #ui button, #ui input { pointer-events: auto; }

.hidden { display: none !important; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: rgba(6, 20, 28, 0.82);
}

.title { font-size: 64px; letter-spacing: 6px; color: #d6c186; text-shadow: 3px 3px 0 #21414d; }
.title .tide { color: #7fc4cf; }
.tagline { color: #9db4ac; }

.panel {
  background: #102a35; border: 3px solid #2d5364; padding: 28px;
  display: flex; flex-direction: column; gap: 12px; min-width: 320px;
}
.panel h2 { color: #d6c186; }
.panel .row { display: flex; gap: 8px; }
.panel .hint { color: #7d94a0; font-size: 12px; }

input[type=text], input[type=password] {
  padding: 10px; font: inherit; background: #0b1d26; color: #e8e4d8;
  border: 2px solid #2d5364; outline: none;
}
input:focus { border-color: #7fc4cf; }

button.big {
  padding: 12px 28px; font: inherit; font-weight: bold; font-size: 18px;
  background: #d6c186; color: #10262e; border: 3px solid #8f7f52; cursor: pointer;
}
button.big:hover { background: #e8d49a; }
button.big.alt { background: #7fc4cf; border-color: #4d7f88; }
button.big.alt:hover { background: #93d6e0; }

.error { color: #e88a8a; min-height: 1.2em; font-size: 14px; }

/* HUD */
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%);
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: rgba(232, 228, 216, 0.85);
}
#crosshair::before { left: 7px; top: 0; width: 2px; height: 16px; }
#crosshair::after { left: 0; top: 7px; width: 16px; height: 2px; }

#hud-top-left { position: absolute; top: 12px; left: 12px; }
#hearts { font-size: 22px; color: #e88a8a; text-shadow: 2px 2px 0 #21414d; }

#hud-top-right { position: absolute; top: 12px; right: 12px; }
#pearls { display: flex; align-items: center; gap: 8px; font-size: 22px; text-shadow: 2px 2px 0 #21414d; }
.pearl-icon {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 5px 5px, #fdfbf1, #cfd8e8 60%, #9aa8c0);
  display: inline-block;
}

#chat-log {
  position: absolute; left: 12px; bottom: 96px; max-width: 44%;
  font-size: 14px; text-shadow: 1px 1px 0 #10262e;
}
#chat-log .line { margin-top: 2px; opacity: 0.95; }
#chat-log .line.old { opacity: 0.35; }
#chat-input {
  position: absolute; left: 12px; bottom: 64px; width: 44%;
}

#hotbar {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 4px;
}
.slot {
  width: 48px; height: 48px; border: 3px solid #2d5364; background: rgba(11, 29, 38, 0.72);
  position: relative; image-rendering: pixelated;
}
.slot.selected { border-color: #d6c186; }
.slot .icon {
  position: absolute; inset: 5px;
  background-image: url("/assets/atlas.png");
  background-size: 1600% 1600%;
  image-rendering: pixelated;
}
.slot .count {
  position: absolute; right: 3px; bottom: 1px; font-size: 12px; font-weight: bold;
  text-shadow: 1px 1px 0 #10262e;
}

/* Pause menu (Esc): inventory + settings tabs */
.pause-panel { max-width: 560px; }

.tabs { display: flex; gap: 8px; }
button.tab {
  padding: 8px 18px; font: inherit; font-weight: bold; cursor: pointer;
  background: #0b1d26; color: #9db4ac; border: 2px solid #2d5364;
}
button.tab.active { background: #2d5364; color: #e8e4d8; border-color: #7fc4cf; }

#inv-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
  max-height: 220px; overflow-y: auto;
  padding: 6px; background: rgba(11, 29, 38, 0.72); border: 2px solid #2d5364;
}
#inv-hotbar { display: flex; gap: 4px; }
#inv-grid .slot, #inv-hotbar .slot { cursor: pointer; }
#inv-grid .slot:hover, #inv-hotbar .slot:hover { border-color: #7fc4cf; }
.slot.picked { border-color: #d6c186; background: rgba(214, 193, 134, 0.18); }

.setting { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.setting input[type=range] { flex: 1; accent-color: #7fc4cf; }
.setting input[type=checkbox] { width: 18px; height: 18px; accent-color: #7fc4cf; }
.setting input[type=text], .setting input[type=password] {
  flex: 1; min-width: 0; padding: 6px 8px; font-size: 14px;
}
.sep { border: none; border-top: 2px solid #2d5364; margin: 4px 0; }
#account-msg { align-self: center; }
#account-msg.error { color: #e88a8a; }

#debug {
  position: absolute; top: 60px; left: 12px; font-size: 12px; color: #b7e3a8;
  background: rgba(6, 20, 28, 0.6); padding: 6px 8px; white-space: pre;
}

#overlay-msg {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%);
  background: rgba(16, 42, 53, 0.92); border: 3px solid #2d5364;
  padding: 14px 26px; font-size: 18px;
}

/* Pickup toast: big center-screen banner for prize payouts. */
#toast {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  background: rgba(6, 20, 28, 0.75);
  color: #ffd75e;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 6px;
  pointer-events: none;
  transition: opacity 0.5s;
  z-index: 5;
}