:root {
  color-scheme: dark;
  --ink: #eafcff;
  --muted: #8fb6c2;
  --aqua: #48f4df;
  --cyan: #28bfe8;
  --gold: #ffc857;
  --danger: #ff536b;
  --panel: rgba(5, 24, 38, .76);
  --line: rgba(109, 225, 235, .2);
}

/* Cargo Seas v0.28.4: responsive input, collision feedback and working harbors. */
html, body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
.ocean-app {
  position: fixed !important;
  inset: 0;
  width: 100dvw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.phase-badge, .coordinate-chip, .world-event { display: none !important; }
.world-event[hidden] { display: none !important; }
.identity-card { width: auto; min-width: 300px; padding: 8px 10px; gap: 8px; }
.identity-card .portrait { width: 42px; height: 42px; }
.identity-copy { min-width: 108px; }
.mana-pill, .cargo-pill {
  min-width: 64px;
  border-left: 1px solid rgba(117,232,223,.18);
  padding-left: 9px;
  text-align: right;
}
.mana-pill small, .cargo-pill small { display: block; color: #87a9b4; font: 800 7px/1.3 ui-monospace, monospace; }
.mana-pill b, .cargo-pill b { color: #fff; font: 1000 15px/1.2 ui-monospace, monospace; }
.cargo-pill { position: relative; }
.cargo-pill b { color: #ffd65a; text-shadow: 0 0 calc(3px + var(--cargo-glow, 0px)) rgba(255,198,45,.9); }
.cargo-pill[data-loaded="true"]::after { content: ""; position: absolute; inset: -8px; pointer-events: none; border-radius: 50%; box-shadow: 0 0 var(--cargo-glow, 12px) rgba(255,202,53,.65); }
.chat-panel, .chat-panel.collapsed {
  height: 194px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.chat-panel header, .chat-channels, .chat-reply { display: none !important; }
.chat-log {
  height: 142px !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 20%, #000 42%);
}
.chat-message { background: transparent !important; border: 0 !important; padding: 2px 0 !important; text-shadow: 0 2px 5px #00121b, 0 0 3px #00121b; }
.chat-panel form { height: 44px; padding: 2px 7px 5px; pointer-events: auto; touch-action: manipulation; }
.chat-panel input { background: rgba(1,17,29,.68); backdrop-filter: blur(8px); touch-action: auto; }
.chat-panel form button { min-width: 42px; }
.dock-prompt {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: max(26px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 15px;
  border-color: rgba(94,244,187,.4);
}
.dock-prompt[hidden] { display: none; }
.dock-prompt small, .dock-prompt strong, .dock-prompt span { display: block; }
.dock-prompt small { color: #76efba; font: 900 8px/1 ui-monospace, monospace; letter-spacing: .13em; }
.dock-prompt strong { margin-top: 3px; font-size: 12px; }
.dock-prompt span { color: #8caeb7; font-size: 9px; }
.dock-prompt button { border: 0; border-radius: 11px; padding: 12px 14px; color: #05201c; background: linear-gradient(135deg,#55eadc,#75eda5); font-weight: 1000; cursor: pointer; }
.fishing-session {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 20%;
  translate: -50% 0;
  width: 230px;
  padding: 12px;
  text-align: center;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.75));
}
.fishing-session[hidden] { display: none; }
.fishing-session h2 { margin: 4px 0; font-size: 20px; }
.fishing-session p { margin: 0 0 6px; }
.fishing-target {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 6px;
  border: 3px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: conic-gradient(from -20deg, #ffd52f 0 36deg, rgba(3,28,40,.88) 36deg 360deg);
  box-shadow: inset 0 0 0 13px rgba(4,25,36,.88), 0 0 20px rgba(255,207,44,.25);
  cursor: crosshair;
}
.fishing-target:disabled { opacity: .55; cursor: wait; }
.fishing-target span { position: absolute; left: 52px; top: 7px; width: 4px; height: 48px; transform-origin: 2px 49px; rotate: var(--needle-angle, 0deg); background: #fff; border-radius: 4px; box-shadow: 0 0 6px #fff; }
.fishing-target b { position: absolute; inset: 0; display: grid; place-items: center; color: #ffd72f; font: 1000 13px/1 Impact,sans-serif; }
.fishing-session .fishing-actions { display: block; }

.fishing-session .fishing-actions button:last-child { min-height: 28px; padding: 6px 12px; }
.fishing-session > em { margin-top: 4px; }
body.cannon-targeting canvas#oceanCanvas { cursor: crosshair; }

@media (max-width: 700px) {
  .identity-card { min-width: 0; width: calc(100vw - 20px); }
  .identity-copy { flex: 1; }
  .mana-pill, .cargo-pill { min-width: 52px; }
  .utility-actions { top: 75px; }
  .chat-panel { width: calc(100vw - 122px) !important; }
  .dock-prompt { bottom: 128px; max-width: calc(100vw - 28px); }
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #03101a;
  color: var(--ink);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

button,
input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.ocean-app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #082d42;
}

#oceanCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.glass {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(11, 39, 55, .89), rgba(3, 19, 31, .66));
  box-shadow: 0 16px 42px rgba(0, 7, 17, .32), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(15px) saturate(1.2);
  -webkit-backdrop-filter: blur(15px) saturate(1.2);
}

.identity-card {
  position: absolute;
  z-index: 8;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(365px, calc(100vw - 32px));
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 18px;
}

.portrait {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  height: 50px;
  border-radius: 15px;
  border: 2px solid rgba(255, 255, 255, .7);
  color: #052031;
  font: 900 23px/1 Impact, sans-serif;
  background: linear-gradient(145deg, #f7f09a, #42dfdf 58%, #2888d8);
  box-shadow: 0 0 22px rgba(72, 244, 223, .32);
}

.identity-copy { flex: 1; min-width: 0; }

.buff-hud {
  position: absolute;
  z-index: 8;
  top: max(96px, calc(env(safe-area-inset-top) + 80px));
  left: max(16px, env(safe-area-inset-left));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}

.buff-hud[hidden] { display: none; }

.buff-chip {
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  column-gap: 7px;
  min-width: 112px;
  padding: 6px 9px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--buff-color) 75%, white);
  border-radius: 12px;
  color: #f4ffff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--buff-color) 24%, #061b2a), rgba(3,16,27,.9));
  box-shadow: 0 0 16px color-mix(in srgb, var(--buff-color) 42%, transparent);
  backdrop-filter: blur(12px);
}

.buff-chip i {
  grid-row: 1 / 3;
  align-self: center;
  font: normal 20px/1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  filter: drop-shadow(0 0 6px var(--buff-color));
}

.buff-chip b { font: 950 9px/1.1 ui-monospace, monospace; letter-spacing: .06em; }
.buff-chip time { color: var(--buff-color); font: 1000 14px/1 ui-monospace, monospace; }
.utility-actions { transition: top .22s ease; }
body.buffs-active .utility-actions { top: 162px; }

@media (max-width: 700px) {
  .buff-hud { top: max(90px, calc(env(safe-area-inset-top) + 74px)); width: 270px; }
  .buff-chip { min-width: 82px; grid-template-columns: 22px auto; padding: 5px 7px; }
  .buff-chip b { max-width: 68px; overflow: hidden; text-overflow: ellipsis; }
  body.buffs-active .utility-actions { top: 150px; }
}
.identity-copy strong { display: block; letter-spacing: .08em; font-size: 13px; }
.identity-copy > span { display: block; margin-top: 3px; color: var(--muted); font: 700 9px/1.2 ui-monospace, monospace; letter-spacing: .12em; }

.hud-hp {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(0, 5, 12, .58);
}

.hud-hp i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24c4cb, #5fffe2);
  box-shadow: 0 0 12px #32f2df;
  transition: width .25s ease;
}

.mana-pill {
  flex: 0 0 auto;
  padding-left: 11px;
  border-left: 1px solid var(--line);
  text-align: right;
}

.mana-pill small { display: block; color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.mana-pill b { display: block; margin-top: 3px; font: 900 17px/1 ui-monospace, monospace; }

.phase-badge {
  position: absolute;
  z-index: 7;
  top: max(17px, env(safe-area-inset-top));
  left: 50%;
  translate: -50% 0;
  padding: 9px 13px;
  border-radius: 99px;
  color: #b9d7df;
  font: 800 9px/1 ui-monospace, monospace;
  letter-spacing: .13em;
  white-space: nowrap;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 10px var(--aqua);
  animation: pulse 1.4s ease-in-out infinite;
}

.phase-badge[data-connection="reconnecting"] .live-dot,
.phase-badge[data-connection="connecting"] .live-dot {
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}

.phase-badge[data-connection="disconnected"] .live-dot,
.phase-badge[data-connection="expired"] .live-dot {
  background: #ff6578;
  box-shadow: 0 0 10px #ff6578;
}

.world-event {
  position: absolute;
  z-index: 7;
  top: 65px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 290px;
  padding: 9px 14px 9px 9px;
  border-color: rgba(255, 83, 107, .32);
  border-radius: 16px;
  transition: opacity .3s ease, transform .3s ease;
}

.event-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: white;
  font-weight: 1000;
  background: linear-gradient(145deg, #ff884d, #e92861);
  box-shadow: 0 0 20px rgba(255, 67, 102, .4);
}

.world-event small { display: block; color: #ff9daf; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.world-event strong { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .04em; }
.world-event strong b { color: #fff2a7; }
.event-health { display: block; width: 190px; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,.45); }
.event-health i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff536b, #ffd460); transition: width .18s linear; }

.utility-actions {
  position: absolute;
  z-index: 8;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  gap: 9px;
}

.utility-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 13px 8px 8px;
  border-radius: 16px;
  color: var(--ink);
  cursor: pointer;
}

.utility-button span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  color: #082131;
  background: linear-gradient(145deg, #83fae8, #38bde5);
  font: 1000 13px/1 ui-monospace, monospace;
}

.utility-button b { font-size: 9px; letter-spacing: .1em; }
.utility-button:active { transform: scale(.97); }
.voice-button .voice-icon { background: linear-gradient(145deg, #ff8d9c, #e53664); }
.voice-button .voice-icon svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.voice-button.voice-on { border-color: rgba(89,255,202,.78); box-shadow: 0 0 22px rgba(67,240,194,.34); }
.voice-button.voice-on .voice-icon { background: linear-gradient(145deg, #8affda, #34d99a); animation: voicePulse 1.2s ease-in-out infinite; }
.voice-button.voice-error .voice-icon { background: linear-gradient(145deg, #ffcb6c, #ff6c64); }
.listen-button .listen-icon { background: linear-gradient(145deg, #778896, #405263); }
.listen-button .listen-icon svg { width: 27px; fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.listen-button.voice-on { border-color: rgba(82,205,255,.78); box-shadow: 0 0 22px rgba(54,176,255,.28); }
.listen-button.voice-on .listen-icon { background: linear-gradient(145deg, #7eeeff, #399be8); }
@keyframes voicePulse { 50% { transform: scale(1.08); filter: brightness(1.2); } }

.spot-prompt {
  position: absolute;
  z-index: 7;
  top: 130px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 360px;
  padding: 9px 9px 9px 12px;
  border-radius: 18px;
}

.spot-prompt[hidden] { display: none; }
.spot-orb { width: 35px; height: 35px; border-radius: 50%; background: #47eddf; box-shadow: 0 0 18px currentColor; }
.spot-prompt > div:nth-child(2) { flex: 1; }
.spot-prompt small { display: block; color: var(--aqua); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.spot-prompt strong { display: block; margin-top: 2px; font-size: 13px; }
.spot-prompt span { display: block; margin-top: 2px; color: var(--muted); font: 700 9px/1 ui-monospace, monospace; }
.spot-prompt button { border: 0; border-radius: 13px; padding: 13px 16px; color: #061824; background: linear-gradient(135deg, #52efe2, #78eaa3); font-weight: 1000; cursor: pointer; }

.sonar-shell {
  position: absolute;
  z-index: 8;
  left: max(17px, env(safe-area-inset-left));
  bottom: max(186px, calc(env(safe-area-inset-bottom) + 178px));
  width: 146px;
  transition: width .25s ease, bottom .25s ease;
}

.sonar-shell.expanded { width: min(340px, calc(100vw - 34px)); }
.sonar-shell.expanded { z-index: 85; }
.sonar-shell.expanded .zoom-control { display: none !important; }

.sonar {
  position: relative;
  display: block;
  width: 146px;
  height: 146px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  cursor: pointer;
  transition: width .25s ease, height .25s ease, border-radius .25s ease;
}

.sonar-shell.expanded .sonar { width: min(340px, calc(100vw - 34px)); height: min(340px, calc(100vw - 34px)); }

#sonarCanvas { display: block; width: 100%; height: 100%; }

.sonar::before,
.sonar::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(89, 246, 226, .21);
  border-radius: 50%;
  pointer-events: none;
}

.sonar::after { inset: 33%; }

.sonar-sweep {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 78%, rgba(74, 247, 221, .22) 92%, rgba(74, 247, 221, .55));
  animation: sonar 3.4s linear infinite;
  pointer-events: none;
}

.sonar-label {
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  color: #bcfff5;
  font: 900 8px/1 ui-monospace, monospace;
  letter-spacing: .12em;
  white-space: nowrap;
}

.sonar-label b { color: var(--muted); }

.sonar-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 7px;
  padding: 7px 9px;
  border-radius: 99px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.expanded .sonar-legend { opacity: 1; pointer-events: auto; }
.sonar-legend span { color: var(--muted); font: 800 7px/1 ui-monospace, monospace; }
.sonar-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }
.sonar-legend .player { background: #55e7ff; }
.sonar-legend .fish { background: #ffd566; }
.sonar-legend .event { background: #ff536b; }
.sonar-legend button {
  border: 1px solid rgba(83, 234, 217, .32);
  border-radius: 99px;
  padding: 4px 9px;
  color: var(--aqua);
  background: rgba(83, 234, 217, .09);
  font: 900 7px/1 ui-monospace, monospace;
  cursor: pointer;
}

.chat-panel {
  position: absolute;
  z-index: 9;
  left: max(17px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(460px, calc(100vw - 170px));
  height: 220px;
  overflow: hidden;
  border-radius: 18px;
  transition: height .25s ease;
}

.chat-panel.collapsed { height: 45px; }
.chat-panel header { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 8px 0 13px; border-bottom: 1px solid rgba(109, 225, 235, .12); }
.chat-panel header div { display: flex; align-items: center; }
.chat-panel header b { font-size: 9px; letter-spacing: .13em; }
.chat-panel header small { margin-left: 8px; color: var(--muted); font: 700 8px/1 ui-monospace, monospace; }
.chat-panel header em { margin-left: 7px; border-radius: 99px; padding: 4px 7px; color: #061824; background: #ffe178; font: 900 7px/1 ui-monospace, monospace; font-style: normal; }
.chat-panel header em[hidden] { display: none; }
.chat-panel header button { width: 32px; height: 32px; border: 0; border-radius: 10px; color: var(--aqua); background: rgba(83, 234, 217, .08); cursor: pointer; }
.chat-panel.collapsed header button { rotate: 180deg; }

.chat-channels { display: flex; gap: 4px; padding: 5px 8px 0; }
.chat-channels button { flex: 1; min-height: 22px; border: 1px solid rgba(109,225,235,.12); border-radius: 7px; color: #789ba5; background: rgba(0,8,16,.32); font: 900 7px/1 ui-monospace, monospace; cursor: pointer; }
.chat-channels button.active { color: #06202b; border-color: transparent; background: #59e8d9; }
.chat-log { height: 96px; padding: 7px 13px; overflow: auto; mask-image: linear-gradient(to bottom, transparent, black 12%); }
.chat-message { display: flex; align-items: flex-start; gap: 6px; margin: 5px 0; color: #d9f4fa; font-size: 10px; line-height: 1.3; }
.chat-portrait { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border-radius: 7px; color: #06202b; background: #5de6db; font: 1000 8px/1 system-ui; font-style: normal; }
.chat-message b { flex: 0 0 auto; color: #65e6ff; }
.chat-content { min-width: 0; flex: 1; }
.chat-content > span { display: block; min-width: 0; overflow-wrap: anywhere; }
.chat-content > small { display: block; overflow: hidden; margin-bottom: 2px; padding-left: 5px; border-left: 2px solid rgba(89,232,217,.4); color: #7fa8b2; font: 700 7px/1.3 ui-monospace, monospace; white-space: nowrap; text-overflow: ellipsis; }
.chat-message.self b, .chat-message.self span { color: #ffe18b; }
.chat-message.system b, .chat-message.system span { color: #ff9bac; }
.chat-actions { display: flex; flex: 0 0 auto; gap: 3px; margin-left: auto; opacity: .35; }
.chat-message:hover .chat-actions, .chat-actions:focus-within { opacity: 1; }
.chat-actions button { border: 0; border-radius: 5px; padding: 2px 4px; color: var(--muted); background: rgba(255,255,255,.06); font: 900 6px/1 ui-monospace, monospace; cursor: pointer; }
.chat-actions button:hover { color: white; background: rgba(83,234,217,.14); }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.chat-reactions button { border: 1px solid rgba(255,255,255,.08); border-radius: 99px; padding: 2px 5px; color: #bce6e8; background: rgba(75,128,150,.14); font: 800 6px/1 ui-monospace, monospace; cursor: pointer; }
.chat-reply { display: flex; align-items: center; justify-content: space-between; height: 24px; margin: -2px 8px 4px; padding: 0 5px 0 9px; border-left: 2px solid #59e8d9; border-radius: 5px; color: #8fb5bd; background: rgba(0,8,16,.45); font: 700 7px/1 ui-monospace, monospace; }
.chat-reply[hidden] { display: none; }
.chat-reply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply button { border: 0; color: #ff9bac; background: transparent; cursor: pointer; }

.chat-panel form { display: flex; gap: 6px; height: 38px; padding: 0 7px 7px; }
.chat-panel input { flex: 1; min-width: 0; border: 1px solid rgba(109, 225, 235, .14); border-radius: 11px; outline: 0; padding: 0 11px; color: white; background: rgba(0, 8, 16, .55); user-select: text; -webkit-user-select: text; }
.chat-panel input:focus { border-color: rgba(72, 244, 223, .65); box-shadow: 0 0 0 3px rgba(72, 244, 223, .09); }
.chat-panel form button { border: 0; border-radius: 11px; padding: 0 13px; color: #061824; background: var(--aqua); font-size: 9px; font-weight: 1000; cursor: pointer; }
.chat-panel form .chat-photo-button { flex: 0 0 32px; padding: 0; border: 1px solid rgba(89,232,217,.28); color: var(--aqua); background: rgba(59,154,164,.16); font-size: 17px; }
.chat-panel form .chat-photo-button:disabled { opacity: .35; cursor: not-allowed; }
.chat-photo-card { display: grid; width: min(180px, 100%); min-height: 58px; margin-top: 5px; padding: 0; overflow: hidden; place-items: center; border: 1px solid rgba(89,232,217,.2); border-radius: 10px; color: #a7d3d8; background: linear-gradient(135deg, rgba(38,91,108,.45), rgba(7,22,35,.78)); font: 800 8px/1.3 ui-monospace, monospace; cursor: pointer; }
.chat-photo-card img { display: block; width: 100%; max-height: 108px; object-fit: cover; }
.chat-photo-card[data-status="removed"], .chat-photo-card[data-status="unavailable"] { cursor: default; opacity: .7; }

.photo-viewer { z-index: 60; width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 1px solid rgba(89,232,217,.28); border-radius: 20px; color: white; background: rgba(3,18,30,.97); }
.photo-viewer::backdrop { background: rgba(0,7,14,.78); backdrop-filter: blur(7px); }
.photo-viewer header { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 10px 0 17px; border-bottom: 1px solid rgba(89,232,217,.14); }
.photo-viewer header strong { color: var(--aqua); font: 900 9px/1 ui-monospace, monospace; letter-spacing: .13em; }
.photo-viewer header button { width: 32px; height: 32px; border: 0; border-radius: 10px; color: #ff9bac; background: rgba(255,80,105,.08); cursor: pointer; }
.photo-viewer img { display: block; max-width: 100%; max-height: calc(100vh - 120px); margin: auto; object-fit: contain; }
.photo-viewer p { margin: 0; padding: 15px; color: #9fc4cb; text-align: center; font: 700 9px/1.4 ui-monospace, monospace; }

.joystick {
  position: absolute;
  z-index: 6;
  display: none;
  width: 138px;
  height: 138px;
  translate: -50% -50%;
  border: 1px solid rgba(120, 255, 238, .38);
  border-radius: 50%;
  background: rgba(3, 24, 37, .37);
  box-shadow: inset 0 0 34px rgba(34, 211, 238, .14), 0 0 30px rgba(0, 10, 20, .24);
  pointer-events: none;
}

.joystick.active { display: block; }
.joystick::before, .joystick::after { content: ""; position: absolute; background: rgba(112, 242, 229, .14); }
.joystick::before { width: 1px; top: 15%; bottom: 15%; left: 50%; }
.joystick::after { height: 1px; left: 15%; right: 15%; top: 50%; }
.joystick i { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(255,255,255,.64); background: radial-gradient(circle at 35% 30%, #99fff1, #27b9d9); box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 18px rgba(72,244,223,.32); }
.joystick span { position: absolute; left: 50%; bottom: -20px; translate: -50% 0; color: rgba(200, 246, 248, .7); font: 800 8px/1 ui-monospace, monospace; letter-spacing: .15em; }

.cannon-button {
  --cooldown: 1;
  position: absolute;
  z-index: 10;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(29px, calc(env(safe-area-inset-bottom) + 12px));
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  padding: 0;
  border: 1px solid rgba(255, 224, 132, .55);
  border-radius: 50%;
  color: #fff8d5;
  background: radial-gradient(circle at 38% 32%, rgba(255, 185, 77, .42), rgba(116, 31, 27, .86) 62%, rgba(31, 9, 15, .94));
  box-shadow: 0 14px 36px rgba(0,0,0,.42), 0 0 24px rgba(255, 109, 73, .25), inset 0 0 22px rgba(255, 209, 111, .18);
  cursor: grab;
  touch-action: none;
}

.cannon-button:active, .cannon-button.aiming { cursor: grabbing; scale: .96; }
.cannon-button b { z-index: 2; margin-top: 13px; font: 1000 14px/1 Impact, sans-serif; letter-spacing: .08em; }
.cannon-button small { z-index: 2; margin-top: -17px; color: #ffc991; font: 800 7px/1 ui-monospace, monospace; letter-spacing: .08em; }
.cooldown-ring { position: absolute; inset: 6px; border-radius: 50%; opacity: 0; background: conic-gradient(var(--gold) calc(var(--cooldown) * 1turn), rgba(255,255,255,.08) 0); mask: radial-gradient(circle, transparent 62%, black 64%); }
.cannon-button[data-cooling="true"] .cooldown-ring { opacity: 1; }

.coordinate-chip {
  position: absolute;
  z-index: 7;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(155px, calc(env(safe-area-inset-bottom) + 141px));
  padding: 8px 11px;
  border-radius: 99px;
  color: #a8ccd4;
  font: 700 8px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}

.toast {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 24px));
  translate: -50% 16px;
  padding: 11px 15px;
  border-radius: 13px;
  opacity: 0;
  pointer-events: none;
  color: #dffffa;
  font-size: 11px;
  transition: opacity .2s ease, translate .2s ease;
}

.toast.visible { opacity: 1; translate: -50% 0; }

.announcement-toast { position: absolute; z-index: 38; left: 50%; top: max(18px, env(safe-area-inset-top)); width: min(620px, calc(100vw - 36px)); translate: -50% -18px; padding: 13px 18px; border-color: rgba(255,211,102,.42); border-radius: 15px; opacity: 0; color: #fff4bf; background: rgba(18,25,42,.9); text-align: center; font: 900 11px/1.35 system-ui; pointer-events: none; transition: opacity .2s ease, translate .2s ease; }
.announcement-toast.visible { opacity: 1; translate: -50% 0; }
.announcement-toast[data-priority="urgent"] { border-color: rgba(255,83,107,.64); box-shadow: 0 10px 42px rgba(255,38,77,.2); }
.announcement-flyby { --flyby-y: 0px; position: absolute; z-index: 37; top: calc(28% + var(--flyby-y)); left: 0; width: 100%; overflow: hidden; pointer-events: none; }
.announcement-flyby span { display: inline-block; min-width: max-content; max-width: min(86vw, 860px); padding: 12px 22px; border: 1px solid rgba(255,218,104,.36); border-radius: 99px; color: #fff4bd; background: rgba(7,21,38,.9); font: 950 12px/1.15 system-ui; text-align: center; opacity: 0; transform: translateX(-110%); box-shadow: 0 12px 38px rgba(0,0,0,.28), 0 0 24px rgba(255,201,66,.12); }
.announcement-flyby[data-tier="major"] span { padding: 14px 27px; font-size: 16px; color: #fff0a0; border-color: rgba(255,188,57,.58); }
.announcement-flyby[data-tier="epic"] span { padding: 17px 34px; font-size: 22px; color: #fff4b5; border-color: rgba(255,102,71,.72); box-shadow: 0 12px 44px rgba(0,0,0,.35), 0 0 34px rgba(255,75,53,.3); }
.announcement-flyby.active[data-direction="left"] span { animation: announcementFlybyLeft 4.8s cubic-bezier(.2,.84,.26,1) both; }
.announcement-flyby.active[data-direction="right"] span { animation: announcementFlybyRight 4.8s cubic-bezier(.2,.84,.26,1) both; }
.announcement-flyby.active[data-tier="major"] span { animation-duration: 5.7s; }
.announcement-flyby.active[data-tier="epic"] span { animation-duration: 6.4s; }

.respawn-panel {
  position: fixed;
  z-index: 35;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(470px, calc(100vw - 34px));
  padding: 26px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 28px 90px rgba(0, 5, 13, .72), inset 0 0 42px rgba(61, 224, 224, .06);
}

.respawn-panel[hidden] { display: none; }
.respawn-panel > small { color: #ff7585; font: 900 9px/1 ui-monospace, monospace; letter-spacing: .18em; }
.respawn-panel h2 { margin: 8px 0 10px; font: 1000 38px/.95 Impact, sans-serif; text-transform: uppercase; }
.respawn-panel p { margin: 0 0 18px; color: #a9cad3; font-size: 12px; }
.respawn-panel > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.respawn-panel button { min-height: 48px; border: 1px solid rgba(102, 236, 224, .25); border-radius: 13px; color: #05202b; background: linear-gradient(135deg, #5ef3df, #7bea9d); font-size: 10px; font-weight: 1000; letter-spacing: .04em; cursor: pointer; }
.respawn-panel button:last-child { color: #e7fbff; background: rgba(25, 65, 92, .78); }
.respawn-panel button:disabled { opacity: .42; cursor: not-allowed; filter: saturate(.45); }
.respawn-panel em { display: block; margin-top: 13px; color: #769ba7; font: 700 8px/1.4 ui-monospace, monospace; font-style: normal; }

.fishing-session {
  position: absolute;
  z-index: 34;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(480px, calc(100vw - 34px));
  padding: 25px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 28px 90px rgba(0, 5, 13, .7), inset 0 0 42px rgba(61, 224, 224, .07);
}

.fishing-session[hidden] { display: none; }
.fishing-session > small { color: var(--aqua); font: 900 9px/1 ui-monospace, monospace; letter-spacing: .16em; }
.fishing-session h2 { margin: 8px 0 9px; font: 1000 36px/.95 Impact, sans-serif; text-transform: uppercase; }
.fishing-session p { min-height: 18px; margin: 0 0 15px; color: #afd0d8; font-size: 12px; }
.fishing-progress { height: 8px; overflow: hidden; margin: 0 0 16px; border-radius: 99px; background: rgba(0, 8, 16, .72); }
.fishing-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55e9dd, #7da9ff, #ffd86f); transition: width .2s ease; }
.fishing-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fishing-actions button { min-height: 46px; border: 1px solid rgba(102,236,224,.25); border-radius: 12px; color: #06202b; background: linear-gradient(135deg, #5ef3df, #7bea9d); font-size: 10px; font-weight: 1000; cursor: pointer; }
.fishing-actions button:disabled { opacity: .35; cursor: not-allowed; filter: saturate(.45); }
.fishing-actions button:last-child { grid-column: 1 / -1; min-height: 38px; color: #bdd4da; background: rgba(18, 49, 70, .68); }
.fishing-session > em { display: block; margin-top: 12px; color: #779ca6; font: 700 8px/1.4 ui-monospace, monospace; font-style: normal; }

.boss-awards { position: fixed; z-index: 26; left: 50%; top: 50%; width: min(520px, calc(100vw - 34px)); max-height: min(680px, calc(100vh - 34px)); overflow: auto; transform: translate(-50%, -50%); padding: 28px; border-color: rgba(255, 212, 96, .35); box-shadow: 0 28px 90px rgba(0, 4, 15, .75); }
.boss-awards[hidden] { display: none; }
.boss-awards > small { color: #ffd460; font: 900 9px/1 ui-monospace, monospace; letter-spacing: .16em; }
.boss-awards h2 { margin: 9px 0; font: 1000 38px/.95 Impact, sans-serif; text-transform: uppercase; }
.boss-awards > p { margin: 0 0 16px; color: #92b7c3; font: 700 9px/1.5 ui-monospace, monospace; }
.boss-awards-list { display: grid; gap: 8px; }
.boss-awards-list article { display: grid; grid-template-columns: 105px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid rgba(107, 231, 222, .18); border-radius: 12px; background: rgba(2, 22, 36, .72); }
.boss-awards-list span { color: #ffd460; font: 900 8px/1.2 ui-monospace, monospace; }
.boss-awards-list strong { overflow: hidden; text-overflow: ellipsis; color: #effcff; font-size: 12px; }
.boss-awards-list b { color: #65efb0; font: 900 10px/1 ui-monospace, monospace; white-space: nowrap; }
.boss-awards > button { width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #5ef3df, #7bea9d); color: #05202b; font-size: 10px; font-weight: 1000; letter-spacing: .06em; cursor: pointer; }

.drawer-backdrop {
  position: absolute;
  z-index: 20;
  inset: 0;
  background: rgba(0, 8, 16, .48);
  backdrop-filter: blur(4px);
}

.drawer-backdrop[hidden], .side-drawer[hidden] { display: none; }

.side-drawer {
  position: absolute;
  z-index: 21;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: min(410px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  border-radius: 24px;
  padding: 20px;
  animation: drawerIn .24s ease-out;
  touch-action: pan-y;
}

.side-drawer header { display: flex; align-items: flex-start; justify-content: space-between; }
.side-drawer header small { color: var(--aqua); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.side-drawer h2 { margin: 4px 0 0; font: 1000 36px/.9 Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.side-drawer header button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; color: white; background: rgba(255,255,255,.04); font-size: 24px; cursor: pointer; }
.side-drawer > p { margin: 15px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.ship-list, .store-grid { display: grid; gap: 10px; }
.ship-card { position: relative; display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(109, 225, 235, .14); border-radius: 16px; background: rgba(0, 10, 20, .38); }
.ship-card.selected { border-color: var(--aqua); box-shadow: inset 0 0 24px rgba(72,244,223,.08); }
.ship-card.owned:not(.selected) { border-color: rgba(126, 234, 157, .28); }
.ship-card.locked .ship-preview { filter: saturate(.35); opacity: .58; }
.ship-preview { position: relative; height: 56px; border-radius: 13px; background: radial-gradient(circle, rgba(71,226,222,.25), transparent 70%); }
.ship-preview::before { content: ""; position: absolute; width: var(--ship-w, 44px); height: 20px; left: 50%; top: 50%; translate: -50% -50%; border-radius: 55% 55% 65% 65%; background: var(--ship-color, #41d4dc); box-shadow: 0 8px 0 -5px rgba(255,255,255,.7); }
.companion-preview { display: grid; place-items: center; overflow: hidden; }
.companion-preview img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(14,8,30,.46)); }
.ship-card small { display: block; color: var(--muted); font: 700 8px/1.3 ui-monospace, monospace; }
.ship-card strong { display: block; margin: 3px 0 5px; font-size: 13px; }
.ship-card button { border: 0; border-radius: 10px; padding: 9px 10px; color: #061824; background: var(--aqua); font-size: 8px; font-weight: 1000; line-height: 1.2; white-space: pre-line; cursor: pointer; }
.ship-card button:disabled { color: #8aa2a9; background: rgba(255,255,255,.08); cursor: not-allowed; }

.equipment-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.equipment-slots article { padding: 11px; border: 1px solid rgba(109,225,235,.12); border-radius: 13px; background: rgba(0,8,15,.3); }
.equipment-slots span, .equipment-slots small { display: block; color: var(--muted); font: 700 7px/1.3 ui-monospace, monospace; }
.equipment-slots b { display: block; margin: 6px 0; font-size: 9px; }

.intro-card {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(530px, calc(100vw - 34px));
  padding: 30px;
  border-radius: 28px;
  transition: opacity .45s ease, transform .45s ease;
}

.intro-card::before { content: ""; position: absolute; inset: -90px; z-index: -2; border-radius: 50%; background: radial-gradient(circle, rgba(31,180,192,.28), transparent 68%); pointer-events: none; }
.intro-card.dismissed { opacity: 0; transform: scale(.94); pointer-events: none; }
.intro-card > small { color: var(--aqua); font-weight: 900; letter-spacing: .18em; }
.intro-card h1 { margin: 12px 0; font: 1000 clamp(48px, 9vw, 84px)/.82 Impact, sans-serif; text-transform: uppercase; letter-spacing: -.02em; }
.intro-card h1 span { color: transparent; background: linear-gradient(90deg, #58f0df, #69baff, #ffe27c); background-clip: text; -webkit-background-clip: text; }
.intro-card p { max-width: 460px; margin: 20px 0 24px; color: #b2d1da; font-size: 14px; line-height: 1.55; }
.intro-card > div { display: flex; align-items: center; gap: 13px; }
.intro-card button { border: 0; border-radius: 14px; padding: 15px 22px; color: #05202b; background: linear-gradient(135deg, #5ef3df, #7bea9d); font-weight: 1000; letter-spacing: .06em; cursor: pointer; }
.intro-card > div span { color: var(--muted); font: 700 8px/1.2 ui-monospace, monospace; letter-spacing: .1em; }

@keyframes pulse { 50% { opacity: .45; scale: .82; } }
@keyframes sonar { to { rotate: 1turn; } }
@keyframes drawerIn { from { opacity: 0; translate: 26px 0; } }
@keyframes announcementFlybyLeft {
  0% { opacity: 0; transform: translateX(-110%); }
  16% { opacity: 1; transform: translateX(calc(50vw - 50% + 22px)); }
  22% { transform: translateX(calc(50vw - 50% - 9px)); }
  27%, 76% { opacity: 1; transform: translateX(calc(50vw - 50%)); }
  100% { opacity: 0; transform: translateX(calc(100vw + 110%)); }
}
@keyframes announcementFlybyRight {
  0% { opacity: 0; transform: translateX(calc(100vw + 110%)); }
  16% { opacity: 1; transform: translateX(calc(50vw - 50% - 22px)); }
  22% { transform: translateX(calc(50vw - 50% + 9px)); }
  27%, 76% { opacity: 1; transform: translateX(calc(50vw - 50%)); }
  100% { opacity: 0; transform: translateX(-110%); }
}

@media (max-width: 780px) {
  .identity-card { width: 270px; min-height: 61px; padding: 8px 9px; }
  .portrait { flex-basis: 43px; height: 43px; border-radius: 13px; }
  .mana-pill { display: none; }
  .phase-badge { top: auto; bottom: max(9px, env(safe-area-inset-bottom)); font-size: 7px; }
  .world-event { top: 82px; min-width: 0; width: calc(100vw - 34px); max-width: 370px; }
  .utility-actions { top: max(18px, env(safe-area-inset-top)); gap: 6px; }
  .utility-button { min-height: 44px; padding: 6px; }
  .utility-button span { width: 31px; height: 31px; }
  .utility-button b { display: none; }
  .spot-prompt { top: 133px; min-width: 0; width: calc(100vw - 34px); }
  .sonar-shell { bottom: max(178px, calc(env(safe-area-inset-bottom) + 171px)); width: 112px; }
  .sonar { width: 112px; height: 112px; }
  .chat-panel { width: calc(100vw - 154px); height: 190px; }
  .chat-log { height: 67px; }
  .chat-panel header small { display: none; }
  .cannon-button { width: 102px; height: 102px; right: max(18px, env(safe-area-inset-right)); }
  .coordinate-chip { display: none; }
  .equipment-slots { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .identity-card { width: 232px; }
  .identity-copy > span { display: none; }
  .world-event { top: 78px; }
  .world-event small { font-size: 7px; }
  .world-event strong { font-size: 9px; }
  .spot-prompt { top: 128px; }
  .spot-prompt button { padding-inline: 12px; }
  .chat-panel { width: calc(100vw - 137px); }
  .chat-panel form button { padding-inline: 9px; }
  .sonar-shell { bottom: max(165px, calc(env(safe-area-inset-bottom) + 155px)); }
  .cannon-button { width: 94px; height: 94px; }
  .intro-card { padding: 24px; }
  .intro-card > div { align-items: flex-start; flex-direction: column; }
  .respawn-panel { padding: 22px; }
  .respawn-panel > div { grid-template-columns: 1fr; }
  .fishing-session { padding: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* v0.50: readable harbor surfaces, clickable account HUD and aligned combat mode. */
.identity-card { cursor: pointer; }
.identity-card:focus-visible { outline: 3px solid #ffe06b; outline-offset: 3px; }
.mana-pill,.cargo-pill { font: inherit; cursor: pointer; appearance: none; }
.profile-editor header {
  position: sticky; z-index: 8; top: 0;
  background: linear-gradient(180deg,#30170d 0%,#1d0d08 100%);
  box-shadow: 0 4px 0 rgba(88,43,17,.75);
}
.side-drawer { color: #fff1c9; background: linear-gradient(180deg,#24100b,#120807 70%,#090404); }
.side-drawer::before { opacity: .14; }
.side-drawer header small,.side-drawer > p,.side-drawer h3 { color: #f0c875; text-shadow: none; }
.side-drawer h2,.side-drawer header button,.store-categories button { color: #fff; text-shadow: none; }
.store-categories { background: #190b07; }
.store-categories button { background: #32150c; }
.store-categories button.active { color: #2a1208; background: linear-gradient(#ffe59b,#d99a32); }
.ship-card { color: #2b140b; background: linear-gradient(145deg,#f8e3a9,#d9aa57); }
.ship-card strong,.ship-card b,.ship-card span { color: #291208; text-shadow: none; }
.ship-card small { color: #4d2a17 !important; text-shadow: none !important; font-weight: 900; }
.ship-card button { text-shadow: none; }
.weapon-mode-button {
  right: max(52px, calc(env(safe-area-inset-right) + 46px));
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 58px));
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 7px; text-align: center;
}
.weapon-mode-button i,.weapon-mode-button span { display: flex; width: auto; height: auto; align-items: center; justify-content: center; margin: 0; }
.account-drawer h3 { margin: 20px 0 9px; font: 1000 11px/1 "Trebuchet MS",sans-serif; letter-spacing: .14em; }
.account-balance { display: grid; margin-top: 18px; padding: 20px; border: 2px solid #b87528; border-radius: 18px; background: linear-gradient(145deg,#4a2110,#241007); }
.account-balance small { color: #f5ce71; font-weight: 900; }
.account-balance strong { margin: 6px 0; color: #fff; font: 1000 40px/1 Impact,sans-serif; }
.account-balance span { color: #e8c998; font-size: 11px; }
.account-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-offers article,.referral-card,.account-history p { display: grid; gap: 7px; padding: 14px; border: 1px solid #925221; border-radius: 14px; color: #2d160b; background: linear-gradient(145deg,#f5dfa6,#d9ac61); }
.account-offers small,.account-history span { color: #54321e; font-size: 10px; }
.account-offers button,.referral-card button { min-height: 34px; border: 1px solid #764019; border-radius: 10px; color: #fff; background: #5a2914; font-weight: 900; }
.account-offers button:disabled { opacity: .72; }
.account-history { display: grid; gap: 8px; }
.account-history p { grid-template-columns: 1fr auto; margin: 0; }
.referral-card { color: #fff1cc; background: linear-gradient(145deg,#56205a,#26102f); }
.referral-card p { margin: 0; color: #e7bce9; font-size: 11px; }
#referralSummary { display: grid; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.25); }
#referralSummary[hidden] { display: none; }
@media (max-width:600px) {
  .weapon-mode-button { right:max(38px,calc(env(safe-area-inset-right) + 32px)); bottom:max(50px,calc(env(safe-area-inset-bottom) + 44px)); }
  .account-offers { grid-template-columns: 1fr; }
}

/* Keep Cargo Seas overrides last in the cascade. */
html, body { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; overflow: hidden !important; overscroll-behavior: none; }
.ocean-app { position: fixed !important; inset: 0; width: 100dvw !important; height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
.phase-badge, .coordinate-chip { display: none !important; }
.world-event[hidden], .dock-prompt[hidden] { display: none !important; }
.chat-panel, .chat-panel.collapsed { height: 194px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
.chat-panel header, .chat-channels, .chat-reply { display: none !important; }
.chat-log { height: 142px !important; overflow: hidden !important; pointer-events: none; mask-image: linear-gradient(to bottom,transparent,#000 42%); }
.chat-message { background: transparent !important; border: 0 !important; padding: 2px 0 !important; text-shadow: 0 2px 5px #00121b,0 0 3px #00121b; }
.fishing-session { position: fixed; left: 50%; bottom: 20%; translate: -50% 0; width: 230px; padding: 12px; border: 0; background: transparent; box-shadow: none; text-align: center; }
.fishing-session[hidden] { display: none; }
.fishing-session h2 { margin: 4px 0; font-size: 20px; }
.fishing-session p { min-height: 0; margin: 0 0 6px; }
.fishing-session .fishing-actions { display: block; }

/* v0.28.4 direct-entry layout must remain last so legacy breakpoints cannot enlarge it. */
.identity-card {
  width: 365px;
  min-height: 53px;
  height: 53px;
  padding: 6px 8px;
  gap: 7px;
  border-radius: 15px;
}
.identity-card .portrait { flex-basis: 39px; width: 39px; height: 39px; border-radius: 11px; font-size: 19px; }
.identity-copy strong { font-size: 11px; line-height: 1; }
.identity-copy > span { margin-top: 2px; font-size: 7px; line-height: 1; letter-spacing: .07em; }
.hud-hp { height: 4px; margin-top: 4px; }
.mana-pill, .cargo-pill { min-width: 52px; padding-left: 7px; }
.mana-pill small, .cargo-pill small { font-size: 6px; }
.mana-pill b, .cargo-pill b { margin-top: 1px; font-size: 11px; }
.cannon-button {
  top: 50%;
  right: max(12px, env(safe-area-inset-right));
  bottom: auto;
  width: 76px;
  height: 76px;
  translate: 0 -50%;
}
.cannon-button b { margin-top: 9px; font-size: 11px; }
.cannon-button small { margin-top: -12px; font-size: 6px; }
.cooldown-ring { inset: 4px; }
@media (max-width: 780px) {
  .identity-card {
    width: 232px;
    min-height: 44px;
    height: 44px;
    padding: 4px 6px;
    gap: 6px;
    border-radius: 14px;
  }
  .identity-card .portrait { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
  .identity-copy { min-width: 0; }
  .identity-copy strong { font-size: 10px; line-height: 1; }
  .identity-copy > span { display: block; margin-top: 2px; overflow: hidden; font-size: 6px; line-height: 1; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
  .hud-hp { height: 4px; margin-top: 3px; }
  .cargo-pill { min-width: 43px; padding-left: 5px; }
  .cargo-pill small { font-size: 5px; }
  .cargo-pill b { font-size: 10px; }
  .utility-button { min-height: 44px; height: 44px; }
  .cannon-button { width: 68px; height: 68px; right: max(10px, env(safe-area-inset-right)); }
}

/* v0.28.8: independent touch controls, camera zoom and Leviathan emergence. */
.cannon-button { touch-action: none; }
body.cannon-targeting #oceanCanvas { cursor: crosshair; }

.zoom-control {
  position: fixed;
  z-index: 17;
  top: 50%;
  right: max(104px, calc(env(safe-area-inset-right) + 92px));
  display: grid;
  width: 34px;
  height: 164px;
  padding: 7px 5px;
  place-items: center;
  border-radius: 18px;
  touch-action: none;
}
.zoom-control b {
  color: #bafff5;
  font: 1000 13px/1 ui-monospace, monospace;
  pointer-events: none;
}
.zoom-control input {
  width: 22px;
  height: 112px;
  margin: 0;
  accent-color: var(--aqua);
  cursor: ns-resize;
  writing-mode: vertical-lr;
  direction: rtl;
  touch-action: none;
}

.chat-panel,
.chat-panel.collapsed {
  position: fixed !important;
  z-index: 16;
  top: max(78px, calc(env(safe-area-inset-top) + 66px));
  left: max(12px, env(safe-area-inset-left));
  bottom: auto !important;
  width: min(48vw, 320px) !important;
  height: auto !important;
  overflow: visible;
  pointer-events: none;
}
.chat-open-button {
  display: block;
  min-width: 56px;
  min-height: 28px;
  margin: 0 0 3px;
  padding: 5px 10px;
  border: 1px solid rgba(96,235,221,.25);
  border-radius: 9px;
  color: var(--aqua);
  background: rgba(2,22,34,.72);
  font: 1000 8px/1 ui-monospace, monospace;
  letter-spacing: .12em;
  pointer-events: auto;
  touch-action: manipulation;
}
.chat-open-button em { margin-left: 4px; color: #061824; border-radius: 99px; padding: 2px 4px; background: #ffe178; font-style: normal; }
.chat-log {
  height: 62px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
  mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 100%) !important;
  pointer-events: none !important;
}
.chat-message { min-height: 18px; margin: 1px 0 !important; gap: 4px; font-size: 9px; line-height: 1.15; }
.chat-portrait { display: none; }
.chat-message b { font-size: 9px; }
.chat-content > span { display: inline; }
.chat-actions, .chat-reactions, .chat-photo-card { display: none !important; }
.chat-panel form {
  display: flex;
  position: fixed;
  z-index: 30;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 24px));
  height: 44px;
  padding: 5px;
  border: 1px solid rgba(96,235,221,.24);
  border-radius: 13px;
  pointer-events: auto;
  touch-action: manipulation;
}
.chat-panel form[hidden] { display: none !important; }
.chat-panel input { background: rgba(1,17,29,.88); touch-action: auto; }

.sonar-shell {
  position: fixed;
  z-index: 15;
  top: max(76px, calc(env(safe-area-inset-top) + 66px));
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  bottom: auto;
  width: 108px;
  transition: width .25s ease;
}
.sonar { width: 108px; height: 108px; }
.sonar-shell.expanded { width: min(430px, calc(100vw - 24px)); }
.sonar-shell.expanded .sonar {
  width: min(430px, calc(100vw - 24px));
  height: min(430px, calc(100vw - 24px));
}
.sonar-label { bottom: 9px; font-size: 7px; }

.fishing-session {
  position: fixed;
  z-index: 45;
  inset: 0;
  width: auto;
  padding: 0;
  translate: none;
  pointer-events: none;
  filter: none;
}
.fishing-session[hidden],
.bait-wheel[hidden], .cast-status[hidden], .pull-card[hidden], .reel-panel[hidden], .result-modal[hidden] { display: none !important; }
.bait-wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, calc(100vw - 24px));
  height: min(430px, calc(100vw - 24px));
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5,35,48,.98) 0 29%, rgba(4,25,38,.9) 30% 62%, rgba(4,25,38,0) 63%);
  pointer-events: auto;
}
.bait-wheel::before { content: ""; position: absolute; inset: 7%; border: 1px dashed rgba(83,236,219,.24); border-radius: 50%; animation: sonar 18s linear infinite; }
.bait-heading { position: absolute; inset: 35%; display: grid; place-content: center; text-align: center; }
.bait-heading small { color: var(--aqua); font: 900 7px/1.3 ui-monospace, monospace; letter-spacing: .1em; }
.bait-heading h2 { margin: 6px 0 0; font: 1000 24px/.9 Impact, sans-serif; text-transform: uppercase; }
.bait-close {
  position: absolute; z-index: 2; top: 4%; right: 16%; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; background: rgba(2,17,28,.9); cursor: pointer;
}
.bait-btn {
  position: absolute; display: grid; width: 108px; height: 108px; padding: 9px; place-content: center;
  border: 2px solid rgba(94,236,221,.3); border-radius: 50%; color: white;
  background: radial-gradient(circle at 36% 30%, #176e78, #062234 68%); box-shadow: 0 12px 32px rgba(0,0,0,.35); cursor: pointer;
}
.bait-btn:nth-of-type(2) { left: 50%; top: 3%; translate: -50% 0; }
.bait-btn:nth-of-type(3) { right: 3%; top: 50%; translate: 0 -50%; }
.bait-btn:nth-of-type(4) { left: 50%; bottom: 3%; translate: -50% 0; }
.bait-btn:nth-of-type(5) { left: 3%; top: 50%; translate: 0 -50%; }
.bait-btn:active, .bait-btn.is-selected { scale: .94; border-color: #ffe260; box-shadow: 0 0 30px rgba(255,220,67,.45); }
.bait-art { display: block; width: 32px; height: 17px; margin: 0 auto 6px; border-radius: 50% 55% 46% 50%; background: #ff8665; box-shadow: -11px 3px 0 -7px #ffd46a, 11px -3px 0 -7px #9dffce; }
.bait-btn:nth-of-type(3) .bait-art { background: #8af2c4; }
.bait-btn:nth-of-type(4) .bait-art { background: #ae8cff; }
.bait-btn:nth-of-type(5) .bait-art { background: #ffdc58; }
.bait-btn b { color: #ffe176; font: 1000 9px/1.2 ui-monospace, monospace; }
.bait-btn small { margin-top: 4px; color: #c5f6f2; font: 900 7px/1 ui-monospace, monospace; }

.cast-status, .pull-card {
  position: absolute; left: 50%; bottom: 17%; translate: -50% 0; width: min(370px, calc(100vw - 28px));
  padding: 16px; border-radius: 20px; text-align: center; pointer-events: auto;
}
.cast-status strong, .cast-status span { display: block; }
.cast-status strong { color: #ffe56e; font-size: 16px; }
.cast-status span { margin-top: 6px; color: #b6d4db; font-size: 11px; }
.cast-status button { margin-top: 10px; border: 0; color: #ff9aae; background: transparent; font: 900 8px/1 ui-monospace, monospace; }
.pull-card h2 { margin: 0; font: 1000 31px/.95 Impact, sans-serif; text-transform: uppercase; }
.pull-card p { margin: 9px 0 13px; color: #b8d5db; font-size: 11px; }
.pull-button, .reel-hit, .result-card button {
  min-height: 48px; border: 0; border-radius: 14px; padding: 0 24px; color: #06202a;
  background: linear-gradient(135deg, #ffe44e, #ffab42); font-weight: 1000; cursor: pointer;
}

.reel-panel { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,8,16,.76); backdrop-filter: blur(7px); pointer-events: auto; }
.reel-card { display: grid; grid-template-columns: minmax(260px, 410px) 86px; gap: 15px; width: min(540px, calc(100vw - 24px)); padding: 18px; border-radius: 24px; }
.reel-main { text-align: center; }
.reel-main h2 { margin: 0; font: 1000 32px/.95 Impact, sans-serif; text-transform: uppercase; }
.reel-main p { margin: 7px auto 3px; max-width: 370px; color: #a8c9d1; font-size: 10px; }
.reel-hint { color: #ffe46a; font: 800 8px/1.3 ui-monospace, monospace; }
#reelCanvas { display: block; width: min(300px, 54vh, 65vw); height: min(300px, 54vh, 65vw); margin: 2px auto -14px; }
.reel-hit { position: relative; min-height: 42px; }
.depth-card { display: flex; align-items: center; flex-direction: column; min-width: 74px; padding: 9px; border-radius: 16px; background: rgba(1,15,26,.68); }
.depth-card > strong { color: var(--aqua); font: 900 8px/1 ui-monospace, monospace; text-transform: uppercase; }
.depth-track { position: relative; flex: 1; width: 25px; min-height: 190px; margin: 10px 0; overflow: hidden; border-radius: 99px; background: linear-gradient(to top, #1bc2d2, #09253a); }
.depth-fill { position: absolute; bottom: 0; width: 100%; background: linear-gradient(to top, #ffe650, #50eddb); }
.fish-token { position: absolute; left: 50%; width: 26px; height: 14px; translate: -50% 50%; border-radius: 55% 45%; background: #ffb75d; transition: bottom .2s; }
.depth-meta { color: #a8c9d1; font: 800 7px/1.6 ui-monospace, monospace; text-align: center; }
.depth-meta span { display: block; }
.reel-feedback { position: fixed; z-index: 47; left: 50%; top: 23%; translate: -50% 0; color: #68f5c3; font: 1000 34px/1 Impact, sans-serif; opacity: 0; pointer-events: none; }
.reel-feedback.miss { color: #ff687e; }
.reel-feedback.show { animation: reelFeedback .65s ease-out; }
@keyframes reelFeedback { 0% { opacity: 0; scale: .65; } 25% { opacity: 1; scale: 1.1; } 100% { opacity: 0; translate: -50% -40px; } }

.result-modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,8,16,.74); backdrop-filter: blur(7px); pointer-events: auto; }
.result-card { width: min(360px, calc(100vw - 28px)); padding: 28px; border-radius: 24px; text-align: center; }
.result-fish { display: block; font-size: 66px; filter: drop-shadow(0 0 22px rgba(255,215,75,.55)); }
.result-card h2 { margin: 5px 0; font: 1000 38px/.95 Impact, sans-serif; text-transform: uppercase; }
.result-card p { margin: 9px 0 18px; color: #aacbd2; font-size: 11px; }

@media (max-width: 600px) {
  .chat-panel, .chat-panel.collapsed { top: max(62px, calc(env(safe-area-inset-top) + 50px)); width: min(52vw, 220px) !important; }
  .sonar-shell { top: max(66px, calc(env(safe-area-inset-top) + 54px)); width: 90px; }
  .sonar { width: 90px; height: 90px; }
  .sonar-shell.expanded, .sonar-shell.expanded .sonar { width: min(360px, calc(100vw - 20px)); height: min(360px, calc(100vw - 20px)); }
  .zoom-control {
    top: max(170px, calc(env(safe-area-inset-top) + 158px));
    right: max(13px, env(safe-area-inset-right));
    width: 30px;
    height: 138px;
    padding: 5px 4px;
    border-radius: 15px;
  }
  .zoom-control input { width: 20px; height: 94px; }
  .bait-wheel { width: min(350px, calc(100vw - 12px)); height: min(350px, calc(100vw - 12px)); }
  .bait-btn { width: 84px; height: 84px; padding: 6px; }
  .bait-heading h2 { font-size: 19px; }
  .reel-card { grid-template-columns: 1fr 64px; gap: 8px; padding: 10px; }
  .reel-main h2 { font-size: 24px; }
  .depth-track { min-height: 155px; }
}

/* v0.37.3: scaled reward audio, authoritative water impacts, and combat haptics. */

/* v0.37.4: durable captain profile editor. */
.profile-edit-button {
  position: absolute; z-index: 3; left: 46px; top: 2px; display: grid; width: 23px; height: 23px;
  padding: 0; place-items: center; border: 1px solid rgba(190,250,255,.5); border-radius: 50%;
  color: #eaffff; background: linear-gradient(145deg, #19abc5, #2455a0); box-shadow: 0 3px 10px rgba(0,10,30,.48);
  font: 1000 13px/1 system-ui; cursor: pointer; transition: transform .16s ease, filter .16s ease;
}
.profile-edit-button:hover, .profile-edit-button:focus-visible { filter: brightness(1.3); transform: scale(1.12); }
.identity-card .portrait.has-photo, .profile-photo-preview.has-photo { background-position: center; background-size: cover; }
.identity-card .portrait.has-photo span, .profile-photo-preview.has-photo span { visibility: hidden; }
.identity-card .portrait[data-portrait="captain-coral"], .profile-photo-preview[data-portrait="captain-coral"] { background: radial-gradient(circle at 35% 28%, #ffe099, #ff6f70 48%, #6c214f 100%); }
.identity-card .portrait[data-portrait="captain-tide"], .profile-photo-preview[data-portrait="captain-tide"] { background: radial-gradient(circle at 35% 28%, #b8fff0, #27c99a 48%, #075b69 100%); }
.identity-card .portrait[data-portrait="captain-storm"], .profile-photo-preview[data-portrait="captain-storm"] { background: radial-gradient(circle at 35% 28%, #e4d8ff, #8268e8 48%, #25224f 100%); }
.profile-editor { z-index: 110; width: min(430px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border: 1px solid rgba(108,239,231,.32); border-radius: 23px; color: #efffff; background: linear-gradient(160deg, rgba(5,35,61,.99), rgba(2,18,34,.99)); box-shadow: 0 28px 90px rgba(0,3,15,.72); }
.profile-editor::backdrop { background: rgba(0,8,18,.76); backdrop-filter: blur(7px); }
.profile-editor form { margin: 0; }
.profile-editor header { display: flex; min-height: 66px; padding: 14px 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(117,232,223,.14); }
.profile-editor header small, .profile-editor legend, .profile-name-field > span { color: #69e8dc; font: 900 8px/1 ui-monospace, monospace; letter-spacing: .14em; }
.profile-editor h2 { margin: 5px 0 0; font-size: 24px; }
.profile-editor header button { width: 35px; height: 35px; border: 0; border-radius: 11px; color: #ff9dac; background: rgba(255,75,102,.1); font-size: 20px; cursor: pointer; }
.profile-editor-body { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 20px; }
.profile-photo-preview { display: grid; width: 108px; height: 108px; place-items: center; overflow: hidden; border: 3px solid rgba(221,255,251,.72); border-radius: 31px; background: radial-gradient(circle at 35% 28%, #7ef5ee 0 18%, #1b8cc4 48%, #07345a 100%); box-shadow: 0 10px 25px rgba(0,11,30,.48); font: 1000 38px/1 system-ui; }
.profile-photo-actions { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.profile-photo-actions label, .profile-photo-actions button { min-height: 36px; padding: 0 12px; border: 1px solid rgba(104,232,224,.3); border-radius: 11px; color: #eaffff; background: rgba(36,119,145,.28); font: 900 8px/1 ui-monospace, monospace; letter-spacing: .08em; cursor: pointer; }
.profile-photo-actions label { display: grid; place-items: center; }
.profile-photo-actions button { color: #ffb3bf; background: rgba(117,35,60,.25); }
.profile-photo-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-photo-actions small, #profileEditorStatus { color: #91b8c2; font: 700 8px/1.4 ui-monospace, monospace; }
.profile-name-field { position: relative; grid-column: 1 / -1; display: grid; gap: 7px; }
.profile-name-field input { height: 46px; padding: 0 52px 0 13px; border: 1px solid rgba(111,234,225,.28); border-radius: 13px; outline: 0; color: white; background: rgba(1,13,26,.66); font: 800 15px/1 system-ui; }
.profile-name-field input:focus { border-color: #61eadf; box-shadow: 0 0 0 3px rgba(71,228,218,.1); }
.profile-name-field small { position: absolute; right: 13px; bottom: 16px; color: #789ba7; font: 800 8px/1 ui-monospace, monospace; }
.profile-presets { grid-column: 1 / -1; display: flex; gap: 10px; margin: 0; padding: 12px; border: 1px solid rgba(111,234,225,.16); border-radius: 14px; }
.profile-presets legend { padding: 0 6px; }
.profile-presets button { width: 42px; height: 42px; border: 2px solid transparent; border-radius: 14px; cursor: pointer; }
.profile-presets button:nth-of-type(1) { background: linear-gradient(145deg, #7ef5ee, #176cad); }
.profile-presets button:nth-of-type(2) { background: linear-gradient(145deg, #ffe099, #d9476d); }
.profile-presets button:nth-of-type(3) { background: linear-gradient(145deg, #b8fff0, #128c82); }
.profile-presets button:nth-of-type(4) { background: linear-gradient(145deg, #e4d8ff, #5542b3); }
.profile-presets button.selected { border-color: #fff4a7; box-shadow: 0 0 0 3px rgba(255,218,78,.15); transform: scale(1.08); }
#profileEditorStatus { grid-column: 1 / -1; min-height: 23px; margin: 0; }
#profileEditorStatus.error { color: #ff91a4; }
.profile-editor footer { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; padding: 0 20px 20px; }
.profile-editor footer button { min-height: 47px; border: 1px solid rgba(109,231,222,.2); border-radius: 14px; color: #b7d5da; background: rgba(16,58,79,.65); font: 1000 9px/1 system-ui; letter-spacing: .08em; cursor: pointer; }
.profile-editor footer button:last-child { border: 0; color: #032934; background: linear-gradient(135deg, #5ef3df, #8bea9f); box-shadow: 0 8px 22px rgba(82,235,188,.18); }
.profile-editor footer button:disabled { cursor: wait; opacity: .5; }
@media (max-width: 600px) {
  .profile-edit-button { left: 39px; top: 1px; width: 21px; height: 21px; }
  .profile-editor-body { grid-template-columns: 88px 1fr; gap: 12px; padding: 16px; }
  .profile-photo-preview { width: 86px; height: 86px; border-radius: 25px; }
  .profile-editor footer { padding: 0 16px 16px; }
}

.utility-button {
  isolation: isolate;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease, box-shadow .18s ease;
}
.utility-button .utility-icon {
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease;
}
.utility-button .utility-icon svg {
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: rgba(3,34,52,.32);
  stroke: #ecffff;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0,20,40,.5));
}
.utility-button .shop-icon { background: linear-gradient(145deg,#ffd96a,#e38a18); }
.utility-button .bag-icon { background: linear-gradient(145deg,#69eee1,#197fc3); }
.utility-button:is(:hover, :focus-visible) {
  transform: translateY(-3px) scale(1.07);
  filter: brightness(1.18) saturate(1.12);
  box-shadow: 0 10px 24px rgba(0,15,36,.5), 0 0 24px rgba(86,239,224,.42), inset 0 1px rgba(255,255,255,.2);
  outline: none;
}
.utility-button:is(:hover, :focus-visible) .utility-icon { transform: scale(1.08) rotate(-2deg); }
.utility-button::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(100% + 22px);
  width: max-content;
  max-width: 170px;
  padding: 7px 9px;
  border: 1px solid rgba(112,246,229,.32);
  border-radius: 9px;
  color: #eaffff;
  background: rgba(1,22,37,.94);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  font: 800 8px/1 ui-monospace, monospace;
  letter-spacing: .05em;
  opacity: 0;
  translate: -50% -4px;
  transition: opacity .15s ease, translate .15s ease;
  pointer-events: none;
}
.utility-button:is(:hover, :focus-visible)::after { opacity: 1; translate: -50% 0; }

.side-drawer {
  width: min(470px, calc(100vw - 28px));
  padding: 0 20px 22px;
  overflow-x: hidden;
  border-color: rgba(104,235,225,.28);
  background: linear-gradient(180deg,rgba(3,24,39,.97),rgba(2,14,27,.98));
  box-shadow: 0 28px 90px rgba(0,4,15,.78), inset 0 1px rgba(255,255,255,.08);
}
.drawer-hero {
  position: relative;
  height: 154px;
  margin: 0 -20px 18px;
  overflow: hidden;
  border-radius: 23px 23px 18px 18px;
  background-position: center;
  background-size: cover;
}
.drawer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(1,13,24,.64),transparent 66%), linear-gradient(0deg,rgba(2,17,29,.94),transparent 55%);
}
.marketplace-hero { background-image: url("ui/marketplace-banner-v1.png"); }
.inventory-hero { background-image: url("ui/inventory-banner-v1.png"); }
.drawer-hero span {
  position: absolute;
  z-index: 1;
  left: 20px;
  bottom: 17px;
  color: #ffe596;
  font: 1000 11px/1 ui-monospace, monospace;
  letter-spacing: .18em;
  text-shadow: 0 3px 12px #00111e;
}
.side-drawer header { align-items: center; }
.side-drawer header button { transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.side-drawer header button:is(:hover,:focus-visible) {
  transform: scale(1.08) rotate(3deg);
  border-color: rgba(103,242,225,.7);
  background: rgba(74,223,211,.14);
  outline: none;
}
.drawer-resource-strip {
  display: flex;
  min-height: 42px;
  margin-top: 14px;
  padding: 7px 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(110,233,224,.16);
  border-radius: 13px;
  background: rgba(0,10,20,.46);
}
.drawer-resource-strip b { font: 1000 14px/1 ui-monospace, monospace; }
.drawer-resource-strip small { margin-right: 8px; color: #7fa8b3; font: 800 7px/1 ui-monospace, monospace; }
.resource-orb { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.mana-orb {
  rotate: 45deg;
  border: 2px solid #d9fbff;
  border-radius: 5px 11px 5px 11px;
  background: linear-gradient(145deg,#9bfbff,#168de2);
  box-shadow: 0 0 13px rgba(67,211,255,.66), inset 0 0 6px #fff;
}
.coin-orb {
  border: 2px solid #fff0a0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,#fff5a3 0 8%,#ffd83c 31%,#d98300 100%);
  box-shadow: 0 0 12px rgba(255,201,43,.48), inset 0 0 0 2px rgba(141,74,0,.35);
}
.coin-orb::after { content: "C"; position: absolute; inset: 0; color: #805000; font: 1000 9px/19px system-ui; text-align: center; }
.market-safe { margin-left: auto; color: #75efb0; font: 900 7px/1 ui-monospace,monospace; }
.market-safe i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #75efb0; box-shadow: 0 0 8px #75efb0; }
.ship-card {
  min-height: 88px;
  border-color: rgba(109,225,235,.18);
  background: linear-gradient(135deg,rgba(7,38,57,.76),rgba(0,13,25,.58));
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ship-card:hover {
  transform: translateY(-2px);
  border-color: rgba(110,239,225,.46);
  background: linear-gradient(135deg,rgba(10,54,73,.88),rgba(1,18,32,.72));
  box-shadow: 0 10px 22px rgba(0,7,18,.34);
}
.ship-card button { transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.ship-card button:not(:disabled):is(:hover,:focus-visible) {
  transform: scale(1.06);
  filter: brightness(1.12);
  box-shadow: 0 0 18px rgba(78,240,222,.38);
  outline: none;
}

.ability-button { transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.ability-button:not(:disabled):is(:hover,:focus-visible) {
  transform: scale(1.09);
  filter: brightness(1.16) saturate(1.1);
  box-shadow: 0 0 22px rgba(88,228,255,.38);
  outline: none;
}
.ability-button.unaffordable { filter: grayscale(.35) brightness(.68); }
.ability-cost {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  width: max-content;
  translate: -50% 0;
  color: #72e8ff;
  font: 1000 7px/1 ui-monospace,monospace;
  font-style: normal;
  text-shadow: 0 2px 4px #001425;
  pointer-events: none;
}

.chat-panel,
.chat-panel.collapsed { top: max(182px, calc(env(safe-area-inset-top) + 170px)); }

@media (max-width: 600px) {
  .side-drawer { right: 7px; width: calc(100vw - 14px); max-height: calc(100dvh - 14px); padding-inline: 14px; }
  .drawer-hero { height: 126px; margin-inline: -14px; }
  .drawer-hero span { left: 15px; bottom: 13px; font-size: 9px; }
  .equipment-slots { grid-template-columns: 1fr; }
  .chat-panel,
  .chat-panel.collapsed { top: max(184px, calc(env(safe-area-inset-top) + 172px)); }
  .utility-button::after { display: none; }
  .ability-cost { top: calc(100% + 1px); font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .utility-button, .utility-button .utility-icon, .ship-card, .ship-card button,
  .ability-button, .side-drawer { transition: none !important; animation: none !important; }
}

/* v0.29.0: independent server-authoritative ship ability cluster. */
.ability-cluster {
  position: fixed;
  z-index: 24;
  right: max(150px, calc(env(safe-area-inset-right) + 140px));
  bottom: max(25px, calc(env(safe-area-inset-bottom) + 13px));
  width: 178px;
  height: 205px;
  pointer-events: none;
}
.ability-button {
  --ability-ready: 1;
  position: absolute;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 0;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 38% 29%, #358ac0, #063e70 62%, #02274c);
  box-shadow: 0 7px 15px rgba(0,15,40,.5), inset 0 0 0 4px rgba(0,24,58,.65),
    inset 0 0 0 6px rgba(255,255,255,.24);
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.ability-button:active { scale: .93; }
.ability-button:disabled { filter: grayscale(.75); opacity: .55; }
.ability-button.active { animation: abilityPulse .6s ease-in-out infinite alternate; }
.ability-button b, .ability-button small { position: absolute; z-index: 4; pointer-events: none; }
.ability-button b { bottom: 10px; font: 1000 10px/1 Impact, sans-serif; letter-spacing: .04em; text-shadow: 0 2px #00152d; }
.ability-button small { bottom: 3px; color: #ffe982; font: 900 5px/1 ui-monospace, monospace; text-transform: uppercase; }
.ability-cooldown {
  position: absolute;
  z-index: 3;
  inset: 2px;
  border-radius: 50%;
  background: conic-gradient(transparent calc(var(--ability-ready) * 1turn), rgba(0,11,30,.72) 0);
  pointer-events: none;
}
.ability-icon { position: absolute; z-index: 2; top: 13px; width: 28px; height: 28px; pointer-events: none; }
.mine-ability { right: 0; top: 0; }
.speed-ability { left: 7px; top: 69px; }
.heal-ability { right: 0; bottom: 0; }
.mine-ability .ability-icon {
  border: 3px solid #9beaff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #61778c, #14283b 60%);
  box-shadow: 0 0 12px #29d4ff;
}
.mine-ability .ability-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: repeating-conic-gradient(#d5f7ff 0 7deg, transparent 7deg 45deg);
  clip-path: polygon(46% 0,54% 0,57% 34%,75% 5%,82% 10%,63% 38%,100% 46%,100% 54%,64% 57%,94% 76%,89% 83%,60% 63%,54% 100%,46% 100%,43% 64%,24% 95%,17% 89%,37% 60%,0 54%,0 46%,36% 43%,5% 24%,11% 17%,40% 37%);
}
.speed-ability .ability-icon {
  width: 20px;
  height: 29px;
  border: 3px solid #d7f6ff;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(#1da4ff 38%, #57e5ff 39% 100%);
  box-shadow: 0 0 13px #2ccfff;
  rotate: 12deg;
}
.speed-ability .ability-icon::after { content: "⚡"; position: absolute; inset: 3px 0 0; color: white; font: 900 15px/1 system-ui; }
.heal-ability .ability-icon {
  border: 3px solid #d8ffe3;
  border-radius: 50%;
  background: radial-gradient(circle, #4aff8a, #079447 72%);
  box-shadow: 0 0 14px #39ff82;
}
.heal-ability .ability-icon::after { content: "+"; position: absolute; inset: -1px 0 0; color: white; font: 1000 24px/1 system-ui; }
@keyframes abilityPulse { from { filter: brightness(1); } to { filter: brightness(1.35); box-shadow: 0 0 24px rgba(81,242,255,.8); } }

@media (max-width: 600px) {
  .ability-cluster {
    right: max(128px, calc(env(safe-area-inset-right) + 120px));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px));
    width: 142px;
    height: 178px;
  }
  .ability-button { width: 59px; height: 59px; border-width: 2px; }
  .ability-icon { top: 11px; scale: .82; }
  .ability-button b { bottom: 9px; font-size: 9px; }
  .ability-button small { bottom: 2px; font-size: 4.5px; }
  .mine-ability { right: 0; top: 0; }
  .speed-ability { left: 0; top: 60px; }
  .heal-ability { right: 0; bottom: 0; }
}

/* v0.28.9: portrait ocean HUD matched to the supplied reference layout. */
.identity-card {
  top: max(22px, env(safe-area-inset-top));
  left: max(22px, env(safe-area-inset-left));
  width: 280px;
  min-width: 0;
  height: 60px;
  min-height: 60px;
  padding: 8px 14px 8px 80px;
  overflow: visible;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(180deg, rgba(4, 43, 78, .96), rgba(2, 29, 57, .94));
  box-shadow: 0 7px 16px rgba(0, 15, 39, .38), inset 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: none;
}
.identity-card .portrait {
  position: absolute;
  left: 7px;
  top: -7px;
  width: 66px;
  height: 74px;
  border: 3px solid rgba(255, 233, 114, .85);
  border-radius: 23px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 36%, #f9ffff 0 18%, transparent 19%),
    radial-gradient(circle at 42% 35%, #06182c 0 3%, transparent 4%),
    radial-gradient(circle at 58% 35%, #06182c 0 3%, transparent 4%),
    linear-gradient(145deg, #0f8fcc, #063969 65%, #012343);
  box-shadow: 0 5px 11px rgba(0, 10, 32, .55), inset 0 0 0 2px rgba(255,255,255,.18);
  font-size: 0;
}
.identity-card .portrait::before {
  content: "⚓";
  display: grid;
  width: 100%;
  height: 100%;
  place-items: end center;
  padding-bottom: 8px;
  color: #ffd645;
  font-size: 24px;
  filter: drop-shadow(0 2px 1px #183459);
}
.identity-copy { align-self: center; }
.identity-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 2px #00152c;
  white-space: nowrap;
}
.identity-copy > span {
  margin-top: 3px;
  color: #ffd850;
  font: 900 10px/1.1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .03em;
}
.hud-hp { height: 5px; margin-top: 5px; background: rgba(0, 10, 25, .68); }
.hud-hp i { background: linear-gradient(90deg, #78d923, #8bf742); box-shadow: 0 0 7px rgba(112,244,54,.65); }
.mana-pill,
.cargo-pill {
  position: absolute;
  left: calc(100% + 12px);
  display: flex;
  align-items: center;
  width: 132px;
  height: 28px;
  min-width: 0;
  padding: 0 29px 0 34px;
  border: 0;
  border-radius: 15px;
  color: white;
  background: linear-gradient(180deg, rgba(6, 54, 92, .98), rgba(3, 34, 67, .98));
  box-shadow: 0 4px 10px rgba(0,15,35,.4), inset 0 1px rgba(255,255,255,.12);
  text-align: left;
}
.mana-pill { top: 0; }
.cargo-pill { top: 32px; }
.mana-pill::before,
.cargo-pill::before {
  position: absolute;
  left: 5px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.mana-pill::before { content: "✦"; color: white; background: linear-gradient(145deg,#6cecff,#1979e9); }
.cargo-pill::before { content: "●"; color: #fff3a8; background: linear-gradient(145deg,#ffe04e,#e8890b); }
.mana-pill::after,
.cargo-pill::after {
  content: "+";
  position: absolute;
  right: 4px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  color: #fff;
  background: #0d79cf;
  font: 1000 16px/1 system-ui;
  box-shadow: 0 2px 4px rgba(0,0,0,.38);
}
.mana-pill small,
.cargo-pill small { display: none; }
.mana-pill b,
.cargo-pill b { margin: 0; color: white; font: 900 13px/1 ui-monospace, monospace; text-shadow: 0 2px 2px #00152c; }
.cargo-pill[data-loaded="true"]::after { inset: auto 4px auto auto; box-shadow: 0 2px 4px rgba(0,0,0,.38); }

.utility-actions {
  top: max(96px, calc(env(safe-area-inset-top) + 78px));
  left: max(25px, env(safe-area-inset-left));
  right: auto;
  gap: 12px;
}
.utility-button {
  position: relative;
  display: grid;
  width: 58px;
  height: 54px;
  min-height: 54px;
  padding: 5px;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(7, 65, 105, .98), rgba(3, 37, 72, .98));
  box-shadow: 0 6px 11px rgba(0,15,36,.38), inset 0 1px rgba(255,255,255,.14);
}
.utility-button span {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg,#72f0dc,#158fcb);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 3px 6px rgba(0,0,0,.28);
  font-size: 12px;
}
.utility-button b {
  display: block !important;
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  translate: -50% 0;
  color: white;
  font-size: 9px;
  letter-spacing: .02em;
  text-shadow: 0 2px 2px #00152c, 0 0 3px #00152c;
}

.sonar-shell {
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 126px;
}
.sonar {
  width: 126px;
  height: 126px;
  border: 2px solid rgba(255,255,255,.88);
  background: radial-gradient(circle, rgba(4,59,104,.9), rgba(2,27,61,.96));
  box-shadow: 0 5px 11px rgba(0,13,34,.4), inset 0 0 0 3px rgba(0,22,52,.6);
}
.sonar-north {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 50%;
  translate: -50% 0;
  color: white;
  font: 900 10px/1 system-ui;
  text-shadow: 0 1px 2px #00152c;
  pointer-events: none;
}
.sonar-label { bottom: 8px; color: white; }

.zoom-control {
  top: 50%;
  right: max(18px, env(safe-area-inset-right));
  width: 42px;
  height: 238px;
  padding: 14px 6px;
  translate: 0 -50%;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(3,37,68,.95), rgba(10,74,113,.96), rgba(3,37,68,.95));
  box-shadow: 0 6px 12px rgba(0,12,32,.4), inset 0 0 0 2px rgba(255,255,255,.58);
}
.zoom-control::before {
  content: "";
  position: absolute;
  top: 29px;
  bottom: 29px;
  left: 50%;
  width: 7px;
  translate: -50% 0;
  border-radius: 9px;
  background: #d9e6ed;
  box-shadow: inset 0 0 0 2px #5c7586;
}
.zoom-control b {
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid white;
  border-radius: 50%;
  color: white;
  background: #063d69;
  box-shadow: 0 3px 7px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.12);
  font-size: 21px;
}
.zoom-control input {
  z-index: 2;
  width: 26px;
  height: 150px;
  accent-color: #f4f7fb;
}

.chat-panel,
.chat-panel.collapsed {
  top: 50%;
  left: max(20px, env(safe-area-inset-left));
  width: min(320px, 44vw) !important;
  height: auto !important;
  translate: 0 -42%;
}
.chat-log {
  height: 140px !important;
  padding: 4px 2px !important;
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 15%, #000 38%, #000 100%) !important;
}
.chat-message {
  min-height: 18px;
  max-height: 18px;
  margin: 1px 0 !important;
  overflow: hidden;
  gap: 5px;
  color: white;
  font-size: 10px;
  line-height: 18px;
  white-space: nowrap;
}
.chat-message b { color: #76eeff; font-size: 10px; text-shadow: 0 2px 3px #00304d; }
.chat-message b::after { content: ":"; }
.chat-message.self b,
.chat-message.self span { color: #ffe549; }
.chat-message.system b,
.chat-message.system span { color: #ff9cae; }
.chat-content { overflow: hidden; text-overflow: ellipsis; }
.chat-content > span { display: inline; overflow: hidden; text-overflow: ellipsis; }
.chat-open-button {
  width: min(210px, 100%);
  height: 38px;
  margin: 5px 0 0;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  color: rgba(225,247,255,.7);
  background: rgba(4, 74, 120, .62);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 3px 8px rgba(0,23,49,.2);
  text-align: left;
  font: 700 10px/1 system-ui;
  letter-spacing: 0;
}
.chat-open-button::after {
  content: "➤";
  position: absolute;
  left: min(218px, calc(100% - 34px));
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: white;
  background: #087be9;
  box-shadow: 0 3px 8px rgba(0,29,72,.35);
  font-size: 19px;
}
.chat-open-button em { margin-left: auto; }
.chat-panel form {
  position: static;
  width: min(290px, 100%);
  height: 40px;
  margin-top: 5px;
  padding: 3px;
  border: 0;
  border-radius: 11px;
  background: rgba(4, 74, 120, .76);
  box-shadow: 0 3px 8px rgba(0,20,46,.35), inset 0 1px rgba(255,255,255,.1);
}
.chat-panel form .chat-photo-button {
  flex-basis: 32px;
  border-radius: 9px;
  background: rgba(32,134,205,.5);
}
.chat-panel input {
  border: 0;
  border-radius: 8px;
  padding: 0 8px;
  background: rgba(0, 36, 70, .66);
  box-shadow: none;
}
.chat-panel form button[type="submit"] {
  min-width: 42px;
  padding: 0 8px;
  border-radius: 9px;
  color: white;
  background: #087be9;
}
.chat-panel.composer-open .chat-open-button { display: none; }

.cannon-button {
  top: auto;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  width: 132px;
  height: 132px;
  translate: none;
  border: 3px solid rgba(255,255,255,.92);
  background: radial-gradient(circle at 40% 31%, #2b7dae, #063b6c 59%, #022348 100%);
  box-shadow: 0 8px 16px rgba(0,15,40,.48), inset 0 0 0 5px rgba(1,28,60,.68), inset 0 0 0 7px rgba(255,255,255,.35);
}
.cannon-art {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 27px;
  width: 75px;
  height: 48px;
  rotate: -12deg;
  border-radius: 13px 34px 34px 13px;
  background: linear-gradient(180deg,#bac9d4 0 17%,#30485f 19% 64%,#101e2e 67% 100%);
  box-shadow: inset -7px 0 0 #0b1521, 0 5px 7px rgba(0,0,0,.45);
  pointer-events: none;
}
.cannon-art::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 3px;
  width: 29px;
  height: 42px;
  border: 6px solid #152535;
  border-radius: 50%;
  background: #030810;
  box-shadow: inset 0 0 0 3px #556b7d;
}
.cannon-art i {
  position: absolute;
  left: -15px;
  bottom: -17px;
  width: 60px;
  height: 22px;
  border: 4px solid #59341a;
  border-radius: 8px;
  background: linear-gradient(180deg,#c77622,#754014);
  box-shadow: 0 4px 5px rgba(0,0,0,.35);
}
.cannon-button b {
  position: absolute;
  z-index: 3;
  bottom: 17px;
  margin: 0;
  color: white;
  font: 1000 20px/1 Impact, sans-serif;
  letter-spacing: .04em;
  text-shadow: 0 3px 2px #00152d;
}
.cannon-button small {
  position: absolute;
  z-index: 3;
  bottom: 7px;
  margin: 0;
  color: #ffe487;
  font-size: 6px;
}
.cooldown-ring { inset: 4px; }

@media (max-width: 600px) {
  .identity-card {
    top: max(12px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    width: 176px;
    height: 52px;
    min-height: 52px;
    padding: 7px 8px 7px 60px;
    border-radius: 17px;
  }
  .identity-card .portrait { left: 4px; top: -5px; width: 54px; height: 62px; border-radius: 19px; }
  .identity-card .portrait::before { padding-bottom: 7px; font-size: 20px; }
  .identity-copy strong { font-size: 10px; }
  .identity-copy > span { display: block; margin-top: 2px; font-size: 7px; }
  .hud-hp { height: 4px; margin-top: 4px; }
  .mana-pill, .cargo-pill {
    left: calc(100% + 6px);
    width: 96px;
    height: 24px;
    padding: 0 24px 0 28px;
    border-radius: 13px;
  }
  .mana-pill { top: 0; }
  .cargo-pill { top: 28px; }
  .mana-pill::before, .cargo-pill::before { left: 4px; width: 18px; height: 18px; font-size: 9px; }
  .mana-pill::after, .cargo-pill::after { right: 3px; width: 18px; height: 18px; font-size: 13px; }
  .mana-pill b, .cargo-pill b { font-size: 9px; }
  .cargo-pill[data-loaded="true"]::after { inset: auto 3px auto auto; }
  .utility-actions { top: max(76px, calc(env(safe-area-inset-top) + 62px)); left: max(13px, env(safe-area-inset-left)); }
  .utility-button { width: 48px; height: 46px; min-height: 46px; padding: 4px; border-radius: 13px; }
  .utility-button span { width: 38px; height: 38px; border-radius: 10px; font-size: 10px; }
  .utility-button b { top: calc(100% + 2px); font-size: 7px; }
  .sonar-shell { top: max(12px, env(safe-area-inset-top)); right: max(9px, env(safe-area-inset-right)); width: 92px; }
  .sonar { width: 92px; height: 92px; }
  .sonar-shell.expanded, .sonar-shell.expanded .sonar { width: min(370px, calc(100vw - 20px)); height: min(370px, calc(100vw - 20px)); }
  .sonar-north { top: 5px; font-size: 8px; }
  .zoom-control {
    top: 50%;
    right: max(10px, env(safe-area-inset-right));
    width: 36px;
    height: 218px;
    padding: 12px 5px;
    translate: 0 -50%;
    border-radius: 19px;
  }
  .zoom-control::before { top: 26px; bottom: 26px; width: 6px; }
  .zoom-control b { width: 32px; height: 32px; font-size: 18px; }
  .zoom-control input { width: 23px; height: 142px; }
  .chat-panel, .chat-panel.collapsed {
    top: 50%;
    left: max(12px, env(safe-area-inset-left));
    width: min(215px, 55vw) !important;
    translate: 0 -40%;
  }
  .chat-log { height: 133px !important; }
  .chat-message { min-height: 17px; max-height: 17px; font-size: 9px; line-height: 17px; }
  .chat-message b { font-size: 9px; }
  .chat-open-button { width: calc(100% - 42px); height: 35px; }
  .chat-open-button::after { left: calc(100% + 4px); width: 35px; height: 35px; }
  .chat-panel form { width: 100%; height: 38px; }
  .chat-panel form .chat-photo-button { flex-basis: 30px; min-width: 30px; }
  .chat-panel form button[type="submit"] { min-width: 39px; font-size: 8px; }
  .cannon-button {
    top: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px));
    width: 112px;
    height: 112px;
    translate: none;
  }
  .cannon-art { top: 20px; left: 23px; width: 64px; height: 41px; scale: .9; transform-origin: top left; }
  .cannon-button b { bottom: 15px; font-size: 17px; }
  .cannon-button small { bottom: 5px; }
}

@media (max-width: 600px) {
  .dock-prompt { bottom: max(225px, calc(env(safe-area-inset-bottom) + 213px)); }
}

/* v0.29.1: exact cannon orbit, aligned HUD controls and direct fishing. */
.ability-cluster {
  --ability-main-size: 132px;
  --ability-size: 68px;
  --ability-orbit: 145px;
  --ability-orbit-diagonal: 102.53px;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  width: var(--ability-main-size);
  height: var(--ability-main-size);
}
.ability-cluster .ability-button {
  right: auto;
  bottom: auto;
  width: var(--ability-size);
  height: var(--ability-size);
}
.ability-cluster .mine-ability {
  left: calc(50% - var(--ability-size) / 2);
  top: calc(50% - var(--ability-size) / 2 - var(--ability-orbit));
}
.ability-cluster .speed-ability {
  left: calc(50% - var(--ability-size) / 2 - var(--ability-orbit-diagonal));
  top: calc(50% - var(--ability-size) / 2 - var(--ability-orbit-diagonal));
}
.ability-cluster .heal-ability {
  left: calc(50% - var(--ability-size) / 2 - var(--ability-orbit));
  top: calc(50% - var(--ability-size) / 2);
}

.chat-panel form {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 48px;
  align-items: stretch;
  gap: 4px;
  padding: 3px;
}
.chat-panel form .chat-photo-button,
.chat-panel form button[type="submit"],
.chat-panel form input {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
}
.chat-panel form .chat-photo-button { flex-basis: auto; padding: 0; }
.chat-panel form button[type="submit"] { min-width: 0; padding: 0 5px; }

.zoom-control { position: fixed; display: block; padding: 0; }
.zoom-control::before { left: 50%; translate: -50% 0; }
.zoom-control b {
  position: absolute;
  left: 50%;
  translate: -50% 0;
}
.zoom-control b:first-child { top: 2px; }
.zoom-control b:last-child { bottom: 2px; }
.zoom-control input {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  translate: -50% -50%;
}

.sonar-shell,
.sonar {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: width, height;
}
.sonar-shell { transition: width .3s cubic-bezier(.2,.72,.2,1); }
.sonar { transition: width .3s cubic-bezier(.2,.72,.2,1), height .3s cubic-bezier(.2,.72,.2,1); -webkit-tap-highlight-color: transparent; }
#sonarCanvas { opacity: 1; transition: none; }

.fish-action {
  position: fixed;
  z-index: 26;
  min-width: 92px;
  height: 44px;
  translate: -50% 0;
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 22px;
  color: #4b2f00;
  background: linear-gradient(180deg, #fff36f, #ffc82f);
  box-shadow: 0 7px 16px rgba(0,25,53,.42), 0 0 20px rgba(255,220,55,.56), inset 0 2px rgba(255,255,255,.7);
  font: 1000 15px/1 Impact, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  touch-action: manipulation;
}
.fish-action[hidden] { display: none; }
.fish-action:active { scale: .95; }
.cast-status > small { display: block; margin-bottom: 4px; color: #ffe45b; font: 900 8px/1 ui-monospace, monospace; letter-spacing: .12em; }

@media (max-width: 600px) {
  .ability-cluster {
    --ability-main-size: 112px;
    --ability-size: 59px;
    --ability-orbit: 116px;
    --ability-orbit-diagonal: 82.02px;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px));
  }
  .chat-panel form { grid-template-columns: 30px minmax(0, 1fr) 43px; }
  .zoom-control b:first-child { top: 2px; }
  .zoom-control b:last-child { bottom: 2px; }
  .fish-action { min-width: 82px; height: 40px; font-size: 14px; }
}

/* v0.29.2: clean chat, continuous sonar, tether fishing and readable combat effects. */
.sonar { overflow: hidden; }
.sonar::before,
.sonar::after { display: none !important; }
#sonarCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
}
.sonar-sweep,
.sonar-north { pointer-events: none; }
.sonar-legend { justify-content: center; gap: 13px; }

/* v0.29.3: the ocean remains visible through compact and expanded sonar. */
.sonar {
  background: rgba(2, 30, 58, .42) !important;
  box-shadow: 0 5px 13px rgba(0,13,34,.28), inset 0 0 0 3px rgba(0,22,52,.28) !important;
  backdrop-filter: blur(3px) saturate(1.12);
  -webkit-backdrop-filter: blur(3px) saturate(1.12);
}

/* v0.34.0: Leviathan contribution, coordinates and dual cannon controls. */
.sonar-coordinates {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 6px;
  translate: -50% 0;
  color: rgba(224,255,250,.9);
  font: 900 6px/1 ui-monospace, monospace;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 1px 3px #001520;
  pointer-events: none;
}
.sonar-shell.expanded .sonar-coordinates { bottom: 11px; font-size: 9px; }

.boss-leaderboard {
  position: fixed;
  z-index: 18;
  top: max(112px, calc(env(safe-area-inset-top) + 100px));
  right: max(132px, calc(env(safe-area-inset-right) + 120px));
  width: 210px;
  padding: 10px 11px;
  border: 1px solid rgba(255,83,107,.45);
  border-radius: 13px;
  background: linear-gradient(180deg,rgba(34,6,19,.78),rgba(1,22,37,.76));
  box-shadow: 0 10px 30px rgba(0,0,0,.32), inset 0 0 22px rgba(255,50,86,.08);
  pointer-events: none;
}
.boss-leaderboard[hidden] { display: none !important; }
.boss-leaderboard > strong { display: block; margin: 0 0 7px; color: #fff1a7; font: 1000 14px/1 Impact,sans-serif; letter-spacing: .05em; }
#bossLeaderboardRows { display: grid; gap: 4px; }
#bossLeaderboardRows article { display: grid; grid-template-columns: 17px minmax(0,1fr) auto; gap: 5px; align-items: center; color: #eaffff; font: 800 9px/1.15 ui-monospace,monospace; }
#bossLeaderboardRows article.local { color: #ffe365; }
#bossLeaderboardRows b { color: #ff8da0; }
#bossLeaderboardRows span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#bossLeaderboardRows em { color: inherit; font-style: normal; }

.weapon-mode-button {
  position: fixed;
  z-index: 22;
  right: max(18px, env(safe-area-inset-right));
  top: calc(50% + 50px);
  display: grid;
  width: 58px;
  height: 38px;
  padding: 4px;
  place-content: center;
  border: 1px solid rgba(198,142,255,.65);
  border-radius: 13px;
  color: #e7ceff;
  background: linear-gradient(145deg,rgba(74,31,123,.96),rgba(22,40,84,.96));
  box-shadow: 0 6px 16px rgba(0,0,0,.38),0 0 18px rgba(169,98,255,.16);
  cursor: pointer;
  touch-action: manipulation;
}
.weapon-mode-button i { font: 900 7px/1 system-ui; letter-spacing: 1px; }
.weapon-mode-button span { margin-top: 2px; font: 1000 7px/1 ui-monospace,monospace; }
.weapon-mode-button[aria-pressed="true"] { color: white; border-color: #dca9ff; box-shadow: 0 0 23px rgba(177,90,255,.42); }

.boss-defeat-banner {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 24px;
  color: white;
  background: radial-gradient(circle,rgba(255,192,54,.2),rgba(255,35,77,.12) 35%,rgba(0,8,18,.68) 76%);
  text-align: center;
  pointer-events: none;
  animation: boss-defeat-in 4.8s cubic-bezier(.16,.82,.22,1) both;
}
.boss-defeat-banner[hidden] { display: none !important; }
.boss-defeat-banner small { color: #ff9daf; font: 900 10px/1 ui-monospace,monospace; letter-spacing: .28em; }
.boss-defeat-banner h2 { margin: 10px 0 8px; color: #fff6bd; font: 1000 clamp(46px,10vw,100px)/.82 Impact,sans-serif; letter-spacing: .025em; text-shadow: 0 7px 0 #6b172d,0 0 35px rgba(255,207,77,.72); }
.boss-defeat-banner p { margin: 0; color: #e9fbff; font: 900 clamp(11px,2.4vw,20px)/1.4 ui-monospace,monospace; }
@keyframes boss-defeat-in { 0%{opacity:0;scale:.7} 10%,70%{opacity:1;scale:1} 100%{opacity:0;scale:1.08} }

@media (max-width:600px) {
  .boss-leaderboard { top: max(232px,calc(env(safe-area-inset-top) + 220px)); right: max(9px,env(safe-area-inset-right)); width: 154px; padding: 8px; }
  .boss-leaderboard > strong { font-size: 12px; }
  #bossLeaderboardRows article { grid-template-columns: 14px minmax(0,1fr) auto; font-size: 8px; }
  #bossLeaderboardRows span { font-size: 9px; }
  .weapon-mode-button { top:auto; right:max(126px,calc(env(safe-area-inset-right) + 112px)); bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px)); width:52px; height:36px; }
}

.chat-open-button {
  position: relative;
  display: flex;
  align-items: center;
}
.chat-open-button::after {
  content: "CHAT";
  top: 0;
  left: calc(100% + 5px);
  height: 100%;
  font: 900 7px/1 system-ui;
  letter-spacing: .04em;
}
.chat-panel form { grid-template-columns: 44px minmax(0, 1fr) 48px; }
.chat-panel form .chat-photo-button {
  color: white;
  font: 900 6px/1 system-ui;
  letter-spacing: .02em;
}

.fishing-offer {
  position: fixed;
  z-index: 19;
  display: flex;
  width: min(330px, calc(100vw - 16px));
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.fishing-offer[hidden] { display: none !important; }
.fishing-offer .fish-action {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  min-width: 72px;
  height: 72px;
  padding: 0;
  place-content: center;
  translate: none;
  border-radius: 50%;
  pointer-events: auto;
}
.fish-action span { display: block; font: 900 18px/1 system-ui; }
.fish-action b { display: block; margin-top: 3px; font: 1000 14px/1 Impact, sans-serif; letter-spacing: .08em; }
.fish-action small {
  display: block;
  margin-top: 3px;
  color: #5a3200;
  font: 900 8px/1 system-ui;
  letter-spacing: .04em;
  white-space: nowrap;
}
.fishing-offer .spot-prompt {
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 10px 12px;
  align-items: center;
  border-radius: 15px;
  translate: none;
  pointer-events: none;
}
.fishing-offer .spot-orb { display: none; }
.fishing-offer .spot-prompt > div:last-child { min-width: 0; }
.fishing-offer .spot-prompt strong,
.fishing-offer .spot-prompt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cast-status { padding-right: 54px; }
.cast-status #fishingCancelButton {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: white;
  background: rgba(255,74,94,.2);
  font: 500 25px/1 system-ui;
}
.pull-card.bite-alert { animation: biteCard .55s ease-out 2; }
.pull-card.bite-alert::before,
.pull-card.bite-alert::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 3px solid rgba(255,224,75,.76);
  border-radius: 28px;
  pointer-events: none;
  animation: biteWave .85s ease-out 2;
}
.pull-card.bite-alert::after { animation-delay: .18s; }
.pull-card.bite-alert .pull-button { animation: pullUrgent .46s ease-in-out infinite alternate; }
@keyframes biteCard { 50% { scale: 1.035; filter: brightness(1.22); } }
@keyframes biteWave { to { opacity: 0; scale: 1.15; } }
@keyframes pullUrgent { to { scale: 1.04; box-shadow: 0 0 28px rgba(255,213,52,.8); } }

@media (max-width: 600px) {
  .chat-open-button::after { left: calc(100% + 4px); }
  .chat-panel form { grid-template-columns: 40px minmax(0, 1fr) 43px; }
  .fishing-offer .fish-action { flex-basis: 64px; width: 64px; min-width: 64px; height: 64px; }
  .fish-action span { font-size: 15px; }
  .fish-action b { font-size: 13px; }
  .fish-action small { font-size: 7px; }
}

/* v0.29.5: visible photo chat, profile/EXP HUD, Shop + Bag and game-over rescue. */
.identity-card .portrait {
  position: relative;
  display: grid;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  padding: 3px;
  overflow: hidden;
  place-items: center;
  border: 3px solid #ffdf63;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #7ef5ee 0 18%, #1b8cc4 48%, #07345a 100%);
  box-shadow: 0 3px 10px rgba(0,19,45,.55), inset 0 0 0 2px rgba(255,255,255,.35);
  transform: none;
}
.identity-card .portrait::before { display: none !important; }
.identity-card .portrait span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.34), transparent 38%);
  font: 1000 19px/1 system-ui;
  text-shadow: 0 2px 4px #00315a;
}
.identity-copy > span { color: #ffe568; font-weight: 1000; letter-spacing: .1em; }
.hud-exp {
  width: 100%;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(0,12,32,.75);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
}
.hud-exp i {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe45c, #83f5aa);
  box-shadow: 0 0 8px rgba(255,224,75,.72);
  transition: width .3s ease;
}
.utility-actions { display: flex; gap: 7px; }
.utility-actions .utility-button { position: relative; inset: auto; }

.chat-panel form {
  grid-template-columns: minmax(0, 1fr) 44px 48px;
}
.chat-panel form .chat-photo-button { grid-column: 2; }
.chat-panel form button[type="submit"] { grid-column: 3; }
.chat-message.photo-message {
  min-height: 70px;
  max-height: 70px;
  align-items: start;
  white-space: normal;
}
.chat-message.photo-message .chat-content > span:empty { display: none; }
.chat-message .chat-photo-card {
  display: grid !important;
  width: 96px;
  min-height: 58px;
  max-height: 62px;
  margin: 1px 0 0;
  overflow: hidden;
  pointer-events: auto;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 9px;
  background: rgba(3,31,54,.72);
  box-shadow: 0 3px 8px rgba(0,15,38,.42);
}
.chat-message .chat-photo-card img {
  width: 100%;
  height: 58px;
  object-fit: cover;
}

.respawn-panel {
  width: min(520px, calc(100vw - 28px));
  padding: 28px 26px 24px;
  overflow: visible;
  border: 2px solid rgba(255,78,99,.72);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,70,91,.24), transparent 45%),
    linear-gradient(180deg, rgba(7,23,39,.97), rgba(2,12,23,.98));
  box-shadow: 0 0 0 100vmax rgba(0,8,18,.72), 0 22px 70px rgba(0,0,0,.65),
    inset 0 1px rgba(255,255,255,.08), 0 0 38px rgba(255,63,83,.25);
  text-align: center;
}
.vessel-loss-mark {
  position: relative;
  display: grid;
  width: 86px;
  height: 86px;
  margin: -70px auto 16px;
  place-items: center;
  border: 3px solid #ff5c71;
  border-radius: 50%;
  background: radial-gradient(circle, #4a1220, #091827 70%);
  box-shadow: 0 0 30px rgba(255,65,89,.48), inset 0 0 20px rgba(255,81,105,.26);
}
.vessel-loss-mark::before,
.vessel-loss-mark::after,
.vessel-loss-mark i::before,
.vessel-loss-mark i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff5a70, transparent);
}
.vessel-loss-mark::before { rotate: 45deg; }
.vessel-loss-mark::after { rotate: -45deg; }
.vessel-loss-mark i::before { rotate: 20deg; opacity: .45; }
.vessel-loss-mark i::after { rotate: -20deg; opacity: .45; }
.vessel-loss-mark b { z-index: 1; color: #fff4f6; font-size: 34px; text-shadow: 0 0 14px #ff536b; }
.respawn-panel > small { color: #ff7b8d; font-size: 9px; letter-spacing: .24em; }
.respawn-panel h2 {
  margin: 8px 0 7px;
  color: white;
  font-size: clamp(42px, 9vw, 66px);
  line-height: .88;
  letter-spacing: .02em;
  text-shadow: 0 5px 0 rgba(120,13,31,.6), 0 0 22px rgba(255,66,89,.24);
}
.respawn-panel p { margin-bottom: 22px; color: #bed0d8; }
.respawn-panel button { min-height: 58px; border-radius: 15px; }
.respawn-panel button:first-child { box-shadow: 0 8px 22px rgba(82,235,188,.2); }
.respawn-panel button:last-child { border-color: rgba(255,92,113,.42); background: linear-gradient(135deg, #51233a, #163e5b); }
.respawn-panel em { color: #87a6b2; }

@media (max-width: 600px) {
  .identity-card .portrait { flex-basis: 46px; width: 46px; height: 46px; }
  .utility-actions { gap: 5px; }
  .chat-panel form { grid-template-columns: minmax(0, 1fr) 40px 43px; }
  .chat-log { height: 156px !important; }
  .respawn-panel { padding: 25px 18px 20px; }
  .respawn-panel > div:not(.vessel-loss-mark) { grid-template-columns: 1fr; }
  .vessel-loss-mark { width: 72px; height: 72px; margin-top: -58px; }
}

/* v0.29.6: pin the mobile captain profile left and soften passive chat by 20%. */
.identity-card .portrait {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.chat-log .chat-message { opacity: .8; }

@media (max-width: 600px) {
  .identity-card .portrait {
    left: 5px;
    top: 50%;
  }
}

/* v0.36.0: MOBA-style hold-drag-release cannon aiming. */
.cannon-aim-joystick {
  position: fixed;
  z-index: 12;
  display: grid;
  width: 220px;
  height: 220px;
  translate: -50% -50%;
  place-items: center;
  border: 2px solid rgba(103, 225, 255, .66);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(84, 213, 255, .24), rgba(19, 120, 187, .12) 55%, rgba(3, 35, 65, .08) 72%);
  box-shadow: inset 0 0 30px rgba(65, 208, 255, .22), 0 0 28px rgba(39, 199, 255, .22);
  pointer-events: none;
  transition: none;
  scale: 1;
}
.cannon-aim-joystick.active { opacity: 1; scale: 1; }
.cannon-aim-joystick::before,
.cannon-aim-joystick::after {
  content: "";
  position: absolute;
  background: rgba(134, 235, 255, .18);
}
.cannon-aim-joystick::before { top: 14%; bottom: 14%; left: 50%; width: 1px; }
.cannon-aim-joystick::after { top: 50%; left: 14%; right: 14%; height: 1px; }
.cannon-aim-joystick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border: 2px solid rgba(221, 250, 255, .88);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(185, 249, 255, .94), rgba(45, 167, 233, .82) 58%, rgba(14, 67, 123, .9));
  box-shadow: 0 7px 18px rgba(0, 18, 40, .38), 0 0 18px rgba(79, 219, 255, .42);
  transition: none;
}
.cannon-aim-joystick span {
  position: absolute;
  bottom: 15px;
  color: rgba(217, 250, 255, .82);
  font: 900 7px/1 ui-monospace, monospace;
  letter-spacing: .16em;
}
body.cannon-targeting canvas#oceanCanvas { cursor: default; }

.cannon-cancel-zone {
  position: fixed;
  z-index: 20;
  top: max(72px, calc(env(safe-area-inset-top) + 58px));
  left: 50%;
  display: grid;
  width: 132px;
  height: 62px;
  padding: 7px 12px 7px 48px;
  translate: -50% -16px;
  align-content: center;
  border: 2px solid rgba(172, 213, 224, .38);
  border-radius: 31px;
  opacity: 0;
  color: rgba(225, 239, 243, .68);
  background: rgba(4, 27, 43, .72);
  box-shadow: inset 0 0 18px rgba(136, 205, 224, .08);
  pointer-events: none;
  transition: opacity 120ms ease, translate 150ms ease, border-color 100ms ease,
    color 100ms ease, background 100ms ease, box-shadow 100ms ease;
}
body.cannon-targeting .cannon-cancel-zone { opacity: 1; translate: -50% 0; }
.cannon-cancel-zone i {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  translate: 0 -50%;
  border: 2px solid rgba(203, 226, 232, .58);
  border-radius: 50%;
  background: rgba(118, 151, 160, .18);
  box-shadow: inset 0 0 9px rgba(179, 224, 235, .12);
}
.cannon-cancel-zone b { font: 1000 11px/1 Impact, sans-serif; letter-spacing: .12em; }
.cannon-cancel-zone small { margin-top: 4px; font: 800 6px/1 ui-monospace, monospace; letter-spacing: .1em; }
.cannon-cancel-zone.armed {
  border-color: rgba(255, 70, 83, .96);
  color: #fff;
  background: rgba(104, 9, 25, .9);
  box-shadow: 0 0 30px rgba(255, 33, 61, .55), inset 0 0 24px rgba(255, 71, 91, .28);
}
.cannon-cancel-zone.armed i {
  border-color: #ffb0b8;
  background: #ff304e;
  box-shadow: 0 0 20px #ff304e, inset 0 0 8px rgba(255,255,255,.55);
}

@media (max-width: 600px) {
  .cannon-aim-joystick { width: 210px; height: 210px; }
  .cannon-aim-joystick i { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .cannon-aim-joystick span { bottom: 9px; font-size: 6px; }
  .cannon-cancel-zone {
    top: max(68px, calc(env(safe-area-inset-top) + 54px));
    width: 112px; height: 52px; padding-left: 40px; border-radius: 26px;
  }
  .cannon-cancel-zone i { left: 13px; width: 19px; height: 19px; }
}

/* v0.29.7: readable three-line chat instead of an unbounded horizontal strip. */
.chat-log .chat-message:not(.photo-message) {
  width: min(30ch, 100%);
  max-width: 30ch;
  min-height: 17px;
  max-height: 51px;
  align-items: flex-start;
  overflow: hidden;
  line-height: 17px;
  white-space: normal;
}
.chat-log .chat-message:not(.photo-message) .chat-content,
.chat-log .chat-message:not(.photo-message) .chat-content > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}
.mana-pill.cashing-in {
  animation: wallet-cash-in-pulse .34s ease-in-out infinite alternate;
}
@keyframes wallet-cash-in-pulse {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.35); transform: scale(1.045); }
}

/* v0.29.8: keep the circular Fish action left of an independent text card. */
.fishing-offer {
  width: min(360px, calc(100vw - 16px));
  gap: 10px;
}
.fishing-offer .fish-action { flex-shrink: 0; }
.fishing-offer .spot-prompt {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  translate: none;
}

/* v0.30.0: scalable towed Coin Bag, scattered vessel cargo and sparse ocean coin pickups. */
/* v0.31.0: visible Mana fishing prices, authoritative spend/refund state and Store equip flow. */
.mana-pill::before,
.cargo-pill::before,
.mana-pill::after,
.cargo-pill::after {
  top: 50%;
  transform: translateY(-50%);
}
.cargo-pill[data-loaded="true"] {
  box-shadow: 0 4px 10px rgba(0,15,35,.4), inset 0 1px rgba(255,255,255,.12),
    0 0 var(--cargo-glow, 12px) rgba(255,202,53,.38);
}
.cargo-pill[data-loaded="true"]::after {
  inset: auto 4px auto auto;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,.38);
}
.cargo-pill.cashing-in { animation: wallet-cash-in-pulse .34s ease-in-out infinite alternate; }

.fishing-offer {
  width: max-content;
  max-width: calc(100vw - 16px);
  gap: 9px;
}
.fishing-offer .spot-prompt {
  flex: 0 1 auto;
  width: max-content;
  min-width: 172px;
  max-width: 222px;
  padding-inline: 11px;
}
.fishing-offer .spot-prompt > div:last-child { width: max-content; max-width: 200px; }
.fishing-offer .spot-prompt small,
.fishing-offer .spot-prompt strong,
.fishing-offer .spot-prompt span { max-width: 200px; }

.vessel-loss-mark::before,
.vessel-loss-mark::after,
.vessel-loss-mark i::before,
.vessel-loss-mark i::after {
  transform-origin: 50% 50%;
  rotate: 0deg;
}
.vessel-loss-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.vessel-loss-mark::after { transform: translate(-50%, -50%) rotate(-45deg); }
.vessel-loss-mark i::before { transform: translate(-50%, -50%) rotate(20deg); }
.vessel-loss-mark i::after { transform: translate(-50%, -50%) rotate(-20deg); }
.vessel-loss-mark b { position: relative; z-index: 2; line-height: 1; }

/* v0.36.7: Simple Boat fleet artwork, delayed sink reveal and centered loss mark. */
.ship-preview::before { display: none; }
.ship-preview-fleet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
}
.ship-preview-fleet img {
  position: absolute;
  width: 45px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 7px 5px rgba(0,8,18,.55));
  transform-origin: 50% 50%;
}
.ship-preview-fleet img:nth-child(1) { z-index: 1; transform: rotate(90deg) scale(1.12); }
.respawn-panel:not([hidden]) { animation: vessel-loss-reveal .38s cubic-bezier(.16, 1.28, .28, 1) both; }
@keyframes vessel-loss-reveal {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: 1; transform: scale(1); }
}
.vessel-loss-mark i { position: absolute; inset: 0; }
.vessel-loss-mark b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  transform: none;
}

.sonar-legend {
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  gap: 7px 11px;
  padding: 8px 10px;
  border-radius: 14px;
}
.expanded .sonar-legend { display: grid; }
.sonar-legend .player { background: #ff982e; }
.sonar-legend .dock { background: #72f0ae; }
.sonar-legend .fish.normal { background: #e7fbff; }
.sonar-legend .fish.rare { background: #45eadc; }
.sonar-legend .fish.epic { background: #6da4ff; }
.sonar-legend .fish.legendary { background: #c58cff; }
.sonar-legend .fish.ultra { background: #ffd460; }
.sonar-legend .event { background: #ff536b; }

@media (max-width: 430px) {
  .fishing-offer .spot-prompt { min-width: 160px; max-width: 205px; }
  .fishing-offer .spot-prompt > div:last-child,
  .fishing-offer .spot-prompt small,
  .fishing-offer .spot-prompt strong,
  .fishing-offer .spot-prompt span { max-width: 183px; }
  .sonar-legend { gap: 6px 8px; padding-inline: 7px; }
  .sonar-legend span { font-size: 6px; }
}

/* v0.32.0: upper-left collapsible chat, accessible zoom rail and clearer targeting. */
.chat-panel,
.chat-panel.collapsed {
  top: max(138px, calc(env(safe-area-inset-top) + 126px));
  left: max(14px, env(safe-area-inset-left));
  translate: none;
  height: 194px !important;
}
.chat-panel.collapsed { height: 109px !important; }
.chat-panel.collapsed .chat-log { height: 57px !important; }
.chat-size-toggle {
  position: absolute;
  z-index: 3;
  top: 3px;
  right: 3px;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(112, 246, 229, .42);
  border-radius: 9px;
  color: #d9fffa;
  background: rgba(3, 45, 68, .82);
  box-shadow: 0 3px 8px rgba(0, 18, 34, .28);
  font: 1000 17px/1 system-ui;
  pointer-events: auto;
  touch-action: manipulation;
}
.chat-log { padding-right: 34px !important; }

.zoom-control {
  top: max(112px, calc(env(safe-area-inset-top) + 100px));
  right: max(7px, env(safe-area-inset-right));
  width: 48px;
  height: 218px;
  translate: none;
  cursor: ns-resize;
  touch-action: none;
}
.zoom-control input { pointer-events: none; }

@media (max-width: 600px) {
  .chat-panel,
  .chat-panel.collapsed {
    top: max(138px, calc(env(safe-area-inset-top) + 126px));
    left: max(12px, env(safe-area-inset-left));
    width: min(235px, 61vw) !important;
    translate: none;
  }
  .zoom-control {
    top: max(112px, calc(env(safe-area-inset-top) + 100px));
    right: max(7px, env(safe-area-inset-right));
    width: 48px;
    height: 218px;
    translate: none;
  }
}

/* v0.35.0 final overrides: attached cannon mode, horizontal zoom and compact chat. */
.chat-panel,
.chat-panel.collapsed { width: min(256px, 35.2vw) !important; }

.zoom-control {
  top: max(101px, calc(env(safe-area-inset-top) + 83px));
  left: max(165px, calc(env(safe-area-inset-left) + 153px));
  right: auto;
  width: 146px;
  height: 42px;
  padding: 0;
  translate: none;
  border-radius: 21px;
  cursor: ew-resize;
  touch-action: none;
}
.zoom-control::before {
  top: 50%; bottom: auto; left: 29px; right: 29px;
  width: auto; height: 6px; translate: 0 -50%;
}
.zoom-control b {
  top: 50%; bottom: auto; width: 28px; height: 28px;
  translate: 0 -50%; font-size: 15px;
}
.zoom-control b:first-child { left: auto; right: 4px; top: 50%; }
.zoom-control b:last-child { left: 4px; right: auto; bottom: auto; }
.zoom-control input {
  left: 50%; top: 50%; width: 88px; height: 22px;
  translate: -50% -50%; writing-mode: horizontal-tb; direction: ltr;
  cursor: ew-resize;
}
.cannon-button { bottom: max(42px, calc(env(safe-area-inset-bottom) + 30px)); }
.cannon-button b,
.cannon-button small {
  left: 50%; width: max-content; max-width: calc(100% - 18px);
  translate: -50% 0; text-align: center; white-space: nowrap;
}
.cannon-button b { bottom: 21px; }
.cannon-button small { bottom: 9px; }
.weapon-mode-button {
  top: auto;
  right: max(8px, calc(env(safe-area-inset-right) + 2px));
  bottom: max(25px, calc(env(safe-area-inset-bottom) + 13px));
  width: 46px; height: 46px; padding: 3px;
  border-width: 2px; border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0,0,0,.5), 0 0 16px rgba(169,98,255,.24), inset 0 0 0 2px rgba(255,255,255,.1);
}
.weapon-mode-button i { font-size: 6px; letter-spacing: 0; }
.weapon-mode-button span { margin-top: 1px; font-size: 6px; }

/* v0.36.4: modal-safe HUD stacking and a vessel-relative harbor cash-in action. */
.drawer-backdrop { z-index: 90; }
.side-drawer,
.respawn-panel,
.fishing-session,
.boss-awards { z-index: 91; }
.photo-viewer { z-index: 92; }
.reel-feedback { z-index: 93; }

body.popup-open #oceanCanvas,
body.popup-open .utility-actions,
body.popup-open .zoom-control,
body.popup-open .sonar-shell,
body.popup-open .chat-panel,
body.popup-open .boss-leaderboard,
body.popup-open .fishing-offer,
body.popup-open .dock-prompt,
body.popup-open .ability-cluster,
body.popup-open .cannon-button,
body.popup-open .weapon-mode-button,
body.popup-open .cannon-aim-joystick,
body.popup-open .cannon-cancel-zone,
body.popup-open .joystick {
  z-index: 1 !important;
  pointer-events: none !important;
}

.dock-prompt {
  position: fixed;
  z-index: 19;
  display: flex;
  width: max-content;
  height: 82px;
  gap: 8px;
  padding: 0;
  translate: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.dock-prompt[hidden] { display: none !important; }
.dock-cash-action[hidden] { display: none !important; }
.dock-cash-action {
  display: grid;
  width: 82px;
  height: 82px;
  padding: 8px 5px 7px;
  place-content: center;
  border: 3px solid rgba(255,255,255,.92) !important;
  border-radius: 50% !important;
  color: #4d2b00 !important;
  background: radial-gradient(circle at 36% 27%, #fffbd0 0 8%, #ffe15a 30%, #ffb423 72%, #d87400 100%) !important;
  box-shadow: 0 8px 22px rgba(0,20,38,.45), 0 0 22px rgba(255,208,58,.58), inset 0 0 0 3px rgba(144,73,0,.3) !important;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.dock-cash-action span,
.dock-cash-action b,
.dock-cash-action small { display: block; }
.dock-cash-action span {
  width: 23px;
  height: 23px;
  margin: 0 auto 3px;
  border: 2px solid #fff5a3;
  border-radius: 50%;
  color: #754300;
  background: #ffc82e;
  box-shadow: inset 0 0 0 2px #d88700;
  font: 1000 11px/19px ui-monospace, monospace;
}
.dock-cash-action b { font: 1000 13px/1 Impact, sans-serif; letter-spacing: .06em; }
.dock-cash-action small { margin-top: 3px; color: #5c3400; font: 900 7px/1 system-ui; white-space: nowrap; }
.dock-cash-action small strong { font-size: 9px; }
.dock-cash-action:active { scale: .95; }
.dock-cash-action:disabled { opacity: .62; filter: saturate(.55); cursor: wait; }

/* v0.36.5: keep drag-to-cancel within the right-hand combat thumb zone. */
.cannon-cancel-zone {
  top: 50%;
  left: auto;
  right: max(24px, calc(env(safe-area-inset-right) + 12px));
  translate: 16px -50%;
}
body.cannon-targeting .cannon-cancel-zone { translate: 0 -50%; }

@media (max-width: 600px) {
  .chat-panel,
  .chat-panel.collapsed { width: min(188px, 48.8vw) !important; }
  .zoom-control {
    top: max(78px, calc(env(safe-area-inset-top) + 64px));
    left: max(119px, calc(env(safe-area-inset-left) + 107px));
    right: auto; width: 124px; height: 38px; border-radius: 19px;
  }
  .zoom-control::before { left: 27px; right: 27px; height: 5px; }
  .zoom-control b { width: 26px; height: 26px; font-size: 14px; }
  .zoom-control input { width: 72px; height: 20px; writing-mode: horizontal-tb; }
  .cannon-button { bottom: max(36px, calc(env(safe-area-inset-bottom) + 24px)); }
  .cannon-button b { bottom: 19px; }
  .cannon-button small { bottom: 8px; }
  .weapon-mode-button {
    top: auto; right: max(6px, env(safe-area-inset-right));
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px));
    width: 42px; height: 42px; border-radius: 50%;
  }
  .cannon-cancel-zone {
    top: 48%;
    right: max(14px, calc(env(safe-area-inset-right) + 6px));
  }
}

/* v0.36.9: keep the complete 124px cannon aim input radius inside the viewport. */
.cannon-button,
.ability-cluster {
  right: max(82px, calc(env(safe-area-inset-right) + 70px));
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 70px));
}
.weapon-mode-button {
  right: max(68px, calc(env(safe-area-inset-right) + 56px));
  bottom: max(65px, calc(env(safe-area-inset-bottom) + 53px));
}

@media (max-width: 600px) {
  .cannon-button,
  .ability-cluster {
    right: max(88px, calc(env(safe-area-inset-right) + 76px));
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 76px));
  }
  .weapon-mode-button {
    right: max(80px, calc(env(safe-area-inset-right) + 68px));
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px));
  }
}

/* v0.36.11: preserve a clear gap below the Shop/Bag utility row. */
.chat-panel,
.chat-panel.collapsed {
  top: max(158px, calc(env(safe-area-inset-top) + 146px));
}

@media (max-width: 600px) {
  .chat-panel,
  .chat-panel.collapsed {
    top: max(160px, calc(env(safe-area-inset-top) + 148px));
  }
}
.dock-shop-action {
  display: grid;
  width: 82px;
  height: 82px;
  padding: 8px 5px 7px;
  place-content: center;
  border: 3px solid #ffe184;
  border-radius: 22px;
  color: #fff4c5;
  background: linear-gradient(145deg, #bd6c2c, #713016 62%, #42180c);
  box-shadow: inset 0 0 0 3px rgba(255,218,123,.18), 0 6px 0 #351208, 0 10px 22px rgba(0,20,38,.48), 0 0 20px rgba(255,183,54,.26);
  text-align: center;
  text-shadow: 0 2px #381309;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.dock-shop-action span { display: grid; width: 30px; height: 30px; margin: 0 auto 3px; place-items: center; border: 2px solid #f7cb67; border-radius: 9px; background: rgba(54,20,8,.4); }
.dock-shop-action svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dock-shop-action b { font: 1000 13px/1 Impact, sans-serif; letter-spacing: .07em; }
.dock-shop-action small { margin-top: 3px; color: #f3ce78; font: 900 7px/1 system-ui; }
.dock-shop-action:is(:hover,:focus-visible) { filter: brightness(1.15); transform: translateY(-2px); box-shadow: inset 0 0 0 3px rgba(255,231,160,.24), 0 8px 0 #351208, 0 13px 25px rgba(0,20,38,.5), 0 0 24px rgba(255,193,64,.36); }
.dock-shop-action:active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(30,8,2,.45), 0 2px 0 #351208; }
.store-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; padding: 5px; border: 2px solid #6e3518; border-radius: 15px; background: rgba(39,14,7,.48); box-shadow: inset 0 2px 7px rgba(0,0,0,.32); }
.store-categories button { min-height: 38px; border: 1px solid #9c5a24; border-radius: 10px; color: #d9b978; background: linear-gradient(180deg,#633018,#3d190e); font: 1000 9px/1 system-ui; letter-spacing: .1em; cursor: pointer; }
.store-categories button.active { border-color: #ffe184; color: #3a190b; background: linear-gradient(180deg,#ffd86b,#d98a25); box-shadow: inset 0 2px rgba(255,249,202,.5), 0 0 13px rgba(255,193,64,.25); }
.store-grid > [hidden] { display: none !important; }
.profile-voyage { grid-column: 1 / -1; display: grid; gap: 10px; padding: 14px; border: 2px solid #754019; border-radius: 17px; color: #3a190c; background: linear-gradient(145deg,#f6dda1,#dcb36a); box-shadow: inset 0 0 0 2px rgba(255,241,189,.38), 0 5px 0 #3b190b, 0 9px 18px rgba(0,0,0,.2); }
.profile-voyage > header { display: flex; align-items: center; justify-content: space-between; padding: 0; border: 0; box-shadow: none; }
.profile-voyage > header span,
.profile-owned > span,
.profile-loadout span { color: #774018; font: 1000 8px/1 ui-monospace,monospace; letter-spacing: .09em; }
.profile-voyage > header b { color: #51250e; font: 1000 13px/1 Impact,sans-serif; letter-spacing: .05em; }
.profile-xp-track { height: 12px; overflow: hidden; border: 2px solid #6c3616; border-radius: 99px; background: #281208; box-shadow: inset 0 2px 4px rgba(0,0,0,.48); }
.profile-xp-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#51ddd5,#77e99f,#ffe16b); box-shadow: inset 0 2px rgba(255,255,255,.32), 0 0 9px rgba(85,230,191,.45); transition: width .25s ease; }
.profile-voyage > small { color: #7b4c25; font: 900 8px/1 ui-monospace,monospace; text-align: right; }
.profile-loadout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-loadout button { display: grid; grid-template-columns: 54px minmax(0,1fr); grid-template-rows: auto auto; min-width: 0; padding: 8px; border: 1px solid #9b632d; border-radius: 11px; color: inherit; background: rgba(255,247,211,.34); text-align: left; cursor: pointer; }
.profile-loadout button:is(:hover,:focus-visible) { border-color: #45b995; background: rgba(132,239,199,.26); transform: translateY(-1px); }
.profile-loadout img { grid-row: 1 / 3; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(52,23,8,.28)); }
.profile-loadout b { display: block; overflow: hidden; margin-top: 5px; color: #3d1b0c; font: 1000 11px/1.2 system-ui; text-overflow: ellipsis; white-space: nowrap; }
.profile-owned { display: grid; gap: 6px; }
.profile-owned > div { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; }
.profile-owned > div button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #9b632d; border-radius: 99px; color: #6a3818; background: rgba(255,247,211,.4); font: 900 8px/1 system-ui; cursor: pointer; }
.profile-owned > div button:is(:hover,:focus-visible) { border-color: #45b995; background: rgba(132,239,199,.25); }
.profile-owned > div button img { width: 25px; height: 25px; object-fit: contain; }
.profile-owned > div button.equipped { border-color: #4d9e7c; color: #164a3c; background: rgba(93,222,174,.3); box-shadow: 0 0 9px rgba(60,207,156,.22); }
.profile-voyage #profileHarborButton { min-height: 40px; border: 2px solid #ffe184; border-radius: 11px; color: #3a190b; background: linear-gradient(180deg,#ffd86b,#d98a25); box-shadow: inset 0 2px rgba(255,249,202,.52), 0 3px 0 #66300f; font: 1000 9px/1 system-ui; letter-spacing: .07em; cursor: pointer; }

/* Reward wallet, dummy checkout and compact profile polish. */
.account-drawer { width: min(860px, calc(100vw - 18px)); max-width: 860px; height:min(860px,calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
.wallet-head { display:grid; grid-template-columns:1fr; gap:12px; align-items:stretch; }
.wallet-head .account-balance { margin:0; }
.coin-bag-button,.wallet-history-button { min-width:112px; border:2px solid #f0b54b; border-radius:16px; color:#fff4cf; background:linear-gradient(180deg,#633019,#32150e); font:1000 11px/1 system-ui; letter-spacing:.08em; cursor:pointer; }
.coin-bag-button { position:relative; display:grid; place-items:center; }
.coin-bag-button b { position:absolute; top:8px; right:8px; display:grid; place-items:center; min-width:23px; height:23px; border:2px solid #fff; border-radius:50%; color:#fff; background:#e4313f; }
.wallet-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }
.wallet-tabs button { position:relative; min-height:42px; border:2px solid #8d4d22; border-radius:12px; color:#f9dfad; background:#3a180f; font:1000 10px/1 system-ui; cursor:pointer; }
.wallet-tabs #coinBagCount { position:absolute; top:-9px; right:-7px; display:grid; place-items:center; min-width:23px; height:23px; padding:0 5px; border:2px solid #fff; border-radius:999px; color:#fff; background:#e4313f; font:1000 10px/1 system-ui; }
.wallet-tabs #coinBagCount[hidden] { display:none; }
.wallet-tabs button.active { color:#35170c; background:linear-gradient(#ffe09a,#dda03d); }
.wallet-page[hidden] { display:none!important; }
.reward-search { display:grid; gap:6px; color:#f1c270; font:900 9px/1 system-ui; letter-spacing:.1em; }
.reward-search input { min-height:44px; padding:0 14px; border:2px solid #9a5728; border-radius:13px; color:#fff7e1; background:#1e0d0a; font:700 14px system-ui; }
.reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.reward-card { display:grid; grid-template-rows:145px auto auto; gap:9px; min-width:0; padding:12px; border:2px solid #af6a31; border-radius:17px; color:#35170c; background:linear-gradient(145deg,#f8e1a8,#d9a95c); box-shadow:inset 0 0 0 2px #fff0bb80,0 5px 0 #3b170b; }
.reward-card div { display:grid; gap:4px; }.reward-card b{font:1000 14px/1.1 system-ui}.reward-card small{font:700 10px/1.3 system-ui}
.reward-card button { min-height:39px; border:2px solid #ffcf65; border-radius:10px; color:#fff; background:linear-gradient(#a94f18,#61240d); font:1000 10px/1 system-ui; cursor:pointer; }
.reward-product-image { display:block; width:100%; height:100%; background-image:url("ui/reward-products.png"); background-repeat:no-repeat; background-size:300% 200%; background-position:calc(var(--reward-x) * -50%) calc(var(--reward-y) * -100%); }
.reward-bag-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.bag-order { display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:center; min-height:130px; padding:12px; border:2px solid #9f602d; border-radius:16px; color:#3d1a0d; background:#efd08a; }
.bag-order .reward-product-image { height:105px; }.bag-order>div{display:grid;gap:8px}.bag-order code{padding:9px;border-radius:8px;color:#dffcff;background:#082f3b;font:900 12px monospace}.delivery-status{color:#176443;font-weight:900}
.mana-package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mana-package-grid button { display:grid; gap:8px; min-height:95px; place-content:center; border:2px solid #86efff; border-radius:16px; color:#eaffff; background:linear-gradient(145deg,#126584,#073448); box-shadow:inset 0 0 18px #58e8ff26; cursor:pointer; }.mana-package-grid small{font:1000 13px system-ui}.mana-package-grid b{color:#80f2ff;font:1000 16px system-ui}
.account-history .credit{color:#17784c}.account-history .debit{color:#b7292f}
.reward-checkout { width:min(560px,calc(100vw - 24px)); padding:0; border:3px solid #bd742d; border-radius:22px; color:#35170c; background:#f3d48e; box-shadow:0 30px 90px #000b; }.reward-checkout::backdrop{background:#001823b8;backdrop-filter:blur(5px)}
.reward-checkout form{display:grid;gap:14px}.reward-checkout header,.reward-checkout footer{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:#4a1e10;color:#fff0c8}.reward-checkout header button{width:38px;height:38px;border-radius:50%;color:#fff;background:#9a431d;border:2px solid #ffcd68}.reward-checkout footer button{min-height:43px;padding:0 22px;border:2px solid #d78b31;border-radius:11px;font-weight:1000}.reward-checkout>form>div,.reward-checkout p{margin:0 18px}.reward-checkout label{display:grid;gap:6px;margin:9px 0;font:900 10px system-ui}.reward-checkout input,.reward-checkout textarea{padding:11px;border:2px solid #9e612d;border-radius:10px;color:#2d160c!important;caret-color:#2d160c;background:#fff5d7;font:700 14px system-ui}.reward-checkout input::placeholder,.reward-checkout textarea::placeholder{color:#805334;opacity:1}.reward-checkout textarea{min-height:80px;resize:vertical}
#rewardCheckoutProduct { display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px; align-items:center; min-height:100px; }
#rewardCheckoutProduct .reward-product-image { width:100px; height:100px; aspect-ratio:1; }
#rewardCheckoutProduct>div { display:grid; gap:5px; min-width:0; }
#rewardCheckoutProduct b { font-size:17px; }
#rewardCheckoutProduct span { font-size:13px; }
.profile-voyage { padding:2px 0 12px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.profile-level-row { display:flex; align-items:center; justify-content:space-between; color:#4d220e; }.profile-level-row b{font:1000 20px/1 Impact,sans-serif}.profile-level-row small{font:900 9px ui-monospace,monospace}
.profile-editor form>footer { position:sticky; bottom:0; z-index:8; background:linear-gradient(180deg,#32170cf2,#1c0b07); box-shadow:0 -12px 24px #1b080940; }
@media(max-width:620px){.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reward-card{grid-template-rows:105px auto auto}.reward-bag-list{grid-template-columns:1fr}.mana-package-grid{grid-template-columns:repeat(2,1fr)}.wallet-head{grid-template-columns:1fr}}
@media (max-width: 600px) { .profile-loadout { grid-template-columns: 1fr; } }

/* v0.37.0 final clearance override: keep chat below the complete utility row and tooltips. */
.chat-panel,
.chat-panel.collapsed { top: max(182px, calc(env(safe-area-inset-top) + 170px)); }
@media (max-width: 600px) {
  .chat-panel,
  .chat-panel.collapsed { top: max(184px, calc(env(safe-area-inset-top) + 172px)); }
}

/* v0.37.7: explicit cannon modes and desktop hover feedback. */
.cannon-button {
  transition: scale .16s ease, filter .16s ease, box-shadow .16s ease;
}
.cannon-button b { font-size: 16px; letter-spacing: .025em; }
.weapon-mode-button {
  right: max(14px, calc(env(safe-area-inset-right) + 8px));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  width: 86px;
  height: 42px;
  grid-template-columns: 17px 1fr;
  column-gap: 4px;
  border-radius: 14px;
}
.weapon-mode-button i { font-size: 13px; }
.weapon-mode-button span { margin: 0; font-size: 7px; line-height: 1.05; }
.weapon-mode-button[data-active-mode="multi"] {
  color: #fff;
  border-color: #dca9ff;
  background: linear-gradient(145deg,rgba(104,38,164,.98),rgba(34,48,105,.98));
}
.cannon-button:not(:disabled):not(:active):not(.aiming):is(:hover,:focus-visible) {
  scale: 1.07;
  filter: brightness(1.2) saturate(1.14);
  box-shadow: 0 12px 28px rgba(0,15,40,.58), 0 0 34px rgba(71,195,255,.58),
    inset 0 0 0 5px rgba(1,28,60,.58), inset 0 0 0 7px rgba(255,255,255,.5);
  outline: none;
}
.weapon-mode-button:not(:disabled):is(:hover,:focus-visible) {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.2);
  box-shadow: 0 9px 24px rgba(0,0,0,.5), 0 0 26px rgba(190,112,255,.52);
  outline: none;
}
@media (max-width: 600px) {
  .cannon-button b { font-size: 13px; }
  .weapon-mode-button {
    width: 72px;
    height: 38px;
    right: max(12px, calc(env(safe-area-inset-right) + 6px));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px));
  }
  .weapon-mode-button span { font-size: 6px; }
}

/* v0.49: clearer harbor marketplace, centered combat labels, and level celebration. */
.dock-shop-action {
  color: #fff !important;
  background: linear-gradient(145deg,#a94d20,#64230f 64%,#321006);
}
.dock-shop-action b { color: #fff; font-family: Impact,"Trebuchet MS",sans-serif; }
.dock-shop-action small { color: #ffe56f; text-shadow: 0 2px #381309; }
.side-drawer,
.store-categories,
.ship-card,
.profile-cosmetics { font-family: "Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif; }
.side-drawer h2,
.ship-card strong { font-family: Impact,"Trebuchet MS",sans-serif; letter-spacing: .045em; }
.store-categories button {
  color: #fff2c6;
  font: 1000 11px/1 "Trebuchet MS",system-ui,sans-serif;
  text-shadow: 0 2px #2d1007;
}
.store-categories button.active { color: #2d1308; text-shadow: 0 1px rgba(255,255,255,.55); }
.profile-cosmetics button,
.profile-cosmetics label { color: #3c1b0d; font-family: "Trebuchet MS",system-ui,sans-serif; font-weight: 900; }
.profile-cosmetics button[data-profile-style="coral"] { color: #581c1c; background: linear-gradient(145deg,#ffd1b9,#ec796c); }
.profile-cosmetics button[data-profile-style="tide"] { color: #073b40; background: linear-gradient(145deg,#c5fff1,#62d4c7); }
.profile-cosmetics button[data-profile-style="royal"] { color: #251451; background: linear-gradient(145deg,#e3d9ff,#9882e8); }
.ability-button b,
.ability-button small,
.ability-button .ability-cost,
.cannon-button b,
.cannon-button small { z-index: 12; text-align: center; pointer-events: none; }
.ability-button b { top: 54%; bottom: auto; translate: 0 -50%; font-size: 11px; }
.ability-button small { top: 70%; bottom: auto; color: #fff3a0; font-size: 6px; }
.ability-button .ability-cost { top: 82%; bottom: auto; color: #ffe477; font-size: 5px; }
.cannon-button b { left: 50%; top: 55%; bottom: auto; width: 90%; translate: -50% -50%; font-size: 18px; }
.cannon-button small { left: 50%; top: 72%; bottom: auto; width: 88%; translate: -50% 0; font-size: 7px; }
.weapon-mode-button {
  right: max(42px, calc(env(safe-area-inset-right) + 36px));
  bottom: max(54px, calc(env(safe-area-inset-bottom) + 48px));
  width: 82px; height: 44px;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: center; justify-items: center;
  padding: 5px 7px; column-gap: 4px;
}
.weapon-mode-button i,
.weapon-mode-button span { display: grid; height: 100%; margin: 0; place-items: center; text-align: center; }
.weapon-mode-button span { line-height: 1.1; }
.level-up-celebration {
  position: fixed; z-index: 90; inset: 0;
  display: grid; place-items: center;
  overflow: hidden; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%,rgba(130,23,177,.28),rgba(4,10,28,.12) 34%,transparent 68%);
}
.level-up-celebration[hidden] { display: none !important; }
.level-up-celebration.show { opacity: 1; animation: levelUpBackdrop 3.45s ease both; }
.level-up-rays { position: absolute; width: max(150vmax,1400px); aspect-ratio: 1; opacity: .3; background: repeating-conic-gradient(from 0deg,#fff2a2 0 4deg,transparent 4deg 14deg); filter: blur(2px); mask-image: radial-gradient(circle,#000 0 42%,rgba(0,0,0,.78) 58%,transparent 76%); animation: levelRays 7s linear infinite; }
.level-up-badge { position: relative; width: min(88vw,590px); aspect-ratio: 1; display: grid; place-items: center; transform-origin: 50% 54%; filter: drop-shadow(0 22px 28px rgba(0,0,0,.54)) drop-shadow(0 0 30px rgba(244,54,255,.48)); }
.level-up-celebration.show .level-up-badge { animation: levelUpCelebrate 3.45s cubic-bezier(.2,.82,.22,1) both; }
.level-up-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(circle at 50% 50%,#000 0 58%,rgba(0,0,0,.92) 68%,transparent 88%); mask-image: radial-gradient(circle at 50% 50%,#000 0 58%,rgba(0,0,0,.92) 68%,transparent 88%); }
.level-up-badge strong,.level-up-badge b,.level-up-badge small { position: absolute; z-index: 2; text-align: center; }
.level-up-badge strong { top: 8.8%; color: #fff36c; font: 1000 clamp(38px,8vw,68px)/.88 Impact,"Trebuchet MS",sans-serif; letter-spacing: .035em; -webkit-text-stroke: 2px #7a159c; text-shadow: 0 5px 0 #a73a00,0 8px 12px rgba(54,0,62,.7),0 0 20px #ff5eff; transform: rotate(-2deg); }
.level-up-badge b { top: 38%; color: #8b159f; font: 1000 clamp(84px,19vw,150px)/1 Impact,"Trebuchet MS",sans-serif; -webkit-text-stroke: 2px #fff0a1; text-shadow: 0 5px 0 #f3a900,0 8px 14px rgba(83,12,35,.36); }
.level-up-badge small { bottom: calc(10.5% + 20px); color: #fff7c4; font: 1000 clamp(13px,2.8vw,20px)/1 "Trebuchet MS",sans-serif; letter-spacing: .16em; text-shadow: 0 3px 0 #5e167c,0 0 10px #ef6cff; }
@keyframes levelRays { to { rotate: 1turn; } }
@keyframes levelUpBackdrop { 0%,100% { opacity: 0; } 10%,78% { opacity: 1; } }
@keyframes levelUpCelebrate {
  0% { transform: scale(.16) translateY(34px); opacity: 0; }
  12% { transform: scale(1.12) translateY(-6px); opacity: 1; }
  18% { transform: scale(.96) translateY(2px); }
  24%,78% { transform: scale(1) translateY(0); opacity: 1; }
  88% { transform: scale(1.04) translateY(-4px); opacity: 1; }
  100% { transform: scale(.18) translateY(18px); opacity: 0; }
}
@media (max-width:600px) {
  .ability-button b { font-size: 9px; }
  .cannon-button b { font-size: 14px; }
  .weapon-mode-button { right: max(28px, calc(env(safe-area-inset-right) + 22px)); bottom: max(40px, calc(env(safe-area-inset-bottom) + 34px)); width: 70px; height: 40px; }
  .level-up-badge { width: min(96vw,470px); }
}

/* v0.37.9: tighter, lower mobile combat cluster with a right-shifted cannon. */
@media (max-width: 600px) {
  .cannon-button,
  .ability-cluster {
    right: max(68px, calc(env(safe-area-inset-right) + 56px));
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px));
  }

  .ability-cluster {
    --ability-orbit: 94px;
    --ability-orbit-diagonal: 66.47px;
  }

  .weapon-mode-button {
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 4px));
  }
}

/* v0.37.10: move the complete mobile cannon and skill cluster 15px right and down. */
@media (max-width: 600px) {
  .cannon-button,
  .ability-cluster {
    right: max(53px, calc(env(safe-area-inset-right) + 41px));
    bottom: max(57px, calc(env(safe-area-inset-bottom) + 45px));
  }
}

/* v0.38.0: simple personal cosmetics that remain readable in the profile editor. */
.profile-cosmetics {
  grid-column: 1 / -1;
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 12px 10px 10px;
  border: 1px solid rgba(87,226,235,.22);
  border-radius: 15px;
}
.profile-cosmetics legend { padding: 0 7px; color: #77e9e6; font: 900 8px/1 ui-monospace, monospace; letter-spacing: .12em; }
.profile-cosmetics button {
  min-width: 50px; min-height: 42px; padding: 7px; border: 2px solid rgba(162,233,255,.34);
  border-radius: 12px; color: #eaffff; background: rgba(8,58,83,.82);
  font: 900 8px/1 system-ui; cursor: pointer;
}
.profile-cosmetics button.selected { border-color: #ffe56a; box-shadow: 0 0 15px rgba(255,226,82,.52); transform: translateY(-2px); }
@media (max-width: 600px) {
  .profile-cosmetics { gap: 6px; overflow-x: auto; }
  .profile-cosmetics button { min-width: 45px; min-height: 39px; }
}

/* The zoom bar is physically attached below sonar and inherits its width. */
.sonar-shell .zoom-control {
  position: relative; inset: auto; display: block;
  width: 100%; height: 42px; margin-top: 7px; padding: 0;
  translate: none; border-radius: 21px; cursor: ew-resize;
}
.sonar-shell .zoom-control::before {
  top: 50%; bottom: auto; left: 29px; right: 29px;
  width: auto; height: 6px; translate: 0 -50%;
}
.sonar-shell .zoom-control b { top: 50%; bottom: auto; width: 28px; height: 28px; translate: 0 -50%; }
.sonar-shell .zoom-control b:first-child { left: auto; right: 4px; }
.sonar-shell .zoom-control b:last-child { left: 4px; right: auto; }
.sonar-shell .zoom-control input {
  left: 50%; top: 50%; width: calc(100% - 58px); height: 22px;
  translate: -50% -50%; writing-mode: horizontal-tb; direction: ltr;
}

/* v0.40.9: original cartoon wooden naval UI foundation. */
:root {
  --wood-dark: #3a180d;
  --wood-mid: #743617;
  --wood-warm: #a95a25;
  --wood-light: #d78a3c;
  --parchment: #f4d895;
  --parchment-ink: #32180d;
  --brass: #f5c653;
  --brass-dark: #8f5417;
  --iron: #263b44;
  --rope: #d5ad62;
  --naval-panel: linear-gradient(105deg, rgba(63,28,14,.98), rgba(126,59,24,.98) 48%, rgba(70,30,14,.98));
  --wood-edge: 0 0 0 2px #2a1009, 0 0 0 4px #c47b31, 0 0 0 6px #4a210f;
}

/* Shared wooden boards for every major modal and drawer. */
.respawn-panel,
.boss-awards,
.side-drawer,
.profile-editor,
.photo-viewer {
  border: 3px solid var(--brass-dark);
  color: #fff8dc;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255,214,124,.075) 49% 51%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, rgba(35,12,5,.06) 3px 5px),
    var(--naval-panel);
  box-shadow: var(--wood-edge), 0 24px 70px rgba(0,5,12,.68), inset 0 1px rgba(255,231,169,.22);
}
.side-drawer::before,
.respawn-panel::before,
.boss-awards::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: -1;
  pointer-events: none;
  border: 1px dashed rgba(246,205,108,.28);
  border-radius: inherit;
}
.side-drawer header,
.profile-editor header,
.photo-viewer header {
  border-bottom: 2px solid rgba(47,17,7,.78);
  box-shadow: 0 2px rgba(244,199,92,.2);
}
.side-drawer header small,
.profile-editor header small,
.profile-editor legend,
.profile-name-field > span,
.photo-viewer header strong,
.respawn-panel > small,
.fishing-session > small,
.boss-awards > small {
  color: var(--parchment);
  text-shadow: 0 2px 0 #3a1709;
}
.side-drawer h2,
.profile-editor h2,
.respawn-panel h2,
.boss-awards h2 {
  color: #fff3bf;
  text-shadow: 0 3px 0 #4b1d0b, 0 0 12px rgba(255,195,66,.2);
}

/* Parchment cards nested inside the wood frame. */
.ship-card,
.boss-awards-list article,
.profile-presets,
.profile-cosmetics,
.drawer-resource-strip {
  border: 2px solid #7c471e;
  color: var(--parchment-ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.28), transparent 24%),
    linear-gradient(135deg, #f6dda1, #ddb66c);
  box-shadow: inset 0 0 0 2px rgba(255,239,184,.42), 0 5px 0 #3b190b, 0 8px 15px rgba(0,0,0,.22);
}
.ship-card:hover { border-color: var(--brass); box-shadow: inset 0 0 0 2px rgba(255,244,194,.55), 0 5px 0 #3b190b, 0 10px 20px rgba(0,0,0,.3); }
.ship-card.selected { border-color: #ffe477; box-shadow: inset 0 0 0 2px #9c5c1d, 0 0 18px rgba(255,213,79,.46), 0 5px 0 #3b190b; }
.ship-card small,
.side-drawer > p,
.boss-awards > p,
.photo-viewer p { color: #ead7ad; }
.ship-card strong,
.boss-awards-list strong { color: #3d1c0e; text-shadow: 0 1px rgba(255,255,255,.38); }
.boss-awards-list span { color: #7f3d13; }

/* One tactile brass-and-wood button language throughout the interface. */
.utility-button .utility-icon,
.side-drawer header button,
.profile-editor header button,
.photo-viewer header button,
.ship-card button,
.profile-photo-actions label,
.profile-photo-actions button,
.profile-editor footer button,
.respawn-panel button,
.fishing-actions button,
.boss-awards > button {
  border: 2px solid #e4ae43;
  color: #fff5cc;
  background: linear-gradient(180deg, #a75b27 0 45%, #703015 48% 100%);
  box-shadow: inset 0 2px rgba(255,227,150,.34), inset 0 -3px rgba(44,14,5,.42), 0 3px 0 #351208, 0 5px 12px rgba(0,0,0,.26);
  text-shadow: 0 2px 0 #351208;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.utility-button:is(:hover,:focus-visible) .utility-icon,
.side-drawer header button:is(:hover,:focus-visible),
.profile-editor header button:is(:hover,:focus-visible),
.photo-viewer header button:is(:hover,:focus-visible),
.ship-card button:not(:disabled):is(:hover,:focus-visible),
.profile-photo-actions :is(label,button):is(:hover,:focus-visible),
.profile-editor footer button:not(:disabled):is(:hover,:focus-visible),
.respawn-panel button:not(:disabled):is(:hover,:focus-visible),
.fishing-actions button:not(:disabled):is(:hover,:focus-visible),
.boss-awards > button:is(:hover,:focus-visible) {
  filter: brightness(1.16) saturate(1.08);
  transform: translateY(-2px) scale(1.025);
  box-shadow: inset 0 2px rgba(255,239,185,.45), inset 0 -3px rgba(44,14,5,.38), 0 5px 0 #351208, 0 8px 18px rgba(255,184,54,.2);
}
.ship-card button:not(:disabled):active,
.profile-editor footer button:not(:disabled):active,
.respawn-panel button:not(:disabled):active,
.fishing-actions button:not(:disabled):active,
.boss-awards > button:active { transform: translateY(2px) scale(.99); box-shadow: inset 0 2px 5px rgba(30,8,2,.4), 0 1px 0 #351208; }
.profile-editor footer button:last-child,
.boss-awards > button,
.respawn-panel button:not(:last-child),
.fishing-actions button:not(:last-child) {
  border: 2px solid #ffe184;
  color: #3a190b;
  background: linear-gradient(180deg, #ffd86b 0 45%, #d98a25 48% 100%);
  text-shadow: 0 1px rgba(255,247,201,.62);
  box-shadow: inset 0 2px rgba(255,249,202,.55), inset 0 -3px rgba(112,54,10,.32), 0 3px 0 #5c2b0e, 0 6px 14px rgba(0,0,0,.25);
}

/* Wooden resource plaques and framed liquid bars. */
.mana-pill,
.cargo-pill,
.hud-exp,
.event-health,
.fishing-progress {
  border: 2px solid #9c5c22;
  background: #25120c;
  box-shadow: inset 0 0 0 2px rgba(255,213,107,.16), 0 3px 0 rgba(39,13,6,.8), 0 6px 14px rgba(0,0,0,.25);
}
.mana-pill,
.cargo-pill { color: #fff7d3; background: linear-gradient(180deg, #75401e, #3e1c0f); }
.mana-pill small,
.cargo-pill small { color: #f5cc6f; }
.hud-exp i,
.event-health i,
.fishing-progress i { box-shadow: inset 0 2px rgba(255,255,255,.32), 0 0 10px currentColor; }

/* Buffs become compact collectible wooden tokens without changing HUD placement. */
.buff-chip {
  border: 2px solid color-mix(in srgb, var(--buff-color) 62%, #6b3515);
  background: linear-gradient(135deg, rgba(123,63,25,.96), rgba(55,23,11,.97));
  box-shadow: inset 0 0 0 2px rgba(255,224,151,.12), 0 3px 0 #2b1008, 0 6px 14px rgba(0,0,0,.3), 0 0 12px color-mix(in srgb, var(--buff-color) 35%, transparent);
}
.buff-chip i { border-color: #f5cc6f; background-color: #4a210f; }
.buff-chip b { color: #fff2c8; text-shadow: 0 2px #2d1007; }

/* Input fields use parchment while keeping keyboard and focus behavior intact. */
.profile-name-field input {
  border: 2px solid #8b4d20;
  color: #32180d;
  background: linear-gradient(#f8e4af, #e3bd76);
  box-shadow: inset 0 2px 5px rgba(74,31,10,.2), 0 3px 0 #35150a;
}
.profile-name-field input:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(245,198,83,.24), inset 0 2px 5px rgba(74,31,10,.18); }

@media (max-width: 600px) {
  .side-drawer,
  .profile-editor,
  .photo-viewer { border-width: 2px; box-shadow: 0 0 0 2px #35150a, 0 14px 36px rgba(0,0,0,.58); }
  .ship-card { border-width: 1px; box-shadow: inset 0 0 0 1px rgba(255,239,184,.4), 0 3px 0 #3b190b, 0 5px 10px rgba(0,0,0,.2); }
}

@media (prefers-reduced-motion: reduce) {
  .utility-button .utility-icon,
  .ship-card,
  .ship-card button,
  .side-drawer button,
  .profile-editor button,
  .respawn-panel button,
  .fishing-actions button,
  .boss-awards button { transition: none !important; }
}

/* v0.50 final cascade: these must follow the legacy theme layers above. */
.identity-card { cursor:pointer; }
.profile-editor header { position:sticky; z-index:8; top:0; background:linear-gradient(180deg,#30170d,#1d0d08); box-shadow:0 4px 0 rgba(88,43,17,.75); }
.side-drawer { color:#fff1c9; background:linear-gradient(180deg,#24100b,#120807 70%,#090404); }
.side-drawer header small,.side-drawer>p,.side-drawer h3 { color:#f0c875; text-shadow:none; }
.side-drawer h2,.side-drawer header button,.store-categories button { color:#fff; text-shadow:none; }
.store-categories { background:#190b07; }
.store-categories button { background:#32150c; }
.store-categories button.active { color:#2a1208; background:linear-gradient(#ffe59b,#d99a32); text-shadow:none; }
.ship-card { color:#2b140b; background:linear-gradient(145deg,#f8e3a9,#d9aa57); }
.ship-card strong,.ship-card b,.ship-card span { color:#291208; text-shadow:none; }
.ship-card small { color:#4d2a17!important; text-shadow:none!important; font-weight:900; }

/* A tapped/highlighted store card remains readable against its dark focus state. */
.store-grid .ship-card:focus-within,
.store-grid .ship-card.selected {
  color: #fff7dc;
  background: linear-gradient(145deg,#173c49,#071f2d);
}
.store-grid .ship-card:focus-within :is(strong,b,span,small),
.store-grid .ship-card.selected :is(strong,b,span,small) {
  color: #fff7dc !important;
  text-shadow: none !important;
}
.ship-card button { touch-action: manipulation; }
.weapon-mode-button { right:max(52px,calc(env(safe-area-inset-right) + 46px)); bottom:max(64px,calc(env(safe-area-inset-bottom) + 58px)); display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 7px; text-align:center; }
.weapon-mode-button i,.weapon-mode-button span { display:flex; width:auto; height:auto; align-items:center; justify-content:center; margin:0; }
@media (max-width:600px) { .weapon-mode-button { right:max(38px,calc(env(safe-area-inset-right) + 32px)); bottom:max(50px,calc(env(safe-area-inset-bottom) + 44px)); } }

/* v0.50.1: desktop buff clearance and a longer mobile zoom track. */
@media (min-width:701px) {
  body.buffs-active .chat-panel,
  body.buffs-active .chat-panel.collapsed { top:max(270px,calc(env(safe-area-inset-top) + 258px)); }
}
@media (max-width:600px) {
  .sonar-shell .zoom-control::before { left:21px; right:21px; }
  .sonar-shell .zoom-control b { width:20px; height:20px; font-size:11px; }
  .sonar-shell .zoom-control b:first-child { right:2px; }
  .sonar-shell .zoom-control b:last-child { left:2px; }
  .sonar-shell .zoom-control input { width:calc(100% - 42px); }
}

/* Accessibility floor: game text never renders below 8px, including compact/mobile HUD. */
:is(
  .portrait, .sonar-coordinates, .mana-pill small, .cargo-pill small, .sonar-legend span, .phase-badge,
  .world-event small, .identity-copy > span, .chat-panel header em,
  .chat-channels button, .chat-content > small, .chat-actions button,
  .chat-reactions button, .chat-reply, .cannon-button small,
  .equipment-slots span, .equipment-slots small, .sonar-label,
  .bait-heading small, .bait-btn small, .depth-meta, .drawer-resource-strip small,
  .market-safe, .ability-cost, .ability-button small, .utility-button b,
  .boss-leaderboard > small, .weapon-mode-button i, .weapon-mode-button span,
  .fish-action small, .cannon-cancel-zone small, .cannon-aim-joystick span,
  .dock-cash-action small, .dock-shop-action small
) { font-size: 8px !important; }

/* Desktop HUD safe zone: keep the leaderboard below the complete sonar/zoom stack. */
@media (min-width: 601px) {
  .boss-leaderboard {
    top: max(207px, calc(env(safe-area-inset-top) + 195px));
    right: max(18px, env(safe-area-inset-right));
  }

  .sonar-shell.expanded ~ .boss-leaderboard {
    top: max(462px, calc(env(safe-area-inset-top) + 450px));
  }
}

/* v0.51.0: generated pickup artwork and vertical fishing-spot encounter card. */
.buff-chip i:has(img) {
  width: 35px;
  height: 35px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.buff-chip i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 7px var(--buff-color));
}

.fishing-offer {
  display: block;
  width: min(340px, calc(100vw - 24px));
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 18px 32px rgba(0, 8, 25, .52));
}
.fishing-offer .spot-prompt {
  --spot-color: #45eadc;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: none;
  min-width: 0;
  gap: 14px;
  padding: 20px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--spot-color) 62%, #d9f8ff);
  border-radius: 24px;
  color: #f4fbff;
  background:
    linear-gradient(145deg, rgba(24, 40, 77, .97), rgba(3, 24, 48, .98) 65%),
    #071b35;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 0 38px color-mix(in srgb, var(--spot-color) 14%, transparent),
    0 0 22px color-mix(in srgb, var(--spot-color) 22%, transparent);
  pointer-events: none;
  translate: none;
  contain: layout paint;
}
.fishing-offer .spot-prompt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, transparent, var(--spot-color) 18% 82%, transparent);
  box-shadow: 0 0 18px var(--spot-color);
}
.fishing-offer .spot-orb { display: none; }
.fishing-offer .spot-copy,
.fishing-offer .spot-prompt > div:last-child {
  display: grid;
  width: auto;
  min-width: 0;
  max-width: none;
  gap: 7px;
}
.fishing-offer .spot-prompt small,
.fishing-offer .spot-prompt strong,
.fishing-offer .spot-prompt span {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.fishing-offer .spot-prompt small {
  color: var(--spot-color);
  font: 1000 11px/1.2 system-ui, sans-serif;
  letter-spacing: .11em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--spot-color) 62%, transparent);
}
.fishing-offer .spot-prompt strong {
  margin: 0;
  color: #fff;
  font: 900 27px/1.05 system-ui, sans-serif;
  letter-spacing: -.02em;
}
.fishing-offer .spot-prompt span {
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(186, 224, 245, .17);
  color: #c6d9e8;
  font: 800 14px/1.35 ui-monospace, monospace;
}
.fishing-offer #spotDescription {
  min-height: 42px;
  margin: 2px 0 0;
  color: #d6e4ef;
  font: 650 14px/1.45 system-ui, sans-serif;
}
.fishing-offer .fish-action {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "icon title" "icon cost";
  width: 100%;
  min-width: 0;
  height: 76px;
  padding: 0 28px;
  place-content: center;
  column-gap: 12px;
  border: 2px solid #fff3ba;
  border-radius: 18px;
  color: #2f2100;
  background: linear-gradient(180deg, #ffe16f, #ffb82f);
  box-shadow: inset 0 2px rgba(255, 255, 255, .55), 0 6px 0 #9b5b0b, 0 0 24px rgba(255, 199, 55, .34);
  pointer-events: auto;
  transition: transform .16s ease, filter .16s ease;
}
.fishing-offer .fish-action:hover { filter: brightness(1.12); transform: translateY(-2px); }
.fishing-offer .fish-action:active { filter: brightness(.96); transform: translateY(3px); }
.fishing-offer .fish-action span {
  grid-area: icon;
  align-self: center;
  font-size: 28px;
}
.fishing-offer .fish-action b {
  grid-area: title;
  align-self: end;
  margin: 0;
  font: 1000 23px/1 Impact, system-ui, sans-serif;
  letter-spacing: .08em;
}
.fishing-offer .fish-action small {
  grid-area: cost;
  align-self: start;
  margin-top: 5px;
  color: #4b3100;
  font: 1000 11px/1 system-ui, sans-serif !important;
  letter-spacing: .05em;
}

@media (max-width: 719px) {
  .fishing-offer { width: min(300px, calc(100vw - 18px)); }
  .fishing-offer .spot-prompt { gap: 11px; padding: 16px; border-radius: 20px; }
  .fishing-offer .spot-prompt strong { font-size: 22px; }
  .fishing-offer .spot-prompt span,
  .fishing-offer #spotDescription { font-size: 12px; }
  .fishing-offer .fish-action {
    width: 100%;
    min-width: 0;
    height: 66px;
    padding-inline: 20px;
  }
  .fishing-offer .fish-action span { font-size: 23px; }
  .fishing-offer .fish-action b { font-size: 20px; }
  .fishing-offer .fish-action small { font-size: 9px !important; }
}

/* v0.51.2: transparent combat artwork and a stable, non-flashing cannon readout. */
.ability-button,
.cannon-button {
  isolation: isolate;
  overflow: visible;
  border-color: transparent;
  background: transparent;
}
.ability-artwork,
.cannon-mode-artwork {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ability-button .ability-icon,
.cannon-button .cannon-art { display: none; }
.ability-button .ability-cooldown,
.cannon-button .cooldown-ring { z-index: 6; }
.ability-button b,
.ability-button small,
.ability-button .ability-cost,
.cannon-button b,
.cannon-button small {
  z-index: 8;
  opacity: 1;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.ability-button b {
  top: 59%;
  color: #fff;
  text-shadow: 0 2px 2px #00152d, 0 0 6px #00152d;
}
.ability-button small { top: 72%; }
.ability-button .ability-cost { top: 84%; }
.cannon-mode-artwork {
  /* Both weapon modes share this exact box, so switching cannot resize the button. */
  inset: 0;
  width: 100%;
  height: 100%;
}
.cannon-button b {
  top: 62%;
  width: 82%;
  font-size: 17px;
  line-height: .9;
  text-shadow: 0 3px 2px #00152d, 0 0 8px #00152d;
}
.cannon-button small {
  top: 79%;
  width: 78%;
  min-height: 9px;
  color: #fff0a0;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 2px #00152d, 0 0 5px #00152d;
  transition: none !important;
  animation: none !important;
}
@media (max-width: 600px) {
  .cannon-button b { font-size: 14px; }
  .cannon-button small { font-size: 8px; }
  .ability-button b { font-size: 9px; }
  .ability-button small,
  .ability-button .ability-cost { font-size: 8px; }
}