html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#game {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
  touch-action: none;
}
/* Read by js/app.js to learn the safe-area insets. */
#safe-probe {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---- touch controls (js/core/touch.js); positions and sizes are set from JS ---- */
#touch {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 10;
  font-family: "PingFang SC", "Hiragino Sans GB", sans-serif;
}
.touch-hidden > .touch-ctl { display: none; }
.touch-ctl {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.touch-joy {
  background: rgba(255, 255, 255, 0.18);
  border: 3px solid rgba(255, 255, 255, 0.55);
}
.touch-knob {
  position: absolute;
  left: 29%;
  top: 29%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.touch-joy.pressed { background: rgba(255, 255, 255, 0.26); }
.touch-dir {
  position: absolute;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.touch-dir-up { left: 50%; top: 13%; }
.touch-dir-down { left: 50%; top: 87%; }
.touch-dir-left { left: 12%; top: 50%; }
.touch-dir-right { left: 88%; top: 50%; }
.touch-btn {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 1px 3px #000;
  border: 3px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 0.8; /* an insect fighting in the corner still shows through */
}
.touch-btn > * { grid-area: 1 / 1; pointer-events: none; }
.touch-label { white-space: pre-line; }
.touch-attack { background: radial-gradient(#ffb35c, #c8641a); font-size: 1.15em; }
.touch-skill1, .touch-skill2, .touch-skill3 { background: radial-gradient(#7cff4f, #2f9a1d); }
.touch-ult { background: radial-gradient(#ffdf5c, #e8501a); }
.touch-block { background: radial-gradient(#9ad7ff, #2b6fa8); }
.touch-btn.pressed { filter: brightness(1.25); transform: scale(0.93); opacity: 1; }
.touch-btn.cooldown { background: radial-gradient(#a3a8b4, #5a6070); }
.touch-sweep {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(rgba(0, 0, 0, 0.55) calc(var(--cd, 0) * 360deg), transparent 0);
}
.touch-btn.cooldown .touch-sweep { display: block; }
.touch-btn.cooldown .touch-label { opacity: 0.3; }
.touch-count { font-size: 2.3em; color: #fff; text-shadow: 0 0 4px #000, 0 2px 3px #000; }
.touch-ult.dim { filter: saturate(0.45) brightness(0.8); }
.touch-ult.glow {
  box-shadow: 0 0 0 5px rgba(255, 140, 40, 0.4), 0 0 22px #ff7a1a;
  animation: touch-glow 0.9s ease-in-out infinite alternate;
}
@keyframes touch-glow {
  from { box-shadow: 0 0 0 4px rgba(255, 140, 40, 0.35), 0 0 14px #ff7a1a; }
  to { box-shadow: 0 0 0 7px rgba(255, 170, 60, 0.55), 0 0 30px #ffb02a; }
}
.touch-btn.shake { animation: touch-shake 0.3s linear; }
@keyframes touch-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -7px 0; }
  40% { translate: 7px 0; }
  60% { translate: -5px 0; }
  80% { translate: 5px 0; }
}
.touch-portrait {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #10162a;
  pointer-events: auto;
  touch-action: none;
  z-index: 20;
}
.touch-portrait[hidden] { display: none; }
.touch-portrait-text {
  color: #ffd23f;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  padding: 0 24px;
}