.sk-shell {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #080d1c;
}
.sk-shell canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.sk-dpad {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
  gap: 0.3rem;
  justify-content: center;
  margin: 0 auto;
}
.sk-dpad button {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #d9ebff;
  font-size: 1.1rem;
  cursor: pointer;
}
.sk-dpad button:hover {
  background: rgba(79, 223, 255, 0.16);
}
.sk-dpad__up { grid-area: 1 / 2; }
.sk-dpad__left { grid-area: 2 / 1; }
.sk-dpad__right { grid-area: 2 / 3; }
.sk-dpad__down { grid-area: 3 / 2; }