/* Mossvale Pond (pond.js): the dock scene with the sky of the hour, the reeling bar, the fishing journal, the bait stand
   and Milo's buy-back counter. Rarity colours are shared with the museum. */
:root { --rarity-common: #7f9c78; --rarity-uncommon: #4f8fc0; --rarity-rare: #9466c9; --rarity-legendary: #e0a92a; --rarity-find: #b98b5e; }
.rarity-common { --rarity: var(--rarity-common); }
.rarity-uncommon { --rarity: var(--rarity-uncommon); }
.rarity-rare { --rarity: var(--rarity-rare); }
.rarity-legendary { --rarity: var(--rarity-legendary); }
.rarity-find { --rarity: var(--rarity-find); }
.rarity-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--rarity); color: #fff; font: 900 11px Nunito, system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.item-icon.has-art, .fish-art { display: inline-block; }
.fish-art { width: 100%; height: 100%; overflow: visible; }

.pond-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(220px, 1fr); gap: 18px; align-items: start; }
.pond-scene { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 800 / 420; border: 4px solid #3f6f7d; border-radius: 20px; background: #86cdf1; box-shadow: 0 6px 0 #2f5560, 0 14px 26px #1f3d2e33; user-select: none; }
.pond-art, .pond-rig { position: absolute; inset: 0; width: 100%; height: 100%; }
.pond-art { z-index: 1; }
.pond-night { position: absolute; inset: 0; z-index: 4; background: #0c1534; mix-blend-mode: multiply; opacity: calc(var(--dark, 0) * .5); pointer-events: none; transition: opacity 2.5s linear; }
.pond-angler { left: 21.25%; bottom: 13.8%; z-index: 3; width: auto; height: 48%; aspect-ratio: 200 / 350; }
.pond-rig { z-index: 3; overflow: visible; }
.pond-rod { stroke: #6b4a2a; stroke-width: 5; stroke-linecap: round; fill: none; }
.pond-fishing-line { stroke: #f4f1e4; stroke-width: 1.6; fill: none; opacity: .9; }
.pond-bobber { position: absolute; z-index: 3; width: 16px; height: 16px; border: 2px solid #2a2420; border-radius: 50%; background: linear-gradient(#e2503f 50%, #fff 50%); transform: translate(-50%, -50%); transition: left .55s cubic-bezier(.2, .9, .3, 1), top .55s cubic-bezier(.2, .9, .3, 1); }
.pond-bobber.no-move { transition: left .12s linear, top .12s linear; }
.pond-scene.is-waiting .pond-bobber { animation: bobber-bob 1.6s ease-in-out .6s infinite; }
.pond-scene.is-bite .pond-bobber { animation: bobber-bite .35s ease-in-out infinite alternate; }
@keyframes bobber-bob { 50% { transform: translate(-50%, -40%); } }
@keyframes bobber-bite { from { transform: translate(-50%, -30%); } to { transform: translate(-50%, 10%) scale(.85); } }
.pond-alert { position: absolute; left: 30%; top: 18%; z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid #8a6414; border-radius: 50%; background: #ffd34d; color: #5a3f0a; font: 900 30px/1 Nunito, system-ui, sans-serif; box-shadow: 0 4px 0 #8a6414; animation: alert-pop .5s ease-in-out infinite alternate; }
@keyframes alert-pop { from { transform: scale(.9) rotate(-6deg); } to { transform: scale(1.12) rotate(6deg); } }
.pond-shadow { position: absolute; z-index: 2; display: none; width: 76px; height: 48px; transform: translate(-50%, -50%); transition: left .35s ease, top .35s ease; pointer-events: none; }
.pond-scene.is-reeling .pond-shadow { display: block; }
.pond-shadow-art { display: block; width: 100%; height: 100%; filter: brightness(0); opacity: .38; animation: shadow-swim .8s ease-in-out infinite alternate; }
.pond-shadow.kind-legendary .pond-shadow-art { filter: brightness(0) drop-shadow(0 0 10px #ffe08a); opacity: .55; }
.pond-shadow.kind-find .pond-shadow-art { font-size: 30px; }
@keyframes shadow-swim { from { transform: rotate(-6deg) translateX(-3px); } to { transform: rotate(6deg) translateX(3px); } }
.pond-ripples path { animation: ripple-drift 4s ease-in-out infinite alternate; }
.pond-ripples path:nth-child(2) { animation-delay: -1.3s; }
.pond-ripples path:nth-child(3) { animation-delay: -2.6s; }
@keyframes ripple-drift { to { transform: translateX(14px); opacity: .35; } }

/* The catch, shown on a card over the water. */
.pond-catch { position: absolute; left: 50%; top: 50%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(300px, 86%); max-height: 94%; overflow: auto; padding: 14px 16px; border: 3px solid var(--rarity, #b98b5e); border-radius: 18px; background: #fffaf0; box-shadow: 0 8px 0 #00000026, 0 16px 30px #1f3d2e55; text-align: center; transform: translate(-50%, -50%); animation: catch-in .35s cubic-bezier(.2, 1.4, .4, 1); }
.pond-catch h3 { margin: 2px 0 0; color: #2f533a; font-size: 21px; }
.pond-catch p { margin: 0; font-size: 13px; line-height: 1.4; }
.pond-catch-art { display: block; width: 120px; height: 75px; font-size: 52px; line-height: 75px; }
.pond-catch-facts { display: inline-flex; align-items: center; gap: 4px; color: #876827 !important; font-weight: 800; }
.pond-catch .text-button { margin-top: 4px; }
.pond-note { margin: 4px 0; padding: 8px 10px; border-left: 3px solid #d7b98c; background: #fff3d6; color: #6b4a2a; font: italic 13px/1.4 Georgia, serif; text-align: left; }
.pond-new { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 99px; background: #e46f98; color: #fff; font: 900 11px Nunito, system-ui, sans-serif; transform: rotate(8deg); }
@keyframes catch-in { from { opacity: 0; transform: translate(-50%, -40%) scale(.85); } }

/* Reeling: press while the marker is in the green zone. */
.pond-reel { margin-top: 12px; padding: 12px 14px; border: 3px solid #3f6f7d; border-radius: 16px; background: #eef8f9; }
.pond-reel-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 8px; color: #2f5560; font: 800 13px Nunito, system-ui, sans-serif; }
.pond-reel-top strong { font-size: 16px; }
.pond-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pond-pips i { width: 12px; height: 12px; border: 2px solid #3f6f7d; border-radius: 50%; background: #fff; }
.pond-pips i.is-on { background: #4fa55a; border-color: #2f6b3a; }
.pond-pips.is-strain i.is-on { background: #e2503f; border-color: #9f3b30; }
.pond-reel-bar { position: relative; height: 34px; overflow: hidden; border: 3px solid #2f5560; border-radius: 99px; background: linear-gradient(#cfe6ea, #b5d6dc); cursor: pointer; touch-action: manipulation; }
.pond-zone { position: absolute; top: 0; bottom: 0; border-left: 2px solid #2f6b3a; border-right: 2px solid #2f6b3a; background: linear-gradient(#9be08a, #5fbf6a); transition: left .25s ease, width .25s ease; }
.pond-marker { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; border-radius: 3px; background: #2a2420; box-shadow: 0 0 0 2px #fff; }
.pond-reel-feedback { position: absolute; left: 50%; top: 50%; color: #2f6b3a; font: 900 16px Nunito, system-ui, sans-serif; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.pond-reel-feedback.show { animation: reel-flash .5s ease-out; }
.pond-reel-feedback.bad { color: #b33a2e; }
@keyframes reel-flash { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -120%) scale(1); } }

.pond-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.pond-action { min-width: 170px; padding: 14px 22px; font-size: 16px; }
.pond-action.is-strike { background: #e2503f; box-shadow: 0 4px 0 #9f3b30; animation: alert-pop .4s ease-in-out infinite alternate; }
.pond-action.is-reel { background: #2f8f9d; box-shadow: 0 4px 0 #1f5f68; }
.pond-status { flex: 1; min-width: 200px; margin: 0; color: #4f6a5a; font-weight: 800; }

/* The side: gear, conditions and friends at the pond. */
.pond-side { display: grid; gap: 14px; }
.pond-card { padding: 14px; border: 3px solid #cfe1e4; border-radius: 16px; background: #f6fbfb; }
.pond-card h4 { margin: 0 0 8px; color: #2f5560; font: 900 15px Nunito, system-ui, sans-serif; }
.pond-gear-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pond-gear-head strong { display: block; color: #2f533a; font: 900 15px Nunito, system-ui, sans-serif; }
.pond-gear-head small { color: #6a7f78; font-weight: 700; }
.pond-gear-icon { font-size: 30px; }
.pond-bait { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px dashed #cfe1e4; color: #4f6a5a; font-weight: 800; font-size: 13px; }
.pond-bait .text-button { padding: 6px 12px; }
.pond-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pond-chip { padding: 3px 9px; border-radius: 99px; background: #e2f0f2; color: #2f5560; font: 800 12px Nunito, system-ui, sans-serif; }
.pond-chip.is-event { background: #fff0c9; color: #8a5a1f; }
.pond-biting { margin: 8px 0 6px; color: #4f6a5a; font-size: 13px; font-weight: 700; }
.pond-special { display: flex; align-items: center; gap: 8px; margin: 0; color: #6b4a2a; font-size: 13px; font-weight: 800; }
.pond-special-art { flex: none; width: 46px; height: 29px; }
.pond-friends .friend-stage { background: linear-gradient(#d6ecf3 0 64%, #8ccad8 64%); }

/* Fishing journal: drawn once caught, a silhouette until then. */
.pond-journal { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.journal-entry { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 8px 9px; border: 2px solid #e2e7dc; border-top: 5px solid var(--rarity); border-radius: 14px; background: #fffdf6; text-align: center; }
.journal-art { display: block; width: 72px; height: 45px; font-size: 32px; line-height: 45px; }
.journal-entry strong { color: #2f533a; font: 900 13px/1.2 Nunito, system-ui, sans-serif; }
.journal-entry small { color: #7f8c7a; font-size: 11px; line-height: 1.3; }
.journal-count { position: absolute; top: 6px; right: 8px; color: #8a7a5a; font-size: 11px; }
.journal-entry.is-unknown { background: #f3f1ea; }
.journal-entry.is-unknown .journal-art { filter: brightness(0); opacity: .22; }
.journal-entry.is-unknown strong { color: #9a9a8a; }

/* The bait stand. */
.pond-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pond-shop-item { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 3px solid #e2d6bd; border-radius: 16px; background: #fffaf0; box-shadow: 0 4px 0 #e6d3b5; }
.pond-shop-art { font-size: 30px; }
.pond-shop-item h4 { margin: 0; color: #4a3a2a; font: 900 16px Nunito, system-ui, sans-serif; }
.pond-shop-item p { margin: 0; font-size: 13px; line-height: 1.4; }
.pond-shop-item small { color: #8a7a5a; font-weight: 800; }
.pond-shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.pond-shop-foot .price, .market-row .price { display: inline-flex; align-items: center; gap: 4px; color: #876827; font: 900 16px Nunito, system-ui, sans-serif; }
.pond-shop-foot .button { padding: 9px 16px; }

/* Milo's Market: Milo and his buy-back counter. */
.market-top { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.market-milo .friend-stage { background: linear-gradient(#e7f2df 0 66%, #c9a26c 66%); }
.market-sell-card { padding: 16px; border: 3px solid #cfe0c2; border-radius: 18px; background: #f8fbf3; box-shadow: 0 5px 0 #d6e6c9; }
.market-sell-head h3 { margin: 2px 0 2px; color: #2f533a; }
.market-sell-head p { margin: 0 0 10px; font-size: 13.5px; }
.market-sell { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.market-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid #e2ebd8; border-radius: 12px; background: #fff; }
.market-row.is-special { border-color: #e8b94a; background: #fff8e0; }
.market-art { display: block; width: 52px; height: 32px; font-size: 26px; line-height: 32px; text-align: center; }
.market-copy strong { display: block; color: #2f533a; font: 900 14px Nunito, system-ui, sans-serif; }
.market-copy small { color: #7a8a72; font-size: 12px; font-weight: 700; }
.market-actions { display: flex; gap: 6px; }
.market-actions .text-button { padding: 7px 11px; font-size: 13px; white-space: nowrap; }
.market-empty { margin: 4px 0; color: #7a8a72; }

@media (max-width: 900px) {
  .pond-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .market-top { grid-template-columns: 1fr; }
  .market-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .market-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .pond-catch { width: 92%; padding: 10px; }
  .pond-catch-art { width: 90px; height: 56px; line-height: 56px; }
  .pond-catch p:not(.pond-catch-facts) { display: none; }
  .pond-action { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pond-scene .pond-bobber, .pond-ripples path, .pond-shadow-art, .pond-alert, .pond-action.is-strike { animation: none !important; }
}
.inventory-art { display: block; width: 40px; height: 25px; }

/* The night journal's strange light, glowing over the water. */
.pond-mystery { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: #effbe9; color: #2f6b3a; font-size: 13px; font-weight: 800; }
.pond-scene.is-mystery::after { content: ''; position: absolute; left: 66%; top: 52%; z-index: 4; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #e6ffe0, #9be08a 45%, transparent 70%); filter: blur(1px); animation: mystery-float 5s ease-in-out infinite; pointer-events: none; }
@keyframes mystery-float { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-34px); opacity: 1; } }