<view class="page">
  <view class="hud">
    <view class="pill">💧 {{score}}</view>
    <view class="pill">⏱ {{timeLeft}}s</view>
    <view class="pill miss">❌ {{missed}}/3</view>
  </view>

  <view class="canvas-wrap">
    <canvas type="2d" id="gameCanvas" class="game-canvas"
      bindtouchstart="onTouchStart" bindtouchmove="onTouchMove"
      disable-scroll="{{true}}"></canvas>
  </view>

  <view class="howto">👆 滑动屏幕接住雨滴，金色 +3 金币，漏掉 3 滴结束</view>

  <!-- 开始/结算遮罩 -->
  <view class="modal-mask" wx:if="{{overlay}}">
    <view class="modal">
      <view class="modal-title" wx:if="{{!started}}">🌧️ 浇水小游戏</view>
      <view class="modal-title" wx:else>🎉 结束啦</view>
      <view class="modal-body" wx:if="{{!started}}">
        60 秒内接住雨滴<br/>接住 1 滴 = 1 金币，金色雨滴 = 3 金币
      </view>
      <block wx:else>
        <view class="big-score">{{score}}</view>
        <view class="r-line">获得 {{score}} 金币 🪙</view>
      </block>
      <view class="modal-btns">
        <view class="btn btn-plain" bindtap="goHome" wx:if="{{started}}">回花园</view>
        <view class="btn" bindtap="startGame">{{started ? '再来一局' : '开始游戏'}}</view>
      </view>
    </view>
  </view>
</view>
