:root {
  color-scheme: light;
  --paper: #f5f3e8;
  --ink: #173d43;
  --muted: #3d6363;
  --line: #a7bcb2;
  --water: #bcdee2;
  --sun: #ffe384;
  font: 16px/1.5 system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
body, h1, p { margin: 0; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: var(--sun); }
.game {
  width: min(1040px, calc(100% - 56px));
  margin-inline: auto;
  padding-block: clamp(28px, 5vw, 70px) 32px;
}
.intro {
  margin: 0 auto 28px;
  text-align: center;
}
h1 {
  font: 700 clamp(46px, 7.6vw, 88px)/1.04 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.intro p {
  margin-top: 12px;
  color: var(--muted);
  font-size: clamp(16px, 2.1vw, 19px);
  text-wrap: pretty;
}
.scene {
  position: relative;
  height: clamp(340px, 48vw, 500px);
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  background: var(--water);
  box-shadow: 0 10px 30px #24464c19;
}
.water { position: absolute; inset: 0; width: 100%; height: 100%; }
.score {
  position: absolute;
  z-index: 1;
  inset: 20px 20px auto auto;
  display: grid;
  justify-items: end;
  min-width: 108px;
  max-width: calc(100% - 40px);
  padding: 8px 16px;
  border: 1px solid #7aaba9;
  border-radius: 12px;
  background: #e7f2e7;
}
.score span { font-size: 12px; font-weight: 700; }
.score output {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.2;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.target {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 53%;
  display: grid;
  place-items: center;
  width: clamp(155px, 29vw, 282px);
  aspect-ratio: 1.2;
  translate: -50% -50%;
}
.duck {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 30%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.duck img, .duck-still { display: block; width: 100%; height: auto; user-select: none; }
.duck:focus-visible { outline: 3px solid #204b4e; outline-offset: 4px; }
.ripples, .points { position: absolute; pointer-events: none; }
.ripples { inset: 64% -4% 0; z-index: -1; }
.ring {
  position: absolute;
  inset: 0;
  border: 2px solid #e8fff5;
  border-radius: 50%;
}
.ring::after {
  position: absolute;
  inset: 18%;
  content: "";
  border: 1px solid #e8fff5;
  border-radius: 50%;
}
.points { top: 3%; right: 8%; display: grid; place-items: center; }
.points span {
  padding: 3px 9px;
  background: #e8fff5;
  color: #1a474a;
  border-radius: 50px;
  font-weight: 800;
  font-size: 20px;
}
.message { margin-top: 21px; text-align: center; font-weight: 700; }
.storage-note { margin-top: 8px; color: var(--muted); text-align: center; font-size: 14px; }
@media (max-width: 600px) {
  .game { width: calc(100% - 32px); }
  .intro { margin-bottom: 21px; }
  .scene { height: clamp(270px, 88vw, 370px); border-radius: 16px; }
  .score { inset: 12px 12px auto auto; min-width: 82px; padding: 6px 12px; }
  .target { top: 58%; width: clamp(145px, 43vw, 210px); }
}
@media (prefers-reduced-motion: reduce) {
  .ripples, .points { display: none; }
}