/* The front page's sea (public/sea/sea.js): the map fills the window under
   the crew bar, with a few bits of page floating over it. The list of every
   app slides up over it as a sheet. Base styles come from /shared.css. */

body.at-sea { overflow: hidden; overscroll-behavior: none; }
.sea { position: fixed; inset: 0; z-index: 1; background: #1b5f94; }
#sea-view { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sea-hud { position: absolute; inset: 0; pointer-events: none; }
.sea-hud > * { pointer-events: auto; }

/* Top: the name and your wallet on the left, buttons and the little map on the right. */
.sea-bar {
  position: absolute; top: calc(var(--top-bar-h, 0px) + 10px); left: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.sea-title {
  font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--gold);
  text-shadow: 0 0 14px rgba(124, 196, 255, .5), 0 3px 0 var(--red-dark), 0 4px 14px rgba(0,0,0,.9);
}
.sea-bar .who { padding: 4px 8px; border-radius: 12px; background: rgba(8, 12, 26, .72); }
.sea-side {
  position: absolute; top: calc(var(--top-bar-h, 0px) + 10px); right: 12px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.sea-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sea-btn {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border-radius: 999px;
  background: rgba(8, 12, 26, .82); border: 1px solid rgba(246, 195, 67, .5); color: var(--text); font-weight: 800; font-size: .9rem;
}
.sea-btn:hover { border-color: var(--gold); }
.sea-btn.ready { border-color: var(--gold); box-shadow: 0 0 14px rgba(246, 195, 67, .6); animation: sea-glow 1.4s ease-in-out infinite; }
.sea-btn.done { border-color: #5fd36a; }
@keyframes sea-glow { 50% { box-shadow: 0 0 22px rgba(246, 195, 67, .9); } }
.mini-wrap { position: relative; }
#sea-mini {
  display: block; width: 140px; height: 140px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(246, 195, 67, .55); box-shadow: 0 6px 18px rgba(0,0,0,.45); background: #0a1f3d;
}
.zoom { position: absolute; left: -6px; bottom: -4px; display: flex; flex-direction: column; gap: 4px; }
.zoom button { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: rgba(8, 12, 26, .85); font-weight: 900; }

/* Bottom: the island you're beside, what water you're in, and how to sail. */
.sea-bottom {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.sea-bottom > * { pointer-events: auto; }
.dock-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; width: 100%;
  padding: 12px 14px; border-radius: 14px; background: rgba(8, 12, 26, .92); border: 2px solid var(--gold);
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 20px rgba(246, 195, 67, .25); animation: dock-in .2s ease-out;
}
@keyframes dock-in { from { transform: translateY(10px); opacity: 0; } }
.dock-icon { grid-row: span 3; font-size: 2.4rem; line-height: 1; }
.dock-name { font-family: var(--display); font-size: 1.5rem; color: var(--gold); line-height: 1.1; }
.dock-desc { font-size: .85rem; color: var(--muted); }
.dock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dock-here:empty { display: none; }
.dock-row .primary { margin-left: auto; padding: 8px 16px; font-weight: 800; }
.sea-zone-row { display: flex; align-items: center; gap: 8px; }
.sea-zone {
  padding: 6px 12px; border-radius: 999px; background: rgba(8, 12, 26, .82); border: 1px solid var(--border);
  font-weight: 800; font-size: .9rem; white-space: nowrap;
}
.sea-zone[data-zone="reef"] { border-color: #5fe0c8; color: #a8f5e6; }
.sea-zone[data-zone="ocean"] { border-color: #7cc4ff; color: #cfe8ff; }
.sea-zone[data-zone="abyss"] { border-color: #8d7cff; color: #cfc6ff; }
.sea-zone-row button { height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 800; }
.sea-help { margin: 0; font-size: .78rem; color: rgba(230, 238, 255, .8); text-shadow: 0 1px 4px #000; text-align: center; }
/* Phones: room for the chat and online buttons in the bottom corners. */
@media (max-width: 700px) {
  .sea-bottom { bottom: 80px; }
  .sea-title { font-size: 1.5rem; }
  #sea-mini { width: 104px; height: 104px; }
  .sea-btn .lbl { display: none; }
  .sea-help { display: none; }
  .dock-card { padding: 8px 12px; }
  .dock-icon { font-size: 1.8rem; grid-row: span 2; }
  .dock-name { font-size: 1.25rem; }
  .dock-desc { display: none; }
}
@media (hover: none) { .sea-help .keys { display: none; } }
@media (prefers-reduced-motion: reduce) { .sea-btn.ready, .dock-card { animation: none; } }

/* Every app as a list: a sheet over the map. */
.sheet {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); top: calc(var(--top-bar-h, 0px) + 8px); bottom: 0;
  width: min(760px, 100vw); overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 90px;
  background: rgba(8, 12, 26, .96); border: 1px solid rgba(246, 195, 67, .35); border-bottom: none; border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.6); animation: sheet-in .25s ease-out;
}
@keyframes sheet-in { from { transform: translate(-50%, 40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-head {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 -16px 14px; padding: 12px 16px; background: rgba(8, 12, 26, .98); border-bottom: 1px solid var(--border);
}
.sheet-head h2 { margin: 0; font-size: 1.6rem; color: var(--gold); }
.sheet-head button { font-weight: 800; }
.sheet .list-pref { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); margin: -4px 0 14px; }