/* ================= 七海霸业 UI · 像素风 ================= */
@import url('fonts/fusion/pixel.css');

* { margin:0; padding:0; box-sizing:border-box; border-radius:0 !important; }
html,body { width:100%; height:100%; overflow:hidden; background:#2b95a3; }
body {
  font-family:"Fusion Pixel 12px Proportional Simplified Chinese","Microsoft YaHei","PingFang SC",sans-serif;
  font-size:12px; color:#24425a; user-select:none;
}
#app { position:relative; width:100vw; height:100vh; }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }

/* ---------- 通用面板（像素：直角 + 硬阴影） ---------- */
.panel {
  background:#e9f1f7;
  border:2px solid #4a708c;
  box-shadow:4px 4px 0 rgba(10,40,55,.35);
}
h2,h3 { font-family:inherit; letter-spacing:2px; }
h2 { font-size:24px; color:#1d4e6b; margin-bottom:10px; }
h3 { font-size:12px; color:#2d6485; margin:14px 0 6px; }

button {
  font-family:inherit; cursor:pointer; color:#24506b; font-size:12px;
  background:#dce9f2;
  border:2px solid #4a708c; padding:5px 12px;
  box-shadow:3px 3px 0 rgba(10,40,55,.35);
  transition:none;
}
button:hover { background:#eaf3fa; }
button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(10,40,55,.35); }
button:disabled { opacity:.4; cursor:not-allowed; }
button.danger { background:#efb9b2; border-color:#a03a2c; color:#5c1c12; }
button.danger:hover { background:#f6d3ce; }
button.gold { background:#ffd97a; border-color:#a87f1a; color:#5c4108; }
button.gold:hover { background:#ffe4a0; }
button.small { padding:2px 7px; font-size:12px; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; pointer-events:none; z-index:10; }
#hud button, #hud canvas { pointer-events:auto; }

#hud-top-left { position:absolute; top:12px; left:12px; padding:8px 14px; font-size:12px; line-height:1.8; min-width:212px; color:#3d617a; }
#hud-top-left .money { color:#d98a12; font-size:24px; font-weight:bold; letter-spacing:1px; }
#hud-top-left .date, #hud-top-left .wind, #hud-top-left .speed { font-size:12px; }

#hud-top-right { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
#minimap { width:220px; height:165px; border:2px solid #4a708c; background:#0d2f47; box-shadow:4px 4px 0 rgba(10,40,55,.35); }
#menu-buttons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:236px; }
.mbtn { font-size:12px; padding:3px 8px; }

#hud-bottom { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); padding:8px 16px; display:flex; flex-direction:column; gap:5px; min-width:520px; }
.ship-line { display:flex; align-items:center; gap:10px; font-size:12px; color:#3d617a; }
#hud-shipname { color:#1d4e6b; font-weight:bold; min-width:90px; }
.bar { position:relative; height:12px; background:#c3d5e0; border:2px solid #7a9cb5; overflow:hidden; flex:1; }
.bar > div { height:100%; }
.bar.hp > div { background:#4caf50; }
.bar.hp.low > div { background:#c0392b; }
.bar.sail > div { background:#3d8fc0; }
.bar.rl > div { background:#e8a80c; }
.bar.rl { width:80px; flex:none; }
#hud-hptext { min-width:70px; text-align:right; }
.reload-box { display:flex; align-items:center; gap:5px; font-size:12px; color:#6b8ba3; }

#interact-prompt {
  position:absolute; bottom:112px; left:50%; transform:translateX(-50%);
  padding:8px 22px; font-size:24px; color:#1d4e6b; font-weight:bold;
  background:#f0f7fc; border:2px solid #3d8fc0;
  box-shadow:4px 4px 0 rgba(10,40,55,.35);
  pointer-events:none;
}

#toasts { position:absolute; top:80px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; z-index:60; }
.toast {
  padding:7px 18px; font-size:12px; max-width:560px; color:#24425a;
  background:#f0f7fc; border:2px solid #4a708c;
  box-shadow:4px 4px 0 rgba(10,40,55,.3);
}
.toast.good { border-color:#2e7d4f; background:#edf9ee; }
.toast.bad { border-color:#c0392b; background:#fdf0ee; }
.toast.gold { border-color:#b8860b; background:#fff8e6; color:#6b4a08; }
.toast.fade { opacity:0; transition:opacity .6s; }
@keyframes toastIn { from{opacity:0; transform:translateY(-8px)} to{opacity:1} }

#log { position:absolute; bottom:12px; left:12px; width:320px; font-size:12px; color:#1d4e6b; pointer-events:none; }
#log div { opacity:.85; margin-top:3px; }
#log div.old { opacity:.4; }

/* ---------- 侧边面板 ---------- */
#panel {
  position:absolute; top:0; right:0; width:460px; max-width:95vw; height:100%;
  background:#e9f1f7; border-left:4px solid #3d8fc0;
  z-index:40; padding:18px; overflow-y:auto;
}
#panel::-webkit-scrollbar, #modal-body::-webkit-scrollbar { width:10px; }
#panel::-webkit-scrollbar-thumb, #modal-body::-webkit-scrollbar-thumb { background:#4a708c; }
.panel-close { position:absolute; top:10px; right:12px; font-size:12px; padding:2px 10px; }

.stat-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:2px dashed rgba(61,129,150,.3); font-size:12px; color:#3d617a; }
.tag { display:inline-block; padding:1px 8px; font-size:12px; background:#dce9f2; border:2px solid #7a9cb5; color:#2d6485; margin:2px; }

.ship-card { background:#fff; border:2px solid #7a9cb5; padding:10px; margin:8px 0; box-shadow:3px 3px 0 rgba(10,40,55,.2); }
.ship-card.active { border-color:#e8963c; box-shadow:3px 3px 0 rgba(232,150,60,.4); }
.ship-card .row { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; color:#3d617a; }
.ship-card .row b { color:#1d4e6b; }
.ship-card .grow { flex:1; }

.mission-card { background:#fff; border:2px solid #7a9cb5; border-left:6px solid #4caf50; padding:10px; margin:8px 0; font-size:12px; color:#3d617a; }
.mission-card b { color:#1d4e6b; }
.mission-card .deadline { color:#c0392b; }
.mission-card.done { border-left-color:#e8a80c; opacity:.75; }

/* ---------- 模态 / 港口 ---------- */
#modal {
  position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(10,45,55,.5);
}
.modal-box {
  width:880px; max-width:96vw; max-height:92vh; display:flex; flex-direction:column;
  background:#e9f1f7;
  border:3px solid #2d6485; box-shadow:6px 6px 0 rgba(5,35,45,.5);
  overflow:hidden;
}
.modal-head {
  padding:12px 22px 10px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  background:#24506b; color:#fff;
}
.modal-head h2 { margin:0; color:#fff; }
.modal-head .sub { font-size:12px; color:#cfe3ef; }
.modal-body { padding:14px 22px; overflow-y:auto; flex:1; color:#24425a; }
.modal-foot { padding:10px 22px; border-top:2px solid #7a9cb5; display:flex; gap:10px; justify-content:flex-end; background:#dbe8f1; }

.tabs { display:flex; gap:4px; padding:8px 22px 0; background:#24506b; }
.tabs button { box-shadow:none; background:#1a3d54; color:#a8cadd; border-color:#1a3d54; }
.tabs button.on { background:#e9f1f7; color:#1d4e6b; font-weight:bold; }

table.market { width:100%; border-collapse:collapse; font-size:12px; }
table.market th { color:#2d6485; font-weight:normal; text-align:left; padding:5px 6px; border-bottom:2px solid #7a9cb5; font-size:12px; }
table.market td { padding:5px 6px; border-bottom:2px solid rgba(61,129,150,.15); }
table.market tr:hover td { background:rgba(61,143,192,.08); }
.price-up { color:#2e7d4f; } .price-down { color:#c0392b; }
.hold-qty { color:#3d8fc0; font-weight:bold; }
.trend { font-size:12px; }

.dialog-text { font-size:24px; line-height:1.6; padding:6px 4px; color:#1d4e6b; }
.choice-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.choice-list button { padding:9px; }

/* ---------- 市场头部 ---------- */
.market-head {
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding:10px 16px; margin-bottom:10px;
  background:#fff; border:2px solid #7a9cb5;
}
.big-money { font-size:24px; font-weight:bold; color:#d98a12; }
.big-money small { font-size:12px; color:#b07a2a; }
.mh-cargo { font-size:12px; color:#2d6485; font-weight:bold; }
.mh-hint { font-size:12px; color:#6b8ba3; margin-left:auto; }

/* ---------- 任务清单 ---------- */
.task-list { background:#edf9ee; border:2px solid #4caf50; padding:8px 14px; margin-bottom:12px; }
.task-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:12px; color:#2e5a3c; flex-wrap:wrap; }
.task-row span:first-child { flex:1; min-width:180px; }

/* ---------- 卡牌化市场 / 货舱 ---------- */
.good-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:10px; }
.good-card {
  position:relative;
  background:#fff;
  color:#24425a;
  border:2px solid #7a9cb5;
  padding:8px 9px 9px;
}
.good-card:hover { border-color:#3d8fc0; }
.good-card.cargo { background:#eef7ee; border-color:#5d9c68; }
.good-card.sold-out { opacity:.55; filter:grayscale(.6); }
.gc-top { display:flex; align-items:center; gap:7px; }
.gc-icon { font-size:24px; }
.gc-name { font-weight:bold; font-size:12px; color:#1d4e6b; }
.gc-price { font-size:12px; margin:3px 0 1px; color:#3d617a; }
.gc-price b { font-size:24px; color:#1d4e6b; }
.gc-unit { font-size:12px; color:#5c8098; }
.gc-spark { display:block; width:86px; height:26px; margin:2px 0; }
.gc-stock { font-size:12px; color:#5c8098; }
.gc-stock.out { color:#c0392b; font-weight:bold; }
.gc-btns { display:flex; gap:4px; margin-top:6px; }
.gc-btns .small { font-size:12px; padding:2px 6px; background:#eaf3f9; border-color:#7a9cb5; color:#24506b; box-shadow:2px 2px 0 rgba(10,40,55,.25); }
.gc-btns .small:hover { background:#d8eaf5; }
.gc-btns .small.danger { background:#f6d3ce; border-color:#a03a2c; color:#5c1c12; }
.gc-hold { font-size:12px; color:#2e7d4f; margin-top:4px; font-weight:bold; }
.gc-qty { font-size:24px; font-weight:bold; margin:2px 0 4px; color:#2d6485; }

.badge { display:inline-block; font-size:12px; padding:0 5px; margin-left:4px; vertical-align:1px; }
.badge.cheap { background:#2e7d4f; color:#fff; }
.badge.dear { background:#c0392b; color:#fff; }
.badge.event { background:#e8963c; color:#fff; }
.event-tag { border-color:#c0392b !important; color:#fff !important; background:#c0392b !important; }

/* ---------- 情报贩子 ---------- */
.intel-box { background:#eaf3f9; border:2px solid #9dbdd2; padding:8px 12px; }
.intel-item { font-size:12px; padding:6px 2px; border-bottom:2px dashed rgba(61,129,150,.3); line-height:1.6; color:#3d617a; }
.intel-item:last-child { border-bottom:none; }

/* ---------- 船队拖拽 ---------- */
.grip { cursor:grab; color:#5c8098; font-size:12px; padding:0 2px; }
.ship-card[draggable="true"] { cursor:grab; }
.ship-card.dragging { opacity:.45; border-style:dashed; }
.ship-card.drag-over { border-color:#e8963c; box-shadow:0 0 0 3px rgba(232,150,60,.4); }

/* ---------- 钓鱼 ---------- */
#fish-overlay { position:absolute; inset:0; z-index:55; display:flex; align-items:center; justify-content:center; background:rgba(10,45,55,.5); }
.fish-box { width:340px; padding:22px; text-align:center; background:#e9f1f7; border:3px solid #3d8fc0; box-shadow:6px 6px 0 rgba(5,35,45,.5); }
.fish-box h3 { color:#1d4e6b; }
.fish-track { position:relative; width:56px; height:240px; margin:14px auto; background:#c3d5e0; border:2px solid #7a9cb5; overflow:hidden; }
.fish-zone { position:absolute; left:0; width:100%; background:rgba(76,175,80,.35); border-top:2px solid #4caf50; border-bottom:2px solid #4caf50; }
.fish-marker { position:absolute; left:0; width:100%; height:10px; background:#e8963c; }
.fish-progress { display:flex; gap:6px; justify-content:center; margin-top:10px; }
.fish-progress span { font-size:24px; opacity:.25; }
.fish-progress span.on { opacity:1; }
.fish-hint { color:#6b8ba3; font-size:12px; margin-top:8px; }

/* ---------- 海图 ---------- */
#map-canvas { display:block; margin:0 auto; border:2px solid #7a9cb5; background:#0d2f47; }
.map-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:12px; justify-content:center; }
.map-legend .tag b { margin-right:4px; }

/* ---------- 标题画面 ---------- */
#title-screen {
  position:absolute; inset:0; z-index:100;
  background:linear-gradient(180deg, #7fd4c8 0%, #3cc0ad 45%, #2a9a8a 100%);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.title-inner h1 { font-size:60px; color:#fff; letter-spacing:14px; text-shadow:4px 4px 0 rgba(10,70,70,.5); }
.title-ship { font-size:72px; animation:rock 3.4s ease-in-out infinite; display:inline-block; }
@keyframes rock { 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(6deg) translateY(-8px)} }
.subtitle { color:#e5fbf6; margin:6px 0 34px; letter-spacing:4px; }
.title-buttons { display:flex; flex-direction:column; gap:14px; align-items:center; margin-bottom:26px; }
.tbtn { min-width:260px; font-size:24px; padding:10px 20px; }
.tbtn.big { font-size:24px; padding:13px 26px; border-color:#a87f1a; background:#ffd97a; color:#5c4108; font-weight:bold; }
.tbtn.big:hover { background:#ffe4a0; }
.title-tip { color:#d5f5ef; max-width:560px; line-height:1.8; font-size:12px; }
.title-ver { color:#b5e8de; font-size:12px; margin-top:26px; }

.hint-kbd { display:inline-block; padding:1px 7px; background:#fff; border:2px solid #9dbdd2; font-size:12px; color:#2d6485; }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; font-size:12px; color:#3d617a; }
.help-grid div { padding:3px 0; }
#panel p { color:#6b8ba3; }