:root {
  --ink: #6b4630;
  --leaf: #7fba9b;
}

* { box-sizing: border-box; }
html { color-scheme: light; }

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: ui-rounded, "Nunito", "Noto Sans SC", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 18%, #fff 0 5%, transparent 5.2%),
    radial-gradient(circle at 86% 25%, #fff 0 4%, transparent 4.2%),
    linear-gradient(180deg, #bfe9f4 0 38%, #fff4dc 72%);
}

.sky-decor {
  position: fixed;
  inset: 80px 0 auto;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  color: #fff9;
  font-size: clamp(22px, 5vw, 46px);
  animation: float 4s ease-in-out infinite;
}
.sky-decor span:nth-child(2) { color: #fff; font-size: 64px; }
.sky-decor span:nth-child(3) { color: #f2a3ad; transform: rotate(-12deg); }
.sky-decor span:nth-child(4) { color: #f7ce68; }

.nav, main, footer { position: relative; z-index: 1; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px clamp(18px, 5vw, 70px);
  background: #fff9;
  border-bottom: 3px solid #fff;
  border-radius: 0 0 26px 26px;
  box-shadow: 0 5px 0 #6b463017;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}
.brand { color: #df8244; font-size: 12px; font-weight: 900; letter-spacing: .2em; }

main {
  width: min(900px, 100%);
  min-height: calc(100svh - 132px);
  margin: auto;
  padding: 30px 20px 24px;
  text-align: center;
}
.date { margin: 0 0 8px; color: #708e92; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.counter-panel h1 {
  margin: 0;
  color: #70452c;
  font-size: clamp(38px, 7vw, 62px);
  line-height: 1.1;
  letter-spacing: .06em;
  text-shadow: 0 4px 0 #fff;
}
.guide { margin: 9px 0 18px; color: #8f7462; font-size: 15px; }
.count-label {
  display: inline-block;
  padding: 5px 14px;
  color: #fff;
  background: var(--leaf);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 0 #4d8062;
  font-size: 13px;
  font-weight: 900;
}
output {
  display: block;
  margin-top: 7px;
  color: #ed8244;
  font-size: clamp(58px, 9vw, 82px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 5px 0 #fff;
}

.instrument { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.fish-button {
  position: relative;
  width: min(500px, 94vw);
  aspect-ratio: 1.28;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.fish-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 19%;
  right: 19%;
  bottom: 5%;
  height: 11%;
  border-radius: 50%;
  background: #71432930;
  filter: blur(12px);
}
.fish-art {
  position: absolute;
  z-index: 3;
  left: 11%;
  bottom: 5%;
  width: 78%;
  height: 65%;
  object-fit: contain;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 14px 10px #7a3d2038);
  user-select: none;
  -webkit-user-drag: none;
}
.mallet-art {
  position: absolute;
  z-index: 6;
  top: -2%;
  right: auto;
  left: 7%;
  width: 34%;
  height: 58%;
  object-fit: contain;
  transform: rotate(43deg);
  transform-origin: 50% 12%;
  filter: drop-shadow(0 8px 6px #6d391f30);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.halo {
  position: absolute;
  z-index: 1;
  inset: 12% 13% 8%;
  border: 6px solid #fff9;
  border-radius: 50%;
  opacity: 0;
}
.plus-one {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 18%;
  padding: 7px 13px;
  color: #fff;
  background: #ee7e63;
  border: 4px solid #fff;
  border-radius: 999px;
  box-shadow: 0 5px 0 #b85e49;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 15px) scale(.6);
}
.fish-button:hover .fish-art { filter: brightness(1.04) drop-shadow(0 17px 12px #7a3d2042); }
.fish-button:focus-visible { outline: 4px solid #fff; outline-offset: 2px; border-radius: 40%; }
.fish-button.hit .fish-art { animation: fish-bounce .42s cubic-bezier(.2, 1.5, .45, 1); }
.fish-button.hit .mallet-art { animation: mallet-strike .46s cubic-bezier(.3, .05, .25, 1); }
.fish-button.hit .halo { animation: halo .65s ease-out; }
.fish-button.hit .plus-one { animation: pop-up .75s ease-out; }

.merit { min-height: 25px; margin: -2px 0 12px; color: #795b49; font-size: 16px; font-weight: 800; }
.reset {
  border: 3px solid #fff;
  border-radius: 999px;
  padding: 9px 16px;
  color: #815d48;
  background: #ffffffa8;
  box-shadow: 0 4px 0 #6b463026;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.reset:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #6b463026; }
.reset:focus-visible { outline: 3px solid #f3a059; outline-offset: 3px; }
footer { padding: 16px 20px max(26px, env(safe-area-inset-bottom)); color: #927866; text-align: center; font-size: 12px; }

@keyframes fish-bounce {
  0%, 100% { transform: none; }
  35% { transform: translate(4px, 8px) scale(1.025, .93) rotate(1.5deg); }
  70% { transform: translate(-3px, -10px) scale(.985, 1.035) rotate(-1deg); }
}
@keyframes mallet-strike {
  0%, 100% { transform: rotate(43deg) translate(0, 0); }
  38% { transform: rotate(23deg) translate(20px, 32px); }
  52% { transform: rotate(21deg) translate(23px, 36px); }
  76% { transform: rotate(48deg) translate(-5px, -7px); }
}
@keyframes halo { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes pop-up {
  0% { opacity: 0; transform: translate(-50%, 15px) scale(.6); }
  25% { opacity: 1; transform: translate(-50%, -10px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(.9); }
}
@keyframes float { 50% { transform: translateY(10px); } }

@media (max-width: 600px) {
  .nav { padding: 14px; }
  .brand { display: none; }
  .nav a { font-size: 13px; }
  main { padding-top: 24px; }
  .guide { margin-bottom: 12px; }
  .fish-button { width: min(470px, 98vw); }
  .mallet-art { right: auto; left: 3%; width: 36%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}