/* gloop.live: boat + fishing panel (js/boat.js), ambience toggle (js/audio.js).
   Only new classes; nothing here restyles the existing dock layout. */
.hud-extras .boat-btn.on, .hud-extras .amb-btn.on {
  border-color: rgba(120, 190, 240, 0.7);
  color: #bfe3ff;
  background: linear-gradient(180deg, rgba(110, 170, 230, 0.22), rgba(110, 170, 230, 0.06));
}
.field .boat-panel {
  position: absolute;
  left: 50%;
  top: 0.7rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem 0.5rem;
  max-width: calc(100% - 1.5rem);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 18, 28, 0.55), rgba(10, 18, 28, 0.8));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(160, 205, 240, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--ink, #ece6da);
  font-size: 0.8rem;
}
.field .boat-panel[hidden] { display: none; }
.boat-prompt { font-weight: 600; letter-spacing: 0.04em; color: #bfe3ff; min-height: 1.1em; }
.boat-prompt.bite { color: #ffe07a; text-shadow: 0 0 12px rgba(255, 210, 90, 0.7); animation: boat-bite 0.35s ease-in-out infinite alternate; }
@keyframes boat-bite { from { transform: scale(1); } to { transform: scale(1.12); } }
.boat-row { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.boat-row button {
  font: inherit;
  color: inherit;
  padding: 0.4rem 0.75rem;
  border-radius: 9px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(236, 230, 218, 0.16);
}
.boat-row button:hover { border-color: rgba(150, 205, 245, 0.7); color: #d4ecff; }
.boat-row button:focus-visible { outline: 2px solid #9fd2ff; outline-offset: 2px; }
.boat-panel.biting [data-b="cast"] { border-color: #ffd36a; color: #ffe7a0; box-shadow: 0 0 0 3px rgba(255, 210, 100, 0.2); }
.boat-hint { font-size: 0.68rem; color: var(--mute, #8f97a3); text-align: center; }
.boat-float {
  position: absolute; left: 50%; top: 38%; z-index: 4; pointer-events: none;
  transform: translateX(-50%); font-weight: 700; font-size: 1.1rem; color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); animation: boat-float 1.4s ease-out forwards;
}
.boat-float-good { color: #b9f5b4; }
.boat-float-dmg { color: #ffb0a0; }
@keyframes boat-float { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -40px); } }
@media (max-width: 560px) {
  /* phones (v6): a left-aligned strip under the top-row buttons (gear left, map / trophy / ? right),
     kept out of the minimap column (.mm-wrap: right 0.8rem, 6.5rem wide) with an 8px gap. */
  .field .boat-panel {
    left: 0.8rem; right: calc(0.8rem + 6.5rem + 8px); top: calc(0.7rem + 44px + 8px);
    transform: none; max-width: none;
    font-size: 0.78rem; flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 0.3rem 0.4rem; padding: 0.3rem 0.35rem; border-radius: 10px;
  }
  .boat-prompt { font-size: 0.72rem; }
  /* one line at >= 360px; wraps (never overflows) on anything narrower */
  .boat-row { flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
  .boat-row button { min-height: 44px; min-width: 44px; padding: 0.3rem 0.45rem; white-space: nowrap; }
  .boat-hint { display: none; }
  /* short game area (js/boat.js sets .is-short): one compact line of buttons right under the top row.
     The prompt is aria-live, so it is visually hidden rather than display:none; a bite still shows
     as "STRIKE!" + the .biting highlight on the cast button. */
  .field .boat-panel.is-short {
    right: auto; max-width: calc(100% - 0.8rem - (0.8rem + 6.5rem + 8px));
    top: calc(0.7rem + 44px + 2px); z-index: 6; /* above the pad (4) and the toasts (4-5) */
    flex-wrap: nowrap; justify-content: flex-start; gap: 0; padding: 0;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    pointer-events: none; /* the gaps between buttons stay tappable water */
  }
  .boat-panel.is-short .boat-prompt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; animation: none;
  }
  .boat-panel.is-short .boat-row { flex-wrap: nowrap; gap: 0.25rem; }
  .boat-panel.is-short .boat-row button {
    pointer-events: auto; padding: 0 0.45rem;
    background: linear-gradient(180deg, rgba(16, 26, 38, 0.8), rgba(10, 18, 28, 0.9));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-color: rgba(160, 205, 240, 0.28); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .boat-panel.is-short.biting [data-b="cast"] { border-color: #ffd36a; box-shadow: 0 0 0 3px rgba(255, 210, 100, 0.25), 0 4px 14px rgba(0, 0, 0, 0.35); }
  /* short field + touch pad: mobile.css parks the thoughts log at bottom:160px, which here is on top of
     the top-row buttons and this strip. While the short strip shows, sit it in the free gap between
     the gear and the map / trophy / ? buttons instead. */
  html.has-vehicle-pad .field.boat-short .thoughts {
    top: 0.7rem; bottom: auto; max-height: 44px;
    left: calc(0.8rem + 44px + 8px); right: calc(0.8rem + 3 * 44px + 2 * 8px + 8px); width: auto;
    padding: 0.2rem 0.45rem; font-size: 0.68rem; line-height: 1.3;
  }
  html.has-vehicle-pad .field.boat-short .thoughts p { margin-top: 0.1rem; }
  /* achievement toast + bestiary pop-up while boating: drop them below the strip and the minimap
     (js/boat.js publishes the strip's bottom edge as --boat-b) so they never cover the buttons. */
  .field.boat-on .ach-toast, .field.boat-on .gb-toast { top: calc(max(var(--boat-b, 0px), 0.7rem + 52px + 6.5rem) + 8px); }
  /* short field: no room below, so they briefly take the top band (over the thoughts log, clear of the
     gear); the achievement's one-line description is visually hidden (still read out) so the toast
     ends above the strip. */
  .field.boat-short .ach-toast, .field.boat-short .gb-toast { top: 0.35rem; }
  .field.boat-short .gb-toast { left: calc(0.8rem + 44px + 8px); max-width: calc(100% - 0.8rem - (0.8rem + 44px + 8px)); }
  .field.boat-short .ach-toast .ach-t-kicker { white-space: nowrap; }
  .field.boat-short .ach-toast .ach-t-desc {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boat-prompt.bite, .boat-float { animation: none; }
}
html.a11y-rm-on .boat-prompt.bite, html.a11y-rm-on .boat-float { animation: none; }
/* Desktop dock: the extras slot keeps its natural width (it used to shrink to
   ~0 and stack its buttons on top of the torment row at 1024-1280px). */
@media (min-width: 901px) {
  .dock .hud-extras { flex: 0 0 auto; flex-wrap: nowrap; }
  .dock .hud-extras button { white-space: nowrap; }
  .hud-extras .boat-btn, .hud-extras .amb-btn { font-size: 0.9rem; min-width: 1.9rem; }
}
.boat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* no WebGL: the water never builds, so hide the boat button (the flat map shows the moored boat) */
.no-webgl #act-boat { display: none !important; }