/* ========== CORSAIR HORIZON: BLOOD TIDE ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #d4a94e;
  --gold-dark: #9a7430;
  --parchment: #e8d9b0;
  --ink: #1a1410;
  --sea: #0b3b4d;
  --blood: #8c2b2b;
}

html, body { width: 100%; height: 100%; overflow: hidden; background: #000;
  font-family: Georgia, 'Times New Roman', serif; color: var(--parchment); }

canvas.webgl { display: block; }
.hidden { display: none !important; }

/* ---------- Overlay / Menu ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(6,20,28,.88) 0%, rgba(2,8,12,.96) 100%);
}
.menu-box {
  width: min(560px, 92vw); max-height: 92vh; overflow-y: auto;
  padding: 36px 40px; text-align: center;
  background: linear-gradient(160deg, #241c12 0%, #171008 100%);
  border: 2px solid var(--gold-dark); border-radius: 10px;
  box-shadow: 0 0 60px rgba(0,0,0,.9), inset 0 0 40px rgba(0,0,0,.5);
}
.title {
  font-size: 44px; letter-spacing: 6px; color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(212,169,78,.35);
}
.title.small { font-size: 32px; }
.subtitle { font-size: 18px; letter-spacing: 10px; color: var(--blood); margin: 6px 0 26px; }

#auth-panel input {
  display: block; width: 100%; margin: 8px 0; padding: 12px 14px;
  background: #0e0a06; color: var(--parchment);
  border: 1px solid var(--gold-dark); border-radius: 5px;
  font-family: inherit; font-size: 15px; outline: none;
}
#auth-panel input:focus { border-color: var(--gold); }

.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn {
  flex: 1; padding: 13px 18px; cursor: pointer;
  font-family: inherit; font-size: 16px; letter-spacing: 1px;
  color: var(--parchment); background: #2a2114;
  border: 1px solid var(--gold-dark); border-radius: 6px;
  transition: all .15s ease;
}
.btn:hover { background: #3a2d1a; border-color: var(--gold); transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--ink); font-weight: bold; }
.btn-gold:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.auth-status { min-height: 20px; margin-top: 10px; font-size: 13px; color: #9fb7a0; }
.auth-status.err { color: #d07070; }

.controls-help { margin-top: 26px; text-align: left; font-size: 14px; }
.controls-help h3 { color: var(--gold); letter-spacing: 3px; margin-bottom: 8px; text-align: center; }
.controls-help table { width: 100%; border-collapse: collapse; }
.controls-help td { padding: 4px 8px; border-bottom: 1px solid rgba(212,169,78,.15); }
.controls-help td:first-child { color: var(--gold); width: 90px; font-weight: bold; }
.hint { margin-top: 14px; font-size: 12.5px; opacity: .75; font-style: italic; line-height: 1.5; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }

#hud-topleft { position: absolute; top: 16px; left: 16px; width: 230px; }
.bar-wrap { display: flex; align-items: center; margin-bottom: 6px; }
.bar-label { width: 62px; font-size: 11px; letter-spacing: 2px; text-shadow: 0 1px 2px #000; }
.bar { flex: 1; height: 12px; background: rgba(0,0,0,.55);
  border: 1px solid rgba(212,169,78,.5); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; width: 100%; transition: width .3s ease; }
.bar-fill.hull   { background: linear-gradient(90deg, #7a4a2a, #b5793f); }
.bar-fill.sails  { background: linear-gradient(90deg, #8a8570, #d8d2b8); }
.bar-fill.crew   { background: linear-gradient(90deg, #3f6b46, #6fae6d); }
.bar-fill.morale { background: linear-gradient(90deg, #b08a2a, #e8c85a); }

#hud-topright { position: absolute; top: 16px; right: 200px; text-align: right;
  font-size: 15px; text-shadow: 0 1px 3px #000; }
#hud-topright > div { margin-bottom: 5px; }
#hud-gold { color: var(--gold); font-size: 18px; font-weight: bold; }
#hud-captain { color: var(--parchment); font-style: italic; opacity: .9; }

#hud-bottom { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 34px; font-size: 15px; text-shadow: 0 1px 3px #000;
  background: rgba(0,0,0,.4); padding: 8px 22px; border-radius: 20px;
  border: 1px solid rgba(212,169,78,.3); }
#val-speed { font-weight: bold; color: var(--gold); }

#compass { position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10,16,20,.8) 0%, rgba(5,8,10,.9) 100%);
  border: 2px solid var(--gold-dark); }
#compass-needle { position: absolute; left: 50%; top: 50%; width: 3px; height: 26px;
  background: linear-gradient(180deg, #d44 0%, #d44 50%, #ccc 50%, #ccc 100%);
  transform-origin: 50% 0; }
#wind-arrow { position: absolute; left: 50%; top: 50%; color: #7ec8e3; font-size: 14px;
  transform-origin: 0 50%; }

#minimap { position: absolute; top: 12px; right: 12px; border-radius: 50%;
  border: 2px solid var(--gold-dark); background: rgba(4,14,20,.85); }

#alert-box { position: absolute; top: 100px; left: 50%; transform: translateX(-50%);
  padding: 12px 28px; font-size: 17px; text-align: center;
  background: rgba(20,8,8,.85); border: 1px solid var(--blood); border-radius: 6px;
  color: #f0d8c8; text-shadow: 0 1px 2px #000; animation: pulse 1.2s ease infinite; }
@keyframes pulse { 50% { border-color: #e05050; box-shadow: 0 0 18px rgba(200,40,40,.4); } }

/* ---------- Mappa ---------- */
.map-box { text-align: center; padding: 24px;
  background: linear-gradient(160deg, #241c12, #171008);
  border: 2px solid var(--gold-dark); border-radius: 10px; }
.map-box h2 { color: var(--gold); letter-spacing: 4px; margin-bottom: 12px; }
#mapcanvas { border: 1px solid var(--gold-dark); border-radius: 6px;
  background: #0a2432; max-width: 80vw; max-height: 70vh; }

/* ---------- Porto ---------- */
.menu-box.port { width: min(620px, 94vw); }
.port-desc { font-style: italic; opacity: .8; margin-bottom: 18px; font-size: 14px; }
.port-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.port-btn { font-size: 14px; padding: 11px; }
.port-btn small { display: block; opacity: .7; margin-top: 3px; }
.port-msg { min-height: 22px; font-size: 14px; color: #9fb7a0; margin-bottom: 12px; }
.port-msg.err { color: #d07070; }

/* ---------- Classifica ---------- */
.leaderboard-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 13.5px; }
.leaderboard-table th, .leaderboard-table td { padding: 7px 8px; text-align: left;
  border-bottom: 1px solid rgba(212,169,78,.15); }
.leaderboard-table th { color: var(--gold); letter-spacing: 1px; font-size: 11px;
  text-transform: uppercase; }
.leaderboard-table td:first-child, .leaderboard-table th:first-child { width: 32px; color: var(--gold); font-weight: bold; }
.leaderboard-table tbody tr:hover { background: rgba(212,169,78,.06); }

/* ---------- Obiettivi ---------- */
.achievements-list { list-style: none; margin: 14px 0 20px; padding: 0; text-align: left;
  max-height: 50vh; overflow-y: auto; }
.ach-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border-bottom: 1px solid rgba(212,169,78,.15); }
.ach-icon { font-size: 20px; flex: 0 0 auto; }
.ach-body { display: flex; flex-direction: column; }
.ach-name { font-weight: bold; color: var(--gold); }
.ach-item.locked .ach-name { color: #9a8f78; }
.ach-desc { font-size: 12.5px; opacity: .75; }
.ach-item.locked { opacity: .55; }

#achievement-toast { position: absolute; top: 100px; right: 20px; z-index: 20;
  display: flex; flex-direction: column; gap: 2px; max-width: 280px;
  padding: 12px 16px; background: rgba(20,16,4,.92); border: 1px solid var(--gold-dark);
  border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.5); animation: pulse 1.6s ease infinite; }
.ach-toast-title { font-size: 11px; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; }
.ach-toast-name { font-size: 15px; font-weight: bold; color: #f0e2c0; }
.ach-toast-desc { font-size: 12px; opacity: .8; }

/* ---------- Game Over ---------- */
#go-text { margin: 14px 0; font-size: 16px; line-height: 1.6; }
#go-stats { margin: 14px 0 22px; font-size: 14px; color: var(--gold); line-height: 1.8; }

/* ---------- Loading ---------- */
.loader { font-size: 22px; letter-spacing: 3px; color: var(--gold); animation: pulse 1.4s infinite; }