/* style.css — Pirate Plunder */
:root {
  --bg: #0e1a2b;
  --panel: rgba(14, 26, 43, 0.82);
  --panel-solid: #16263f;
  --border: rgba(255,255,255,0.12);
  --text: #f0e8d8;
  --muted: #9fb0c4;
  --accent: #f5c451;
  --accent2: #e0654a;
  --good: #5fcf80;
  --radius: 14px;
  --font-display: ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#e8eef5; --panel:rgba(255,255,255,0.9); --panel-solid:#ffffff; --text:#1a2638; --muted:#5a6b80; --border:rgba(0,0,0,0.12); }
}
html[data-theme="light"] {
  --bg:#e8eef5; --panel:rgba(255,255,255,0.92); --panel-solid:#ffffff; --text:#1a2638; --muted:#5a6b80; --border:rgba(0,0,0,0.12);
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; overflow:hidden; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
#game { display:block; position:fixed; inset:0; width:100%; height:100%; }

.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
.hud-top {
  position:absolute; top:12px; left:12px; right:12px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.hud-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  display:flex; align-items:center; gap:8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  font-weight: 600;
}
.hud-card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.hud-card .val { font-size: 18px; font-weight: 700; color: var(--text); }
.hud-card .dot { width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 0 8px currentColor; }
.hud-card.gold .val { color: var(--accent); }
.hud-card.health { flex:1; max-width:240px; }
.bar { width:120px; height:10px; background:rgba(255,255,255,0.12); border-radius:6px; overflow:hidden; }
.bar-fill { height:100%; width:100%; background:linear-gradient(90deg, #e0473e, #f5c451, #5fcf80); transition:width 0.3s; border-radius:6px; }

.hud-right { position:absolute; top:12px; right:12px; }
#minimap {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

.dock-prompt {
  position:absolute; bottom: 110px; left:50%; transform:translateX(-50%);
  background: var(--panel); border:1px solid var(--border);
  padding: 10px 18px; border-radius: 30px;
  font-size: 14px; font-weight:600;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  animation: bob 1.6s ease-in-out infinite;
}
.dock-prompt b { color: var(--accent); }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-4px);} }

.toast {
  position:absolute; top: 70px; left:50%; transform:translateX(-50%);
  background: var(--panel-solid); color: var(--text);
  padding: 10px 20px; border-radius: 24px;
  border:1px solid var(--border);
  font-weight:600; font-size:14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  animation: toastIn 0.25s ease;
}
@keyframes toastIn { from{opacity:0; transform:translateX(-50%) translateY(-8px);} to{opacity:1; transform:translateX(-50%) translateY(0);} }

