/* fishing.css - the interactive fishing pane (Darkwind.Fishing). */

.fishing-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 260px;
}

.fishing-stage {
  position: relative;
  flex: 1;
  min-height: 240px;
  overflow: hidden;
  border-radius: 6px;
  outline: none;
  user-select: none;
  touch-action: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--df-accent) 12%, var(--df-panel)) 0%,
    color-mix(in srgb, #1a4b6e 45%, var(--df-panel)) 55%,
    color-mix(in srgb, #0c2a40 65%, var(--df-panel)) 100%);
}

.fishing-stage[data-terrain="swamp"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, #4c5b32 30%, var(--df-panel)) 0%,
    color-mix(in srgb, #2e401e 55%, var(--df-panel)) 60%,
    color-mix(in srgb, #16240e 70%, var(--df-panel)) 100%);
}
.fishing-stage[data-terrain="sea"],
.fishing-stage[data-terrain="underwater"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, #10547e 35%, var(--df-panel)) 0%,
    color-mix(in srgb, #0a3a5e 60%, var(--df-panel)) 55%,
    color-mix(in srgb, #051f36 75%, var(--df-panel)) 100%);
}
.fishing-stage[data-terrain="beach"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, #d9b26a 22%, var(--df-panel)) 0%,
    color-mix(in srgb, #2a7ca8 50%, var(--df-panel)) 55%,
    color-mix(in srgb, #12496e 65%, var(--df-panel)) 100%);
}

/* Always-visible close for the game window */
.fishing-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
  background: rgba(0, 0, 0, 0.45);
  color: #e8edf2;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.fishing-close:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: color-mix(in srgb, #ffffff 50%, transparent);
}

.fishing-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  pointer-events: none;
}

.fishing-water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: repeating-linear-gradient(
    -8deg,
    transparent 0 14px,
    color-mix(in srgb, var(--df-text) 6%, transparent) 14px 16px);
  animation: fishing-waves 6s linear infinite;
  pointer-events: none;
}

@keyframes fishing-waves {
  from { background-position: 0 0; }
  to { background-position: 80px 0; }
}

/* Bobber */
.fishing-bobber {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d43c3c;
  border: 2px solid color-mix(in srgb, var(--df-text) 80%, transparent);
  animation: fishing-bob 2.4s ease-in-out infinite;
}
.fishing-bobber-top {
  position: absolute;
  top: -2px; left: 3px;
  width: 8px; height: 7px;
  border-radius: 50% 50% 0 0;
  background: color-mix(in srgb, var(--df-text) 85%, transparent);
}
@keyframes fishing-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.fishing-stage[data-phase="bite"] .fishing-bobber {
  animation: fishing-plunge 0.35s ease-in-out infinite;
}
@keyframes fishing-plunge {
  0%, 100% { transform: translateY(4px); }
  50% { transform: translateY(14px); }
}

/* Splash burst when the hook sets */
.fishing-splashfx {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.fishing-splashfx span {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, #6db7e8 70%, var(--df-text));
  opacity: 0;
}
.fishing-splashfx.burst span {
  animation: fishing-splash-fly 0.55s ease-out forwards;
}
.fishing-splashfx span:nth-child(1) { --fx: -38px; --fy: -52px; }
.fishing-splashfx span:nth-child(2) { --fx: 34px; --fy: -58px; animation-delay: 0.03s; }
.fishing-splashfx span:nth-child(3) { --fx: -18px; --fy: -66px; animation-delay: 0.05s; }
.fishing-splashfx span:nth-child(4) { --fx: 20px; --fy: -44px; animation-delay: 0.02s; }
.fishing-splashfx span:nth-child(5) { --fx: -50px; --fy: -30px; animation-delay: 0.06s; }
.fishing-splashfx span:nth-child(6) { --fx: 48px; --fy: -28px; animation-delay: 0.04s; }
@keyframes fishing-splash-fly {
  0% { opacity: 0.95; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.35); }
}

/* Screen shake when the line snaps */
.fishing-stage.fishing-shake {
  animation: fishing-shake 0.45s ease-in-out;
}
@keyframes fishing-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 3px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-5px, 3px); }
  80% { transform: translate(3px, -2px); }
}

.fishing-exclaim {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  font-size: 44px;
  font-weight: 900;
  color: var(--df-warn, #ffb300);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  animation: fishing-exclaim 0.4s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fishing-exclaim {
  from { transform: translateX(-50%) scale(1); }
  to { transform: translateX(-50%) scale(1.3); }
}

/* Shrinking reaction-window bar under the "!" */
.fishing-bitebar {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translateX(-50%);
  width: min(72%, 280px);
  height: 10px;
  border-radius: 5px;
  border: 1px solid var(--df-border);
  background: color-mix(in srgb, var(--df-bg) 60%, transparent);
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.fishing-bitebar-fill {
  height: 100%;
  width: 100%;
  background: var(--df-warn, #ffb300);
}

/* Bite reaction window */
.fishing-bitehelp {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(84%, 380px);
  min-height: 116px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 22px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--df-warn, #ffb300) 56%, transparent);
  background: color-mix(in srgb, var(--df-bg) 78%, transparent);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
  color: #e8edf2;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 4;
  animation: fishing-bitehelp-pulse 0.7s ease-in-out infinite alternate;
}
.fishing-bitehelp-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--df-warn, #ffb300) 82%, #ffffff);
}
.fishing-bitehelp-title {
  font-size: 20px;
  font-weight: 800;
}
.fishing-bitehelp-action {
  font-size: 13px;
  line-height: 1.3;
  color: color-mix(in srgb, #e8edf2 88%, var(--df-warn, #ffb300));
}
@keyframes fishing-bitehelp-pulse {
  from { border-color: color-mix(in srgb, var(--df-warn, #ffb300) 46%, transparent); }
  to { border-color: color-mix(in srgb, var(--df-warn, #ffb300) 86%, transparent); }
}

/* Waiting and hook transition states */
.fishing-waiting,
.fishing-hooking {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(82%, 360px);
  min-height: 128px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 22px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #ffffff 22%, transparent);
  background: color-mix(in srgb, var(--df-bg) 72%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  color: #e8edf2;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 4;
}
.fishing-hooking {
  border-color: color-mix(in srgb, var(--df-warn, #ffb300) 45%, transparent);
  background: color-mix(in srgb, var(--df-bg) 76%, transparent);
}
.fishing-waiting-kicker,
.fishing-hooking-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--df-accent) 65%, #ffffff);
}
.fishing-hooking-kicker {
  color: color-mix(in srgb, var(--df-warn, #ffb300) 76%, #ffffff);
}
.fishing-waiting-title,
.fishing-hooking-title {
  font-size: 20px;
  font-weight: 800;
}
.fishing-waiting-dots,
.fishing-hooking-dots {
  display: flex;
  gap: 7px;
  height: 12px;
  align-items: center;
}
.fishing-waiting-dots span,
.fishing-hooking-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--df-accent) 70%, #ffffff);
  animation: fishing-waiting-dot 1.2s ease-in-out infinite;
}
.fishing-hooking-dots span {
  background: color-mix(in srgb, var(--df-warn, #ffb300) 80%, #ffffff);
}
.fishing-waiting-dots span:nth-child(2) { animation-delay: 0.16s; }
.fishing-waiting-dots span:nth-child(3) { animation-delay: 0.32s; }
.fishing-hooking-dots span:nth-child(2) { animation-delay: 0.16s; }
.fishing-hooking-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes fishing-waiting-dot {
  0%, 80%, 100% { opacity: 0.45; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}
.fishing-waiting-flavor,
.fishing-hooking-help {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1.3;
  color: color-mix(in srgb, #e8edf2 86%, var(--df-accent));
}
.fishing-hooking-help {
  color: color-mix(in srgb, #e8edf2 88%, var(--df-warn, #ffb300));
}

/* Fight view */
.fishing-fightview {
  position: absolute;
  inset: 10px;
  display: flex;
  gap: 10px;
  z-index: 3;
}

.fishing-track {
  position: relative;
  width: 64px;
  flex: none;
  height: 100%;
  border-radius: 8px;
  background: color-mix(in srgb, var(--df-bg) 55%, transparent);
  border: 1px solid var(--df-border);
  overflow: hidden;
}

.fishing-bar {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 20%;
  border-radius: 6px;
  background: color-mix(in srgb, var(--df-ok, #4caf50) 45%, transparent);
  border: 1px solid var(--df-ok, #4caf50);
  will-change: transform;
}

.fishing-fish {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: var(--df-text);
  will-change: transform;
}
.fishing-fish img {
  width: 42px;
  height: 27px;
}
.fish-running .fishing-fish img {
  filter: drop-shadow(0 0 6px var(--df-warn, #ffb300));
}

.fishing-meters {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
  padding-bottom: 4px;
}

.fishing-meter {
  position: relative;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--df-border);
  background: color-mix(in srgb, var(--df-bg) 55%, transparent);
  overflow: hidden;
}
.fishing-meter span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--df-text);
  opacity: 0.85;
  pointer-events: none;
}
.fishing-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--df-accent);
  transition: none;
}
.fishing-progress .fishing-meter-fill { background: var(--df-ok, #4caf50); }
.fishing-tension .fishing-meter-fill { background: var(--df-accent); }
.fishing-tension .fishing-meter-fill.warn { background: var(--df-warn, #ffb300); }
.fishing-tension .fishing-meter-fill.hot { background: var(--df-err, #e53935); }

/* Trophy card */
.fishing-trophy {
  --fishing-glow: color-mix(in srgb, var(--fishing-rarity, var(--df-border)) 45%, transparent);
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--fishing-rarity, var(--df-border));
  background: color-mix(in srgb, var(--df-panel) 88%, transparent);
  z-index: 4;
  animation:
    fishing-trophy-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1),
    fishing-rarity-pulse 2.4s ease-in-out 0.5s infinite;
}
@keyframes fishing-trophy-in {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes fishing-rarity-pulse {
  0%, 100% { box-shadow: 0 0 5px var(--fishing-glow); }
  50% { box-shadow: 0 0 22px var(--fishing-glow); }
}
.fishing-trophy-art {
  max-width: 70%;
  max-height: 50%;
  border-radius: 8px;
  color: var(--df-text);
}
.fishing-trophy-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--fishing-rarity, var(--df-text));
}
.fishing-trophy-details {
  font-size: 12px;
  color: var(--df-text);
  opacity: 0.85;
}
.fishing-trophy-status {
  font-size: 12px;
  text-align: center;
  color: var(--df-ok, #4caf50);
}
.fishing-trophy.pristine {
  --fishing-glow: color-mix(in srgb, var(--fishing-rarity, gold) 80%, transparent);
}

/* Message + status */
.fishing-message {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  text-align: center;
  font-size: 13px;
  /* Fixed light tone: this renders over water scenery/AI art, which stays
     dark regardless of UI theme (same reasoning as terminal text). */
  color: #e8edf2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 5;
}
.fishing-status {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--df-ok, #4caf50);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 5;
}

/* Cast power */
.fishing-powerwrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  min-height: 126px;
  padding: 14px 18px 12px;
  box-sizing: border-box;
  z-index: 6;
  cursor: pointer;
  touch-action: none;
}
.fishing-power {
  width: 18px;
  height: 90px;
  border-radius: 6px;
  border: 1px solid var(--df-border);
  background: color-mix(in srgb, var(--df-bg) 55%, transparent);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.fishing-power-fill {
  width: 100%;
  height: 0%;
  background: var(--df-accent);
}
.fishing-power-fill.hot { background: var(--df-warn, #ffb300); }
.fishing-cast-btn {
  padding: 10px 18px;
  min-height: 44px;
  min-width: 132px;
  border-radius: 8px;
  border: 1px solid var(--df-border);
  background: var(--df-accent);
  color: var(--df-bg);
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
}
.fishing-cast-btn:active,
.fishing-powerwrap:active .fishing-cast-btn { transform: scale(0.96); }

@media (max-width: 700px) {
  .fishing-body { min-height: 300px; }
  .fishing-track { width: 84px; }
  .fishing-fish img { width: 52px; height: 33px; }
  .fishing-waiting,
  .fishing-hooking { width: min(88%, 340px); top: 45%; }
  .fishing-bitehelp { width: min(90%, 340px); top: 46%; }
  .fishing-bitehelp-title { font-size: 18px; }
  .fishing-waiting-title,
  .fishing-hooking-title { font-size: 18px; }
  .fishing-cast-btn { padding: 14px 26px; font-size: 15px; }
  .fishing-power { width: 24px; height: 100px; }
  .fishing-bitebar { width: 120px; height: 8px; }
  .fishing-meter { height: 30px; }
}