* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  /* Fills any space around the painting so wide and tall screens don't show bars. */
  background: linear-gradient(#f9dcae 0, #fbe3b8 30%, #5db4c4 36%, #2f8fb8 100%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #4a2f14;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}

/* The painting keeps its 2:1 shape. On landscape screens it fills the screen (a little trimmed off
   the sides on tablets); on tall screens like a phone held upright it fits the width instead. */
.stage {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: max(100vw, 200vh); aspect-ratio: 1774 / 887; overflow: hidden; isolation: isolate;
}
@media (max-aspect-ratio: 3/2) {
  .stage { width: 100vw; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
  body { background: linear-gradient(#f9dcae 50%, #2f8fb8 50%); }
}
.painting, .motion, #scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.painting { display: block; }
.motion { pointer-events: none; }
#scene { overflow: visible; }

/* ----- painted sprites with a little motion ----- */
.sprite { position: absolute; display: block; height: auto; }
.reeds { left: 47.5%; bottom: -1.6%; width: 6.7%; transform-origin: 52% 94%; animation: sway 5.8s ease-in-out infinite alternate; }
.lilies { left: 64%; top: 81%; width: 11%; transform-origin: 52% 70%; animation: float 5.6s ease-in-out infinite alternate; }
.shimmer {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: clamp(1px, 0.19vw, 3px);
  background: linear-gradient(90deg, transparent, #ffecad, #ffe6a5, transparent); border-radius: 50%;
  opacity: .25; animation: glint var(--p) var(--d) ease-in-out infinite alternate;
}
@keyframes sway { from { transform: skewX(-3deg) rotate(-3deg); } to { transform: skewX(4deg) rotate(4deg); } }
@keyframes float { from { transform: translate(-2%, 2%) rotate(-1.2deg); } to { transform: translate(2%, -4%) rotate(1.2deg); } }
@keyframes glint { from { transform: translateX(-15%) scaleX(.66); opacity: .1; } to { transform: translateX(11%) scaleX(1.1); opacity: .65; } }

#title {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); margin: 0;
  font-size: 0; line-height: 0; pointer-events: none;
}
#title img { width: clamp(64px, 9vw, 100px); height: auto; filter: drop-shadow(0 2px 4px rgba(40, 30, 10, 0.35)); }
#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: #f6f0dc; padding: 12px 20px; border-radius: 14px; font-weight: 700; opacity: 0; transition: .25s; pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ----- tappable things ----- */
.capy { cursor: pointer; outline: none; }
.capy:focus-visible { filter: drop-shadow(0 0 10px #fff); }
.capy .hint-ring { fill: none; stroke: #fff; stroke-width: 6; opacity: 0; }
.capy.hint .hint-ring { animation: hint 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.capy.hint { animation: wiggle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes hint { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

.ripple { fill: none; stroke: #fff; stroke-width: 5; transform-box: fill-box; transform-origin: center; }
.drop { fill: #fff; }

.dest { outline: none; }
.dest .label, .dest .peek { opacity: 0; }
.dest .label { font-size: 38px; font-weight: 800; fill: #fff; stroke: #4a2f14; stroke-width: 8px; paint-order: stroke; }
.dest { cursor: pointer; }
/* Called: a capybara is swimming over. A dashed ring marches round the spot. */
.dest.called .label { opacity: 0.75; }
.dest.called .hit { stroke: #fff; stroke-width: 5; stroke-dasharray: 16 14; animation: march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -30; } }
/* Ready: bright label, glow and a peeking capybara. Tap again to play. */
.dest.active .label { opacity: 1; }
.dest.active .peek { opacity: 1; animation: peek 1.8s ease-in-out infinite; }
.dest.active > :not(.hit):not(.label):not(.peek):not(.steam) { filter: drop-shadow(0 0 12px #fff5b0); }
.dest:focus-visible > .label { opacity: 1; }
@keyframes peek { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }
.steam { animation: steam 3s ease-in-out infinite; }
@keyframes steam { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-14px); opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .reeds, .lilies, .shimmer, .steam, .capy.hint, .dest.active .peek, .dest.called .hit { animation: none; }
}

/* A gentle nudge when the phone is held upright. */
#turn { display: none; position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #f6f0dc; padding: 10px 16px; border-radius: 14px; font-weight: 700; pointer-events: none; text-align: center; }
@media (max-aspect-ratio: 3/4) and (pointer: coarse) { #turn { display: block; } }

/* ----- trophy shelf ----- */
#shelf-btn {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); z-index: 3;
  display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 6px 16px 6px 12px; border: 3px solid #f4c430; border-radius: 18px;
  background: #fff4c9; color: #4a2f14; font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
#shelf-btn span[aria-hidden] { font-size: 1.7rem; line-height: 1; }
#endless-btn {
  position: fixed; top: calc(74px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); z-index: 3;
  display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px 6px 10px; border: 3px solid #3f8a5a; border-radius: 18px;
  background: #e4f4df; color: #1f4a30; font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
#endless-btn span[aria-hidden] { font-size: 1.5rem; line-height: 1; }
.shelf { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(20, 48, 28, 0.72); }
.shelf[hidden] { display: none; }
.shelf-card { position: relative; background: #f6f0dc; border-radius: 20px; padding: 16px 18px; width: min(640px, 100%);
  max-height: 100%; overflow-y: auto; text-align: center; }
.shelf-card h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.8rem); }
.shelf-card h3 { margin: 14px 0 2px; font-size: 1.1rem; }
.shelf-card p { margin: 2px 0 10px; }
#shelf-close { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; border: 0; border-radius: 14px;
  background: #e6dcc0; color: #4a2f14; font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.trophy { padding: 8px 4px; border-radius: 14px; background: #e6dcc0; color: #7b6a4c; font-size: 0.78rem; line-height: 1.15; }
.trophy .i { display: block; font-size: 2rem; line-height: 1.25; filter: grayscale(1); opacity: .3; }
.trophy b { display: block; font-size: 0.85rem; margin-bottom: 2px; }
.trophy.on { background: #fff4c9; color: #4a2f14; box-shadow: 0 0 0 2px #f4c430 inset; }
.trophy.on .i { filter: none; opacity: 1; }
.shelf-card .best { font-size: 0.9rem; opacity: .8; }