*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#dce2eb;
  font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
body{display:flex;align-items:center;justify-content:center}
#h5Shell{
  position:relative;
  width:min(100vw,430px);
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 40px rgba(0,0,0,.12);
}
#pageFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}
#fade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:#fff;
  opacity:0;
  transition:opacity .15s ease;
  z-index:20;
}
#fade.on{opacity:1}
#topHud{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:30;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  opacity:.72;
  transition:opacity .2s ease;
}
#topHud:hover{opacity:1}
.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(40,102,138,.28);
}
.dot.active{background:#4aa0e8;box-shadow:0 0 0 3px rgba(74,160,232,.13)}
#musicBtn{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  right:14px;
  z-index:50;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  padding:0;
  font-size:18px;
  line-height:40px;
  text-align:center;
  color:#27637f;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  opacity:.78;
  cursor:pointer;
  transition:opacity .2s ease, transform .15s ease;
}
#musicBtn:hover{opacity:1}
#musicBtn:active{transform:scale(.92)}
#musicBtn.off{color:#9aa7b1}
#swipeHint{
  position:absolute;
  left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
#swipeHint.show{opacity:.92}
#swipeHint .chev{
  width:13px;
  height:13px;
  border-right:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;
  transform:rotate(45deg);
  animation:swipeBob 1.3s ease-in-out infinite;
}
@keyframes swipeBob{
  0%,100%{transform:rotate(45deg) translateY(-3px);opacity:.5}
  50%{transform:rotate(45deg) translateY(3px);opacity:1}
}
#restartBtn{
  position:absolute;
  left:14px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:40;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.78);
  color:#3479bd;
  font-size:18px;
  font-weight:900;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
#restartBtn.show{opacity:1;pointer-events:auto}
#loadingMask{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#d9f3ff;
  color:#27637f;
  font-weight:800;
  letter-spacing:1px;
  transition:opacity .15s ease;
}
#loadingMask.hide{opacity:0;pointer-events:none}