/* ---------- Start screen ---------- */
.start-screen {
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center, rgba(14,26,43,0.7), rgba(14,26,43,0.95));
  backdrop-filter: blur(4px);
  padding: 20px;
}
.start-card {
  background: var(--panel-solid);
  border:1px solid var(--border);
  border-radius: 22px;
  padding: 36px 32px;
  max-width: 460px; width:100%;
  text-align:center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.start-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px; margin:0 0 4px;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.start-card .tag { color: var(--muted); margin:0 0 22px; font-size:15px; letter-spacing:0.1em; text-transform:uppercase; }
.start-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:18px; text-align:left;
}
.how {
  background: rgba(255,255,255,0.05);
  border:1px solid var(--border);
  padding:10px 12px; border-radius:10px;
  font-size:13px; color: var(--text);
}
.how b { color: var(--accent); font-weight:700; }
.start-tip { color: var(--muted); font-size:14px; line-height:1.5; margin:0 0 22px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: inherit; font-weight:700;
  border:none; cursor:pointer;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 15px;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  pointer-events:auto;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn.primary {
  background: linear-gradient(180deg, #f5c451, #e0a93a);
  color: #2a1a05;
  box-shadow: 0 6px 18px rgba(245,196,81,0.35);
  font-size: 18px; padding: 14px 36px;
}
.btn.primary:hover { box-shadow: 0 8px 24px rgba(245,196,81,0.5); }
.btn.ghost {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border:1px solid var(--border);
}
.btn.ghost:hover { background: rgba(255,255,255,0.14); }
.btn.sell {
  background: rgba(95,207,128,0.18);
  color: var(--good);
  border:1px solid rgba(95,207,128,0.4);
}
.btn.sell:hover { background: rgba(95,207,128,0.3); }
.btn.small { padding: 7px 14px; font-size:13px; border-radius:9px; }

/* ---------- Trade modal ---------- */
.modal {
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  background: rgba(8,16,28,0.6);
  backdrop-filter: blur(6px);
  padding:16px;
  pointer-events:auto;
}
.modal-card {
  background: var(--panel-solid);
  border:1px solid var(--border);
  border-radius: 20px;
  width:100%; max-width:520px; max-height:90vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
  animation: modalIn 0.25s ease;
}
@keyframes modalIn { from{opacity:0; transform:translateY(20px) scale(0.97);} to{opacity:1; transform:none;} }
.modal-head {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 22px 24px 14px;
  border-bottom:1px solid var(--border);
}
.modal-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  margin:0; font-size:32px; color: var(--accent);
  letter-spacing:0.02em;
}
.port-sub { margin:2px 0 0; color:var(--muted); font-size:13px; }
.x-btn {
  background:rgba(255,255,255,0.08); border:1px solid var(--border);
  color:var(--text); width:34px; height:34px; border-radius:10px;
  cursor:pointer; font-size:16px; pointer-events:auto;
}
.x-btn:hover { background:rgba(255,255,255,0.16); }
.modal-stats {
  display:flex; gap:24px; padding:14px 24px;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.modal-stats b { color: var(--accent); font-size:18px; margin-left:6px; }
.muted { color: var(--muted); }
.goods-list { padding:12px 16px; overflow-y:auto; flex:1; }
.good-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition: background 0.15s;
}
.good-row:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }
.good-icon {
  width:34px; height:34px; border-radius:9px;
  border:1px solid rgba(0,0,0,0.25);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2);
  flex-shrink:0;
}
.good-info { flex:1; }
.good-name { font-weight:700; font-size:15px; }
.good-price { font-size:13px; color: var(--accent); font-weight:600; }
.good-owned { font-weight:700; font-size:16px; color:var(--text); min-width:36px; text-align:right; }
.good-actions { display:flex; gap:6px; }
.modal-foot { padding:14px 24px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; }

/* ---------- Mobile controls ---------- */
.mobile-controls {
  position:fixed; inset:0; z-index:20; pointer-events:none;
}
.mc-left, .mc-right {
  position:absolute; bottom:18px;
  display:flex; gap:10px;
  pointer-events:auto;
}
.mc-left { left:18px; }
.mc-right { right:18px; flex-wrap:wrap; max-width:170px; justify-content:flex-end; }
.mc-btn {
  width:62px; height:62px;
  border-radius:50%;
  background: var(--panel);
  border:1px solid var(--border);
  color: var(--text);
  font-size:22px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  cursor:pointer;
  touch-action: none;
  transition: transform 0.1s, background 0.1s;
}
.mc-btn:active { transform: scale(0.92); background: rgba(245,196,81,0.25); }
.mc-btn.small { width:50px; height:50px; font-size:18px; }
.mc-btn.fire {
  background: linear-gradient(180deg, #e0654a, #c04030);
  color:#fff; border-color: rgba(255,255,255,0.2);
  font-size:14px;
}
.mc-btn.dock {
  background: linear-gradient(180deg, #f5c451, #e0a93a);
  color:#2a1a05; font-size:14px;
}

@media (max-width: 600px) {
  .start-card h1 { font-size:40px; }
  .start-grid { grid-template-columns:1fr; }
  .hud-card .val { font-size:15px; }
  .bar { width:80px; }
  #minimap { width:100px; height:100px; }
  .modal-head h2 { font-size:26px; }
}

@media (min-width: 900px) {
  .mobile-controls { display:none; }
}