/* 《疯狂打地鼠》样式：全屏舞台 / 计分板 / 3x3 铁盒棋盘 / 遮罩层 / 结算叠加层 */
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;height:100%;overflow:hidden}
  body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC",system-ui,sans-serif;
    color:#5a3620;background:#e8564a;
    -webkit-user-select:none;user-select:none;
    overscroll-behavior:none;touch-action:manipulation;
  }
  img{display:block;-webkit-user-drag:none;user-select:none}

  /* ---------- 舞台 ---------- */
  #app{
    position:fixed;inset:0;
    background:url(images/bg.webp) center/cover no-repeat;
    display:flex;flex-direction:column;
    padding:6px 8px;
    padding:calc(6px + env(safe-area-inset-top)) 8px calc(6px + env(safe-area-inset-bottom));
    overflow:hidden;
  }

  /* ---------- 计分板 ---------- */
  .hud{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;position:relative;z-index:5}
  .hud-row{display:flex;gap:8px}
  .stat{
    flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;
    background:linear-gradient(#fffaf0,#fdeccd);
    border:3px solid #7b4a2d;border-radius:14px;padding:2px 10px;
    box-shadow:0 3px 0 rgba(90,54,32,.32),inset 0 2px 0 #fff;
  }
  .stat-label{font-size:clamp(11px,3.2vw,15px);font-weight:800;color:#a4724c;letter-spacing:1px}
  .stat-val{font-size:clamp(19px,6.2vw,28px);line-height:1.25;font-weight:900;color:#e0432f;text-shadow:0 2px 0 #fff}
  .stat-val.pop{animation:pop .28s ease}
  @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
  .stat.urgent{border-color:#d2372a}
  .stat.urgent .stat-val{color:#d2372a;animation:beat .6s infinite}
  @keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

  .hint{
    margin:0 auto;display:flex;align-items:center;gap:7px;max-width:100%;
    background:linear-gradient(#fffaf0,#fdeccd);
    border:3px solid #7b4a2d;border-radius:999px;
    padding:2px 16px 2px 4px;
    box-shadow:0 3px 0 rgba(90,54,32,.32),inset 0 2px 0 #fff;
  }
  .hint-tag{
    flex:0 0 auto;background:#e0432f;color:#fff;font-weight:800;
    font-size:clamp(10px,3vw,14px);border-radius:999px;padding:2px 9px;letter-spacing:1px;
  }
  .hint-text{
    font-size:clamp(17px,5.4vw,25px);font-weight:900;letter-spacing:2px;
    color:#7b4a2d;text-shadow:0 2px 0 #fff;white-space:nowrap;
  }
  .hint.flash{animation:hintFlash .55s cubic-bezier(.34,1.56,.64,1)}
  @keyframes hintFlash{
    0%{transform:scale(.82) rotate(-4deg)}
    55%{transform:scale(1.12) rotate(2deg)}
    100%{transform:scale(1) rotate(0)}
  }

  /* ---------- 3x3 铁盒 ---------- */
  .board-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 0}
  .board{display:grid;grid-template-columns:repeat(3,1fr);width:var(--bw,300px)}
  .cell{position:relative;height:var(--ch,auto);aspect-ratio:1/1.45}
  .cell .boximg{position:absolute;left:-8%;bottom:0;width:116%;height:auto}
  /* 舞台下沿 = 铁盒前口沿，动物从这里冒出来，超出部分被裁掉 */
  .stage{position:absolute;left:0;right:0;top:-6%;bottom:44.4%;overflow:hidden}
  .mole{
    position:absolute;left:15%;bottom:0;width:70%;height:auto;
    transform:translateY(112%) rotate(var(--rot,0deg));
    transition:transform .19s ease-in;
    will-change:transform;
  }
  .mole.up{
    transform:translateY(0) rotate(var(--rot,0deg));
    transition:transform .26s cubic-bezier(.34,1.6,.64,1);
  }
  .mole.hit{animation:hitShake .42s ease}
  @keyframes hitShake{
    0%{transform:translateY(0) rotate(0) scale(1)}
    25%{transform:translateY(5%) rotate(-4deg) scale(.93)}
    60%{transform:translateY(-3%) rotate(4deg) scale(1.05)}
    100%{transform:translateY(0) rotate(0) scale(1)}
  }
  .burst{
    position:absolute;left:50%;top:56%;width:98%;height:auto;pointer-events:none;z-index:6;
    animation:burstPop .7s ease-out forwards;
  }
  .burst.small{width:64%;animation:burstPopSmall .55s ease-out forwards}
  @keyframes burstPop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-14deg)}
    22%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(5deg)}
    48%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
    100%{opacity:0;transform:translate(-50%,-64%) scale(.92)}
  }
  @keyframes burstPopSmall{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
    30%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-90%) scale(.8)}
  }

  /* ---------- 遮罩层 ---------- */
  .screen{
    position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
    padding:10px;
    padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    background:rgba(46,16,8,.62);
  }
  .screen.hide{display:none}
  #endScreen{background:#e8564a url(images/bg.webp) center/cover no-repeat}
  .panel{
    width:min(92vw,420px);max-height:100%;overflow:auto;
    background:linear-gradient(#fffaf0,#fdeccd);
    border:4px solid #7b4a2d;border-radius:22px;
    padding:20px 18px;text-align:center;
    box-shadow:0 8px 0 rgba(90,54,32,.3),inset 0 3px 0 #fff;
  }
  .panel h1{margin:0 0 4px;font-size:clamp(22px,7vw,30px);color:#e0432f;text-shadow:0 2px 0 #fff,0 3px 0 rgba(123,74,45,.35)}
  .panel .sub{margin:0 0 12px;font-size:clamp(12px,3.4vw,14px);color:#a4724c;font-weight:700}
  .rules{
    text-align:left;font-size:clamp(11.5px,3.3vw,14px);line-height:1.75;font-weight:700;color:#7b4a2d;
    background:#fff8e6;border:2px dashed #d9b98c;border-radius:14px;padding:10px 12px;margin-bottom:14px;
  }
  .rules b{color:#e0432f}
  .rules .map{display:flex;justify-content:space-between;gap:8px}
  .rules .map i{font-style:normal;color:#7b4a2d}
  .btn{
    display:block;width:100%;border:0;border-radius:999px;cursor:pointer;
    padding:13px 10px;font-family:inherit;font-weight:900;letter-spacing:2px;
    font-size:clamp(17px,5vw,21px);color:#fff;
    background:linear-gradient(#f4685a,#d8331f);
    box-shadow:0 5px 0 #9c2113,inset 0 2px 0 rgba(255,255,255,.45);
    transition:transform .08s ease,box-shadow .08s ease;
  }
  .btn:active{transform:translateY(4px);box-shadow:0 1px 0 #9c2113,inset 0 2px 0 rgba(255,255,255,.45)}

  /* ---------- 载入 ---------- */
  .loading{width:min(70vw,300px);text-align:center;font-weight:800;color:#fff}
  .bar{height:14px;border-radius:999px;background:rgba(0,0,0,.3);overflow:hidden;margin-top:10px;border:2px solid #7b4a2d}
  .bar > i{display:block;height:100%;width:0;background:linear-gradient(#ffd45e,#f5a623);transition:width .2s}

  /* ---------- 结算 ---------- */
  .frame{position:relative;font-size:16px}
  .frame > img{width:100%;height:100%;display:block}
  .score-banner{
    position:absolute;left:7%;right:7%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(#fffaf0,#fdeccd);
    border:0.16em solid #7b4a2d;border-radius:999px;
    padding:0 0.5em;text-align:center;line-height:1.1;
    font-weight:900;color:#7b4a2d;letter-spacing:.5px;
    box-shadow:0 0.16em 0 rgba(90,54,32,.32),inset 0 0.1em 0 #fff;
    white-space:nowrap;
  }
  .hot{position:absolute;border:0;background:transparent;border-radius:999px;cursor:pointer;animation:hotPulse 1.5s infinite}
  .hot:active{background:rgba(255,255,255,.28)}
  @keyframes hotPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
    50%{box-shadow:0 0 0 .45em rgba(255,255,255,0)}
  }