/* lib-river-overlay.css — styles for lib-river-overlay.js (ls-2.45)
   Floating raft avatars + click-to-shoot fish minigame, layered above
   the 3D river canvas. */

.lsro-host {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
  font-family: inherit;
}
.lsro-host * { box-sizing: border-box; }

.lsro-fish-layer { position: absolute; inset: 0; pointer-events: none; }
.lsro-avatar-layer {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 56px;
  pointer-events: none;
}

/* ── Floating raft avatars ──────────────────── */
.lsro-avatar {
  position: absolute; bottom: 4px; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 10px 4px 8px;
  background: rgba(20, 24, 36, .68);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font: inherit; color: inherit;
  cursor: pointer;
  pointer-events: auto;
  animation: lsro-bob 3.6s ease-in-out infinite;
  animation-delay: calc(var(--lsro-phase, 0deg) / 360 * -3.6s);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lsro-avatar:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.4);
  transform: translateX(-50%) translateY(-3px);
}
.lsro-avatar.lsro-me {
  border-color: var(--accent, #6cf);
  box-shadow: 0 0 0 2px rgba(108,204,255,.25);
}
.lsro-avatar .lsro-av-ic { font-size: 1.05rem; line-height: 1; }
.lsro-avatar .lsro-av-nm {
  font-size: .58rem; font-weight: 600; letter-spacing: .04em;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lsro-avatar.lsro-leave {
  opacity: 0; transform: translateX(-50%) translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.lsro-avatar.lsro-wave { animation: lsro-wave .8s ease; }

@keyframes lsro-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}
@keyframes lsro-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.7); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes lsro-wave {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  20% { transform: translateX(-50%) rotate(-12deg); }
  40% { transform: translateX(-50%) rotate(12deg); }
  60% { transform: translateX(-50%) rotate(-8deg); }
  80% { transform: translateX(-50%) rotate(8deg); }
}

/* ── Click-to-shoot fish ────────────────────── */
.lsro-fish {
  position: absolute;
  background: none; border: 0; padding: 4px;
  cursor: crosshair;
  pointer-events: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  user-select: none; -webkit-user-select: none;
  will-change: transform, left;
  transition: transform .12s ease;
}
.lsro-fish:hover { transform: scale(1.18); }
.lsro-fish.lsro-fish-ltr { animation: lsro-swim-ltr var(--lsro-life, 9000ms) linear forwards; }
.lsro-fish.lsro-fish-rtl { animation: lsro-swim-rtl var(--lsro-life, 9000ms) linear forwards; transform: scaleX(-1); }
.lsro-fish.lsro-caught { animation: lsro-fish-caught .24s ease forwards !important; pointer-events: none; }

@keyframes lsro-swim-ltr {
  from { left: -8%; }
  to   { left: 108%; }
}
@keyframes lsro-swim-rtl {
  from { left: 108%; }
  to   { left: -8%; }
}
@keyframes lsro-fish-caught {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.4) rotate(40deg); opacity: 0; }
}

/* ── Splash + +1 toast ─────────────────────── */
.lsro-splash {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 1.8rem; pointer-events: none;
  animation: lsro-splash .7s ease forwards;
}
@keyframes lsro-splash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}
.lsro-toast {
  position: absolute; transform: translate(-50%, -50%);
  font-size: .9rem; font-weight: 700; color: #ffd866;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  pointer-events: none;
  animation: lsro-toast .9s ease forwards;
}
@keyframes lsro-toast {
  0%   { opacity: 0; transform: translate(-50%, -50%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%); }
}

/* ── Score badge ──────────────────────────── */
.lsro-score {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(20, 24, 36, .72);
  border: 1px solid rgba(255,255,255,.18);
  color: #ffd866;
  font: 600 .82rem/1 ui-rounded, system-ui, sans-serif;
  letter-spacing: .04em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .2s ease;
}
.lsro-score strong { font-weight: 800; color: #fff; margin-left: 2px; }
.lsro-score.lsro-score-pop { transform: scale(1.18); }

/* VR mode bumps */
body.vr-mode .lsro-avatar { padding: 6px 14px; }
body.vr-mode .lsro-avatar .lsro-av-ic { font-size: 1.4rem; }
body.vr-mode .lsro-avatar .lsro-av-nm { font-size: .72rem; max-width: 90px; }
body.vr-mode .lsro-fish { font-size: 2.4rem !important; }
body.vr-mode .lsro-score { font-size: 1rem; padding: 6px 14px; }