html:not(.nb-open),
html:not(.nb-open) body{overflow:hidden;height:100%}
html.nb-open .nb-lock{display:none!important}

.nb-lock{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  flex-direction:column;
  height:100dvh;
  background:#f7f6f2;
  color:#303430;
  font-family:Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  padding:max(28px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.nb-lock.is-done{opacity:0;transition:opacity 1s ease;pointer-events:none}
.nb-title{
  margin:8px 0 0;
  text-align:center;
  font-size:clamp(22px,4vw,34px);
  font-weight:500;
  letter-spacing:.28em;
}
.nb-stage{position:relative;flex:1;min-height:0;margin-top:8px}
.nb-animal{
  position:absolute;
  left:0;
  top:0;
  width:128px;
  height:146px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  touch-action:none;
}
.nb-animal svg{display:block;width:100%;height:100%;overflow:visible}
.nb-animal-body{display:block;width:100%;height:100%;transform-origin:50% 62%}
.nb-animal-body.is-hit{animation:nb-squash .4s ease}
@keyframes nb-squash{
  0%{transform:scale(1,1)}
  38%{transform:scale(1.07,.78)}
  100%{transform:scale(1,1)}
}
.nb-dock{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px}
.nb-hold{display:flex;align-items:center;justify-content:center;gap:14px;min-height:68px}
.nb-anchor{width:68px;height:68px;flex:none}
.nb-hint{margin:0;font-size:10px;letter-spacing:.18em;color:#8d918a}
.nb-hint[hidden]{display:none}
.nb-dots{display:flex;gap:12px}
.nb-dots i{width:8px;height:8px;border:1.5px solid #303430;border-radius:50%;background:transparent}
.nb-dots i.on{background:#303430}
.nb-hammer{
  position:fixed;
  left:0;
  top:0;
  z-index:4;
  width:68px;
  height:68px;
  padding:0;
  border:0;
  background:none;
  touch-action:none;
  cursor:pointer;
}
.nb-hammer.is-held{pointer-events:none;cursor:none}
.nb-hammer svg{display:block;width:100%;height:100%}
.nb-hammer-swing{display:block;width:100%;height:100%;transform-origin:50% 16%}
.nb-hammer.is-swing .nb-hammer-swing{animation:nb-swing .38s ease}
@keyframes nb-swing{
  0%{transform:rotate(-8deg)}
  42%{transform:rotate(32deg)}
  100%{transform:rotate(-8deg)}
}
@media(max-width:767px){
  .nb-animal{width:104px;height:118px}
  .nb-hammer{width:58px;height:58px}
  .nb-hold{min-height:58px}
  .nb-anchor{width:58px;height:58px}
  .nb-dock{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .nb-animal-body.is-hit{animation-duration:.2s}
  .nb-hammer.is-swing .nb-hammer-swing{animation-duration:.2s}
  .nb-lock.is-done{transition-duration:.4s}
}